本文介紹了thinkphp5使用bootstrapvalidator進(jìn)行異步驗(yàn)證郵箱的示例，分享給大家，具體如下：

js驗(yàn)證:

1. /** 
2.  * Created by HONGXIN on 2017-10-23. 
3.  */ 
4. $(function () { 
5.   $('form').bootstrapValidator({ 
6.   
7.     message: 'This value is not valid', 
8.     feedbackIcons: { 
9.       valid: 'glyphicon glyphicon-ok', 
10.       invalid: 'glyphicon glyphicon-remove', 
11.       validating: 'glyphicon glyphicon-refresh' 
12.     }, 
13.   
14.     live: 'disabled',//驗(yàn)證失敗后，提交按鈕仍然是可選狀態(tài) 
15.   
16.     fields: { 
17.       email: { 
18.         message: '用戶(hù)名驗(yàn)證失敗',//默認(rèn) 
19.         verbose: false, 
20.         validators: { 
21.           notEmpty: { 
22.             message: '郵箱不能為空' 
23.           }, 
24.           emailAddress: { 
25.             message: '郵箱地址格式有誤' 
26.           }, 
27.           remote: { 
28.             url: '/ajax_email', 
29.             message:"此郵箱已經(jīng)注冊(cè)", 
30.             type: "post", 
31.             dataType: 'json', 
32.             data: { 
33.               //默認(rèn)傳遞的就是輸入框的值 
34.             }, 
35.             delay: 500,//延遲效果 
36.           }, 
37.         } 
38.       }, 
39.       password: { 
40.         validators: { 
41.           notEmpty: { 
42.             message: '郵箱地址不能為空' 
43.           }, 
44.           stringLength: { 
45.             min: 6, 
46.             max: 18, 
47.             message: '用戶(hù)名長(zhǎng)度必須在6到18位之間' 
48.           }, 
49.         }, 
50.       }, 
51.       password2: { 
52.         validators: { 
53.           notEmpty: { 
54.             message: '確認(rèn)密碼不能為空' 
55.           }, 
56.           identical: { 
57.             field: 'password', 
58.             message: '兩次密碼必須一致' 
59.           } 
60.         } 
61.       }, 
62.       username:{ 
63.         validators: { 
64.           notEmpty: { 
65.             message: '用戶(hù)名不能為空' 
66.           }, 
67.           stringLength: { 
68.             min: 2, 
69.             max: 8, 
70.             message: '用戶(hù)名長(zhǎng)度必須在2到8位之間' 
71.           } 
72.         } 
73.       } 
74.   
75.     } 
76.   }); 
77. }); 

TP5處理:

1. public function ajax_email(){ 
2.   //該message可以為空，它替換JS驗(yàn)證的message屬性 
3.   echo json_encode(['valid'=>false,'message'=>'<a href="http://www.111cn.net/zhuanti/yanzhengma/" class="anchor" target="_blank">驗(yàn)證碼</a>不正確']); 
4.   
5. } 

js驗(yàn)證幾個(gè)注意點(diǎn):

verbose: false,代表js驗(yàn)證合法后再異步后臺(tái)驗(yàn)證，這樣減少服務(wù)器壓力

data: {} ,默認(rèn)傳遞的就是輸入框的值，所以一般不用寫(xiě)該屬性，或者為空即可

后臺(tái)注意點(diǎn):

注意不是return而是echo

返回json格式 {'valid':true[,'message':'驗(yàn)證成功']}