validate jquery 注册页面使用实例 详解
官方使用文档： 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
浙公网安备 33010602011771号