今天来给大家说表单验证的一个demo,说的不好 欢迎批评,但是谢绝辱骂,谢谢合作!

好了 先上图:

效果如上图:用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 次 )

最佳答案

评论() 相关

收藏

赞

tyua07

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。