一文講解thinkphp5如何進(jìn)行異步驗(yàn)證郵箱

thinkphp框架教程欄目將給大家介紹thinkphp5使用bootstrapvalidator進(jìn)行異步驗(yàn)證郵箱的方法,希望對(duì)需要的朋友有所幫助!

一文講解thinkphp5如何進(jìn)行異步驗(yàn)證郵箱

TP5使用bootstrapvalidator進(jìn)行異步驗(yàn)證郵箱

JS驗(yàn)證

/**  * Created by HONGXIN on 2017-10-23.  */ $(function () {     $('form').bootstrapValidator({          message: 'This value is not valid',         feedbackIcons: {             valid: 'glyphicon glyphicon-ok',             invalid: 'glyphicon glyphicon-remove',             validating: 'glyphicon glyphicon-refresh'         },          live: 'disabled',//驗(yàn)證失敗后,提交按鈕仍然是可選狀態(tài)          fields: {             email: {                 message: '用戶名驗(yàn)證失敗',//默認(rèn)                 verbose: false,                 validators: {                     notEmpty: {                         message: '郵箱不能為空'                     },                     emailAddress: {                         message: '郵箱地址格式有誤'                     },                     remote: {                         url: '/ajax_email',                         message:"此郵箱已經(jīng)注冊(cè)",                         type: "post",                         dataType: 'json',                         data: {                             //默認(rèn)傳遞的就是輸入框的值                         },                         delay: 500,//延遲效果                     },                 }             },             password: {                 validators: {                     notEmpty: {                         message: '郵箱地址不能為空'                     },                     stringLength: {                         min: 6,                         max: 18,                         message: '用戶名長(zhǎng)度必須在6到18位之間'                     },                 },             },             password2: {                 validators: {                     notEmpty: {                         message: '確認(rèn)密碼不能為空'                     },                     identical: {                         field: 'password',                         message: '兩次密碼必須一致'                     }                 }             },             username:{                 validators: {                     notEmpty: {                         message: '用戶名不能為空'                     },                     stringLength: {                         min: 2,                         max: 8,                         message: '用戶名長(zhǎng)度必須在2到8位之間'                     }                 }             }          }     }); });

TP5處理

    public function ajax_email(){         //該message可以為空,它替換JS驗(yàn)證的message屬性        echo json_encode(['valid'=>false,'message'=>'驗(yàn)證碼不正確']);      }

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

  • verbose: false,代表js驗(yàn)證合法后再異步后臺(tái)驗(yàn)證,這樣減少服務(wù)器壓力
  • data: {} ,默認(rèn)傳遞的就是輸入框的值,所以一般不用寫該屬性,或者為空即可

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

  • 注意不是return而是echo
  • 返回json格式 {‘valid’:true[,’message’:’驗(yàn)證成功’]}

? 版權(quán)聲明
THE END
喜歡就支持一下吧
點(diǎn)贊6 分享