Element UI 自定義Validator

我們可以在formitem上指定驗證規則，有時候我們需要校驗用戶數據的值是否有效，這時候就需要用到自定義的validator

<el-form ref="form" :model="form" :rules="rules" label-width="260px">

 

rule的寫法如下，這里分別加了必填驗證，數字格式驗證（使用的正則表達式），自定義校驗：

rules: {
          ClientNumber: [
            {
              required: true,
              message: 'The client number cannot be empty',
              trigger: 'blur',
            },
            {
              type: 'string',
              pattern: /^[A-Za-z0-9]{1,25}$/,
              message:
                'Client number should be a number or letter with maximum length of 25.',
              trigger: 'blur',
            },
            {
              validator: ClientNumberValidator,
              trigger: 'blur',
            },
          ],
        },

自定義方法的寫法：

export default {
    ...
    data() {
      var ClientNumberValidator = async (rule, value, callback) => {
          const { code, data } = await checkClientNumberExists({
            param1: value1,
            param2: value2,
          })
          if (code && code === 200 && data == true) {
            callback(
              new Error(
                'The Number has already been used .'
              )
            )
        }
      }
      return {
     ...