好了 先上图：
效果如上图：用css框架和jquery-validate 做的~~希望有喜欢这个demo的朋友~
好了先说说： 布局就是用bootstrap做的，这个就不说了，还有那个日历也是一个插件；详细传送门http://www.bootcss.com/p/bootstrap-datetimepicker/
当然，日历插件也有做的不好的，比如会出现
这个，我没有调过来，还有就是dome页面我都写好了注释了的！接下来就是validate的引入，在引入前，必须要先引入jquery，因为那个是基于jq写的，不然会出现不了效果的~要注意哦~~
如图：
然后就是写规则：
$(function(){ //jq写法 不解释
$('选中form节点').validate({
rules:{
'表单名':{
'验证规则'：对应的验证规则填写的值
}
},
messages:{
'表单名（ps：和上面一样）':{
'验证规则':对应的验证错误时出现的错误提示（ps：如我提供的第一张图，显示用户名已存在的那个错误提示一样）
}
}
});
});好了规则就是这样了。来实战操作一下吧。比如现在有一个username的表单，就一个不做别的就简单验证一些，我们要求的规则是用户名长度是3-17位，必须验证.还有假设表单的id是register有了以上规则,我们就来写：
$(function(){
$('#register').validate({//先用jq的选择器选择到form表单
rules:{
'username':{
required:true,//这个规则就是必须验证，也就是必须填写的意思~
rangelength:[3,17]//这个意思就是用户名长度是3-17位之间，这里主要的一点就是汉子是算一个字节的，不是像我们utf-8的一个汉字算3个字节那样的。主意哦~~
}
}，
messages{
username:{
required:'用户名必须填写'//当用户名没有填写的时候提示的错误信息
rangelength:'用户名长度应在3-17位之间'
}
}
})
})是不是感觉很实用，很简单的代码就能实线想要的效果！当然这只是一个简单的一个规则，还有更加复杂的比如验证用户名的时候 必须是字母开头 不允许汉字等等，这个就需要正则了吧，不过，哈哈 我正则不会~~不过我会继续学习的,我也是一个自学ThinkPHP的一员，好了继续为大家介绍一下还有的其他的验证方式：
如图：
我的demo也有，还有就是自己也可以尝试着做一下！然后我们继续说一下异步验证的问题~
我先把我的验证的js贴出来：
$(function(){
$('#register').validate({
errorElement:'span',
success:function(label){
label.addClass('success');
},
rules:{
'username':{
required:true,
rangelength:[3,17],
remote:{
url:checkUsername,
type:'post',
datatype:'json',
data:{
username:function(){
return $('#username').val();
}
}
}
},
'password':{
required:true,
rangelength:[6,17]
},
'rpassword':{
required:true,
equalTo:'#password'
},
'email':{
required:true,
email:true
},
'sex':{
required:true
},
'birthday':{
required:true,
date:true
},
'address':{
required:true
},
'old':{
required:true,
digits: true,
rangelength:[1,3]
},
'tel':{
required:true,
digits: true,
rangelength:[0,11]
}
},
messages:{
'username':{
required:'用户名必须填写',
rangelength:'用户名长度应在3-17位之间',
remote:'用户名已存在'
},
'password':{
required:'密码必须填写',
rangelength:'密码必须在6-17位之间'
},
'rpassword':{
required:'确认密码必须填写',
equalTo:'两次密码不一致'
},
'email':{
required:'邮箱必须填写',
email:'邮箱格式不正确'
},
'sex':{
required:'请选择性别'
},
'birthday':{
required:true
},
'address':{
required:'请填写地址',
date:'日期格式不正确'
},
'old':{
required:'请填写年龄',
digits: '您输入的不是数字',
rangelength:'您输入的年龄不符合格式（ps：吓死我了）'
},
'tel':{
required:'请填写电话号码',
digits: '您输入的不是数字',
rangelength:'请输入正确格式的电话号码（ps：需要11位）'
}
}
});
});其他的我们不说，就来说说remote，这个验证方法。这个验证就是用异步去验证的了。
remote:{
url:这里就是填写你用于验证的url，在这个地方我们是用控制器里面的方法去验证的，我们就可以在模版里面申明一个变量，然后变量的值就是用U方法去生成那个用于验证的方法的不包含网址的url路径就可以了，
type:这个就是传输的类型我一般都是填写post
datatype:这个就是数据类型，一般填写json
data:{
username:function(){//前面的username是表单的name名称
return $('#username').val();//这里的就是表单的id或者class名，其实这里表单名称和id名都写一样的就好了，就用不着去怕写错了~~哈哈
}
}
}
然后提交的时候用firebug去填写username表单的东西后，按一下tab见在firebug的网络里面，就会异步一个值：
如图:
这个就是发送了你填写的值到那个控制器，然后我们在那个控制器写if判断就好了，是不是这样的思路你也能做了。
控制器方法代码：
//验证用户名是否存在
public function checkUsername(){
if(!$this->isAjax()) halt('页面不存在');//最好做个判断，
$where = array(
'menbername'=>I('username'),
);
if(M('menber')->where($where)->find()){
echo 'false';//切记这是重点
}else{
echo 'true';
}
}当存在我们是要返回字符串格式的false过去，一定要记住啊~不然你会调试代码很惨的。就像我以前第一次写一样，尼玛 一直发现没哪里有问题，一直调试，心情比大姨妈来了还沉重！好了 到此，已经结束了，应该写完了吧，要是写错了，欢迎提出来，我会重新修改的！谢谢
jquery-validate.zip
( 200.41 KB 下载：235 次 )
最佳答案
