表单验证那些事

时间 2019-11-12

标签表单验证那些栏目 HTML 繁體版

原文原文链接

今天来给你们说表单验证的一个demo，说的很差欢迎批评，可是谢绝辱骂，谢谢合做！

好了先上图：

效果如上图：用css框架和jquery-validate 作的~~但愿有喜欢这个demo的朋友~

好了先说说：布局就是用bootstrap作的，这个就不说了，还有那个日历也是一个插件；详细传送门http://www.bootcss.com/p/bootstrap-datetimepicker/
固然，日历插件也有作的很差的，好比会出现这个，我没有调过来，还有就是dome页面我都写好了注释了的！

接下来就是validate的引入，在引入前，必需要先引入jquery，由于那个是基于jq写的，否则会出现不了效果的~要注意哦~~
如图：

而后就是写规则：php

$(function(){ //jq写法不解释css
$('选中form节点').validate({jquery
rules:{git
'表单名':{thinkphp
'验证规则'：对应的验证规则填写的值json
}bootstrap
},网络
messages:{框架
'表单名（ps：和上面同样）':{dom
'验证规则':对应的验证错误时出现的错误提示（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过去，必定要记住啊~否则你会调试代码很惨的。就像我之前第一次写同样，尼玛一直发现没哪里有问题，一直调试，心情比大姨妈来了还沉重！

好了到此，已经结束了，应该写完了吧，要是写错了，欢迎提出来，我会从新修改的！谢谢