表单验证那些事

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

好了 先上图：

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

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

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

然后就是写规则：

1. $(function(){  //jq写法 不解释

2.  $('选中form节点').validate({

3.    

4.  rules:{

5.   '表单名':{

6.   '验证规则'：对应的验证规则填写的值

7.   }

8.  },

9. messages:{

10.  '表单名（ps：和上面一样）':{

11.  '验证规则':对应的验证错误时出现的错误提示（ps：如我提供的第一张图，显示用户名已存在的那个错误提示一样）

12.  }

13.  }

15.  });

16.  });

复制代码

好了规则就是这样了。来实战操作一下吧。比如现在有一个username的表单，就一个不做别的就简单验证一些，我们要求的规则是用户名长度是3-17位，必须验证.还有假设表单的id是register

有了以上规则,我们就来写：

1. $(function(){

2.   

3. $('#register').validate({//先用jq的选择器选择到form表单

4. rules:{

5.  'username':{

6. required:true,//这个规则就是必须验证，也就是必须填写的意思~

7. rangelength:[3,17]//这个意思就是用户名长度是3-17位之间，这里主要的一点就是汉子是算一个字节的，不是像我们utf-8的一个汉字算3个字节那样的。主意哦~~

9.  }

10.  }，

12. messages{

13. username:{

14.  required:'用户名必须填写'//当用户名没有填写的时候提示的错误信息

15. rangelength:'用户名长度应在3-17位之间'

16.  }

18.  }

19.  })

21.  })

复制代码

是不是感觉很实用，很简单的代码就能实线想要的效果！当然这只是一个简单的一个规则，还有更加复杂的比如验证用户名的时候 必须是字母开头 不允许汉字等等，这个就需要正则了吧，不过，哈哈 我正则不会~~不过我会继续学习的,我也是一个自学ThinkPHP的一员，

好了继续为大家介绍一下还有的其他的验证方式：
如图：
我的demo也有，还有就是自己也可以尝试着做一下！然后我们继续说一下异步验证的问题~
我先把我的验证的js贴出来：

1. $(function(){

2.     $('#register').validate({

3.         errorElement:'span',

4.         success:function(label){

5.             label.addClass('success');

6.             },

7.         rules:{

8.             'username':{

9.                 required:true,

10.                 rangelength:[3,17],

11.                 remote:{

12.                     url:checkUsername,

13.                     type:'post',

14.                     datatype:'json',

15.                     data:{

16.                         username:function(){

17.                             return $('#username').val();

18.                             }

19.                         }

20.                     }

21.                 },

22.             'password':{

23.                 required:true,

24.                 rangelength:[6,17]

25.                 },

26.             'rpassword':{

27.                 required:true,

28.                 equalTo:'#password'

29.                 },

30.             'email':{

31.                 required:true,

32.                 email:true

33.                 },

34.             'sex':{

35.                 required:true

36.                 },

37.             'birthday':{

38.                 required:true,

39.                 date:true

40.                 },

41.             'address':{

42.                 required:true

43.                 },

44.             'old':{

45.                 required:true,

46.                 digits: true,

47.                 rangelength:[1,3]

48.                 },

49.             'tel':{

50.                 required:true,

51.                 digits: true,

52.                 rangelength:[0,11]

53.                 }

54.             },

55.         messages:{

56.             'username':{

57.                 required:'用户名必须填写',

58.                 rangelength:'用户名长度应在3-17位之间',

59.                 remote:'用户名已存在'

60.                 },

61.             'password':{

62.                 required:'密码必须填写',

63.                 rangelength:'密码必须在6-17位之间'

64.                 },

65.             'rpassword':{

66.                 required:'确认密码必须填写',

67.                 equalTo:'两次密码不一致'

68.                 },

69.             'email':{

70.                 required:'邮箱必须填写',

71.                 email:'邮箱格式不正确'

72.                 },

73.             'sex':{

74.                 required:'请选择性别'

75.                 },

76.             'birthday':{

77.                 required:true

78.                 },

79.             'address':{

80.                 required:'请填写地址',

81.                 date:'日期格式不正确'

82.                 },

83.             'old':{

84.                 required:'请填写年龄',

85.                 digits: '您输入的不是数字',

86.                 rangelength:'您输入的年龄不符合格式（ps：吓死我了）'

87.                  },

88.             'tel':{

89.                 required:'请填写电话号码',

90.                 digits: '您输入的不是数字',

91.                 rangelength:'请输入正确格式的电话号码（ps：需要11位）'

92.                 }

93.             }

94.         

95.         });

96.         

97.         

98.     });

复制代码

其他的我们不说，就来说说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判断就好了，是不是这样的思路你也能做了。
控制器方法代码：

1. //验证用户名是否存在

2.         public function checkUsername(){

3.             if(!$this->isAjax()) halt('页面不存在');//最好做个判断，

4.             

5.             $where = array(

6.               'menbername'=>I('username'),

7.             );

8.             if(M('menber')->where($where)->find()){

9.                 echo 'false';//切记这是重点

10.                 }else{

11.                 echo 'true';

12.                     }

13.             

14.             }

复制代码

当存在我们是要返回字符串格式的false过去，一定要记住啊~不然你会调试代码很惨的。就像我以前第一次写一样，尼玛 一直发现没哪里有问题，一直调试，心情比大姨妈来了还沉重！

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