JQuery
jquery 表单前端js验证
文章利用了jquery的表单验证插件实现了表单前端js验证效果，用户体验非常好，有需要的朋友可以参考一下。
| 代码如下 | 复制代码 |
| <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>用户注册</title> <script type="text/javascript" src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy-min.js"></script> </head> <body> <div class="register"> <div class="title">用户注册</div> <form action="member.php?mod=register&do=doregister" method="post" name="" id="reg_form"> <table class="regtab"> <tr> <td class="r"><span>*</span>账号：</td><td class="l"><input type="text" name="username" id="username" /></td><td></td> </tr> <tr> <td class="r"><span>*</span>密码：</td><td class="l"><input type="password" name="pwd" id="pwd" /></td><td></td> </tr> <tr> <td class="r"><span>*</span>确认密码：</td><td class="l"><input type="password" name="rpwd" id="rpwd" /></td><td></td> </tr> <tr> <td class="r"><span>*</span>真实姓名：</td><td class="l"><input type="text" name="realname" id="realname" /></td><td></td> </tr> <tr> <td class="r">性别：</td> <td class="l"> <select name="sex"> <option value="s">保密</option> <option value="f">女</option> <option value="m">男</option> </select> </td> <td></td> </tr> <tr> <td class="r">Email：</td><td class="l"><input type="text" name="email" id="email" /></td><td></td> </tr> <tr> <td class="r">出生日期：</td><td class="l"><input type="text" name="birdate" id="birdate" /></td><td></td> </tr> <tr> <td class="r">所在学校：</td><td class="l"><input type="text" name="school" /></td><td></td> </tr> <tr> <td class="r">所在班级：</td><td class="l"><input type="text" name="class" /></td><td></td> </tr> <tr> <td class="r">学校详细地址：</td><td class="l"><input type="text" name="saddress" /></td><td></td> </tr> <tr> <td class="r">个人简介：</td><td class="l"><textarea name="intro"></textarea></td><td></td> </tr> <tr class="n"> <td></td><td><input type="submit" name="sub1" value="提交" /> <input type="checkbox" name="" />同意网站服务条款</td><td></td> </tr> </table> </form> </div> <script type="text/javascript"> KISSY.use("validation",function(S,Validation){ var regform = new Validation('#reg_form',{ style:"under" }); regform.add("#username",{ length:[6,30,true], //账号长度6-30个字符 remote:['ajax.php?mod=member&ado=verify_username'] //ajax方式判断账号是否被占用 }); regform.add("#pwd",{ length:[6,30,true] //密码长度6-30个字符 }); regform.add("#rpwd",{ equalTo:['#pwd'] //确认密码=密码 }); regform.add("#realname",{ chinese:['真实姓名只能是中文'] //姓名必须是中文 }); regform.add("#email",{ //判断Email格式 required:false, email:['请填写正确的email哦'] }); S.Event.on("#reg_form","submit",function(ev){ //点击submit再次js方式验证必填字段 var isValid = regform.isValid(); if(!isValid){ return false; } }); }); KISSY.use("node,calendar,calendar/assets/base.css",function(S,Node,Calendar){ //这个是日历组件 new S.Calendar('#birdate',{ //出生日期字段 popup:true, triggerType:['click'], closable:true }).on('select',function(e){ Node.one('#birdate').val(S.Date.format(e.date,'isoDate')); }); }); </script> </body> </html> | |
话题作者
头衔:无
活跃成员
