Element ui rules 表單校驗

1.規則

使用rules屬性定義規則

<el-form ref="form" :model="formData" label-width="11rem" :rules="rules">
      <el-form-item label="報表名稱" prop="name">
        <el-input
          type="textarea"
          placeholder="請輸入報表名稱"
          v-model.trim="formData.name"
          maxlength="50"
          show-word-limit
        >
        </el-input>
      </el-form-item>
    </el-form>

 注：

 一定要在 el-form-item 上使用prop，否則驗證不起作用

 

常用規則：

type：指示type要使用的驗證器。

 

// 校驗
string: [
  {type: 'string', message: `請輸入字符串`, trigger: 'blur'}
]

<el-form-item label="測試字段" prop="string">
  <el-input v-model.number="form.string" placeholder="請輸入"></el-input>
</el-form-item>

可識別的類型值為：

string：字符串類型。

number：數字類型。

boolean：boolean值。

integer：數字類型，且為整數

float：數字類型，且為浮點數

array：數組

enum：枚舉，值必須存在於枚舉中

email：類型必須為 email

method：類型必須為 function

regexp：必須是 RegExp 創建新時不會產生異常的的實例或字符串 RegExp。

object：類型必須為 object

date：類型必須為 date

hex：類型必須為 hex

any：任何類型

Required

required 屬性為true是，該字段為必填項

// 校驗
name: [
  {required: true, message: `請輸入`, trigger: 'blur'}
]

Pattern

該 pattern 規則屬性指示一個正則表達式的值必須匹配，才能通過驗證。

// 校驗
number: [
  {pattern: /^[0-9]*$/, message: `請輸入數字`, trigger: 'blur'}
]

min、max

規定最小長度與最大長度

// 校驗
minmax: [
  {min: 3, max: 8, message: '請輸入3-8位', trigger: 'blur'}
]

len

指定確切長度。（如果該len屬性與min和max范圍屬性結合使用，len則優先）

// 校驗
length: [
  {len: 5, message: '請輸入5位', trigger: 'blur'}
]

whitespace

驗證是否只有空格

// 校驗
whitespace: [
  {whitespace: true, message: '只存在空格', trigger: 'blur'}
]

Transform

有時有必要在驗證之前轉換值，以強制或以某種方式對其進行清理。為此 transform ，向驗證規則添加一個功能。在驗證之前，先轉換屬性，然后將其重新分配給源對象，以更改該屬性的值。（官方文檔是這樣說的，但是實際操作中我發現，他並不會修改你的源數據）

// 校驗
transform: [
  {type: 'enum', enum: [2,4,6], message: `結果不存在`, trigger: ['change', 'blur'], transform(value) {return Number(value * 2)}}
]

Messages

校驗不通過提示

asyncValidator

可以為指定的字段自定義異步驗證功能

const fields = {
  asyncField: {
    asyncValidator(rule, value, callback) {
      ajax({
        url: 'xx',
        value: value,
      }).then(function(data) {
        callback();
      }, function(error) {
        callback(new Error(error));
      });
    },
  },

  promiseField: {
    asyncValidator(rule, value) {
      return ajax({
        url: 'xx',
        value: value,
      });
    },
  },
};

validator

您可以為指定字段自定義驗證函數

dateScope: {
  required: true,
  message: '請選擇時間范圍',
  validator: function(rule: any, value: DateTimeLimit, callback: any) {
    if (value.dateRangeCatg !== 0 || value.description) {
      allback();
    } else {
      callback(new Error('請選擇時間范圍'));
    }
  },
}

使用多個驗證條件 

name: [
      {
        required: true,
        message: '請輸入報表名稱',
        trigger: 'blur',
      },
      {
        required: true,
        message: '請輸入4-50個字符的報表名稱',
        trigger: 'blur',
        min: 4,
        max: 50,
      },
    ],

2.表單驗證

使用model綁定表單數據對象

<el-form ref="form" :model="formData" label-width="11rem" :rules="rules">
      <el-form-item label="報表名稱" prop="name">
        <el-input
          type="textarea"
          placeholder="請輸入報表名稱"
          v-model.trim="formData.name"
          maxlength="50"
          show-word-limit
        >
        </el-input>
      </el-form-item>
    </el-form>

// 表單驗證
  public formVerify() {
    let ret = false;
    (this.$refs['form'] as HTMLFormElement).validate((valid: boolean) => {
      ret = valid;
    });

    return ret;
  }

// 單獨驗證某個字段字段

  private positionTypeVerify() {

    (this.$refs['form'] as HTMLFormElement).validateField('targetCatgDepartment', (valid: boolean) => {

      if (this.formData.targetCatgDepartment.length === 0) {

        return false;

      } else {

        return true;

      }

    });

  }

 

剩下的未提及的詳見官方文檔：https://element.eleme.cn/#/zh-CN/component/form