官方使用文档: http://jqueryvalidation.org/documentation/
参考资料:http://www.w3cschool.cc/jquery/jquery-plugin-validate.html
导入JS 文件 记得都使用压缩过的.min的js 依赖jquery 版本在1.11.1下没问题 其他版本没有测试
<script type="text/javascript" src="/js/jquery-1.11.1.js"></script> <script type="text/javascript" src="/js/jquery.validate.js"></script>
HTML结构 使用 thinkphp框架做的
<div class="w100 register-bg"> <div class="w1200 center register-block"> <div class="register-div" > <form action="{:U('Service/reg/index')}" method="post" class="reg-form" id="register" > <fieldset style="border: 0px;"> <legend class="ui header">用户注册 <a href="{:U('Login/index')}" target="_self"> 已有账号登陆</a> </legend> <p class="field"> <label>用户名:</label> <input ID="name" name="name" type="text" placeholder="用户名" class="user-name"> <span></span> </p> <p class="field"> <label>密码:</label> <input id="pw" name="pw" type="password" placeholder="密码" class="user-pw"> </p> <p class="field"> <label>重复密码:</label> <input id="againpw" name="againpw" type="password" placeholder="重复密码" class="user-re-pw"> </p> <p class="field"> <label>邮箱:</label> <input id="emali" name="email" type="text" placeholder="邮箱" class="user-email"> </p> <p class="checkbox"> <input type="checkbox" name="read" value="1" class="user-read"> <label for="read" placeholder="用户协议选择"> 我已阅读同意星耀学园 <a href="" target="_blank">《用户协议》</a> </label> </p> <p class="field"> <button type="submit" class="register-button ">注册</button> </p> </fieldset> </form> </div> </div> </div>
使用方法 :
最基本的就是 表单ID 执行validate函数验证
<script type="text/javascript"> $(document).ready(function(){ $("#register").validate({ }); }) </script>
remote使用实例
官方介绍 http://jqueryvalidation.org/remote-method/
注意的就是remote写在验证字段的里面 rules 的字段 比如name下 name字段 在HTML 的属性ID 和name属性值 都是这个
messages的字段name里 加remote 后面直接提示文字
后端返回的是字符串true 或者fales 看JS源码貌似比较的就是true
$(document).ready(function(){ $("#register").validate({ /* debug:true,*/ errorClass:'x-error', errorElement:'div', /*错误信息显示位置*/ errorPlacement:function(error,element){ error.appendTo(element.parent().find('label')) }, rules:{ name:{ required:true, minlength:4 , rangelength:[4,10], remote:{ url:'{:U("Service/Validata/checkUsername")}', type:'post', data:{ name:function(){ return $('#name').val(); } } } }, pw:{ required:true, minlength:8, rangelength:[8,16] }, againpw:{ required:true, minlength:8, rangelength:[8,16], equalTo:"#againpw" }, email:{ required:true, email:true, remote:{ url:'{:U("Service/Validata/checkEmail")}', type:'post', data:{ email:function(){ return $('#email').val(); } } } }, agreement:{ required:true } }, messages:{ name:{ required:"请输入用户名", minlength:"用户名最少为4个字符", rangelength:"用户名为4-10个字符", remote:"用户名已被注册" }, pw:{ required:"请输入密码", minlength:"密码最少8位", rangelength:"请输入8位到16位的密码" }, againpw:{ required:"请输入确认密码", minlength:"确认密码最少8位", rangelength:"请输入8位到16位密码", equalTo:"两次输入密码不一致" }, email:{ required:"请输入email", email:"请输入一个有效的email地址", remote:"邮箱已被注册!" }, agreement:{ required:"不同意星耀学园协议不能注册!" } } }); })
验证规则
rules:{ name:{ required:true, minlength:4 , rangelength:[4,10], remote:{ url:'{:U("Service/Validata/checkUsername")}', type:'post', data:{ name:function(){ return $('#name').val(); } } } } }
提示文字
messages:{ name:{ required:"请输入用户名", minlength:"用户名最少为4个字符", rangelength:"用户名为4-10个字符", remote:"用户名已被注册" } }
后台php thinkphp框架 这里接受的参数是前端remote data里的参数
public function checkUsername(){
$name = I('name',0);//这里name是JS remote发送的data参数
if($name == "0"){
echo "false";
}else{
$Member = M('admin_member');
$s = $Member->where(array(admin_name=>$name))->select();
echo $s == null ?"true":"false" ;
}
}
public function checkEmail(){
$email = I('email',0);
if($email == "0"){
echo "false";
}else{
$Member = M('admin_member');
$s = $Member->where(array(email=>$email))->select();
echo $s == null ?"true":"false" ;
}
}
想看到前台返回什么可以在源码jquery.validate.js里查找remote 在$.ajax 里success 的返回参数response 输出这个值 就能在浏览器里看到了
错误信息设置
errorClass 提示错误的类名 errorElement 提示错误信息的元素 自动添加 后面errorPlacement就是要把错误信息放在哪个位置上
errorClass:'x-error', errorElement:'div', /*错误信息显示位置*/ errorPlacement:function(error,element){ error.appendTo(element.parent().find('label')) },
下面是字段验证规则
比如name字段
一般常用的就是必须填写 最少4位(举例) 输入4-10个字符串(举例)
required:true 必须填写 minlength:4 最少输入4个字符 rangelength:[4,10]输入4-10个范围的字符 这些都是写在rules里
name:{ required:true, minlength:4 , rangelength:[4,10], remote:{ url:'{:U("Service/Validata/checkUsername")}', type:'post', data:{ name:function(){ return $('#name').val(); } } } },
提示文字 写在messages 对应验证属性required minlength rangelength remote 填写对应提示信息即可
name:{ required:"请输入用户名", minlength:"用户名最少为4个字符", rangelength:"用户名为4-10个字符", remote:"用户名已被注册" },
查看验证方法 直接去源码里搜索methods
验证checkbox必须选中
HTML
<p class="checkbox"> <input type="checkbox" name="agreement" value="1" class="user-read" id="agreement"> <label for="agreement" placeholder="用户协议选择"> 我已阅读同意星耀学园 <a href="" target="_blank">《用户协议》</a> </label> </p>
验证规则
agreement:{ required:true }
其他参考网址
http://www.w3cschool.cc/jquery/jquery-plugin-validate.html