表單驗證那些事

今天來給你們說表單驗證的一個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過去，必定要記住啊~否則你會調試代碼很慘的。就像我之前第一次寫同樣，尼瑪 一直髮現沒哪裏有問題，一直調試，心情比大姨媽來了還沉重！

好了 到此，已經結束了，應該寫完了吧，要是寫錯了，歡迎提出來，我會從新修改的！謝謝