怎么在thinkphp5中使用bootstrapvalidator異步驗證郵箱

怎么在thinkphp5中使用bootstrapvalidator異步驗證郵箱？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

js驗證

$(function () {
  $('form').bootstrapValidator({

    message: 'This value is not valid',
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },

    live: 'disabled',//驗證失敗后，提交按鈕仍然是可選狀態

    fields: {
      email: {
        message: '用戶名驗證失敗',//默認
        verbose: false,
        validators: {
          notEmpty: {
            message: '郵箱不能為空'
          },
          emailAddress: {
            message: '郵箱地址格式有誤'
          },
          remote: {
            url: '/ajax_email',
            message:"此郵箱已經注冊",
            type: "post",
            dataType: 'json',
            data: {
              //默認傳遞的就是輸入框的值
            },
            delay: 500,//延遲效果
          },
        }
      },
      password: {
        validators: {
          notEmpty: {
            message: '郵箱地址不能為空'
          },
          stringLength: {
            min: 6,
            max: 18,
            message: '用戶名長度必須在6到18位之間'
          },
        },
      },
      password2: {
        validators: {
          notEmpty: {
            message: '確認密碼不能為空'
          },
          identical: {
            field: 'password',
            message: '兩次密碼必須一致'
          }
        }
      },
      username:{
        validators: {
          notEmpty: {
            message: '用戶名不能為空'
          },
          stringLength: {
            min: 2,
            max: 8,
            message: '用戶名長度必須在2到8位之間'
          }
        }
      }

    }
  });
});

TP5處理

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

  }

js驗證幾個注意點

1. verbose: false,代表js驗證合法后再異步后臺驗證，這樣減少服務器壓力

2. data: {} ,默認傳遞的就是輸入框的值，所以一般不用寫該屬性，或者為空即可

后臺注意點

1. 注意不是return而是echo

2. 返回json格式 {'valid':true[,'message':'驗證成功']}

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。