element-plus@2.0.6 及之后的版本，表單驗(yàn)證不再是同步執(zhí)行的了

另外，element-plus@2.1.4 及之后的版本，才可按照官方文檔示例正常使用（使用的是兩者的中間版本的話，最好先自行確認(rèn)下正確的

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!') // 位置1
    } else {
      console.log('error submit!', fields)
    }
  })
  // 位置2
}

上例中：

如果在“位置1”執(zhí)行表單驗(yàn)證通過(guò)后的業(yè)務(wù)代碼，可以去掉 async...await

如果在“位置2”執(zhí)行，則需加上。否則，會(huì)直接跳過(guò)驗(yàn)證

這樣，與異步校驗(yàn)（三、6）的使用辦法就一致了，兩者可以取其一。element-plus@2.1.4及之后的推薦統(tǒng)一使用上例中的寫(xiě)法

---

表單定義規(guī)則

//表單驗(yàn)證規(guī)則 
const rules = reactive({
  name: [{ validator: checkName, trigger: ['blur', 'change'],required: true}],
  phone: [{ type: number, validator: checkPhone, trigger: ['blur', 'change'] }],
  password: [{ validator: checkpassword, trigger: ['blur'] }],
})

el-form配置

<el-form :model="formData" :rules="rules" ref="baseForm"></el-form>

上一步已經(jīng)為表單綁定了規(guī)則列表formData，接下來(lái)，只需要在form-item中使用prop綁定驗(yàn)證規(guī)則即可

<el-form-item label="電話" style="width: 40%" prop="phone">
   <el-input v-model="formData.phone" type="text" autocomplete="off" disabled />
</el-form-item>

對(duì)應(yīng)關(guān)系:

表單對(duì)象 formData: { name: '' }

表單元素 prop="name"

規(guī)則列表 rules: { name: [{...}] }

另外，驗(yàn)證嵌套屬性可以通過(guò) . 連接綁定：

formData: { obj: { name: '' } }

prop="obj.name"

baseRules: { 'obj.name': [{...}] }

完整demo

<template>
    <el-form :model="formData" :rules="rules" ref="ruleFormRef" status-icon label-width="120px" size="large">
        <el-form-item label="姓名" style="width: 40%" prop="name">
          <el-input v-model="form.name" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性別" style="width: 40%" prop="sex">
          <el-select v-model="form.sex" placeholder="請(qǐng)選擇性別">
            <el-option label="男" :value=1 />
            <el-option label="女" :value=0 />
          </el-select>
        </el-form-item>
        <el-form-item label="生日" style="width: 40%" prop="birthday">
          <!-- <el-input v-model="form.birthday" type="text" autocomplete="off" /> -->
          <el-date-picker v-model="form.birthday" type="date" placeholder="請(qǐng)選擇生日!" style="width: 100%"
            value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="電話" style="width: 40%" prop="phone">
          <el-input v-model="form.phone" type="text" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="密碼" style="width: 40%" prop="password">
          <el-input v-model="form.password" type="password" autocomplete="off" show-password />
        </el-form-item>
      </el-form>
</template>

<script setup>
let formData = reactive({
  birthday: '',
  name: '',
  phone: '',
  sex: 1,
  password: ''
})
// 驗(yàn)證函數(shù)
const checkPhone = (rule, value, callback) => {
  console.log(value);
  if (!Number.isInteger(Number(value))) {
    return callback(new Error('請(qǐng)輸入數(shù)字！'))
  } else if (String(value).length != 11) {
    return callback(new Error('您輸入的手機(jī)位數(shù)不是11位！'))
  } else {
    callback()
  }
}
// 驗(yàn)證函數(shù)
const checkpassword = (rule, value, callback) => {
  console.log(value);
  if (String(value).length > 12) {
    return callback(new Error('您輸入的密碼過(guò)長(zhǎng)！長(zhǎng)度不超過(guò)12位'))
  } else {
    callback()
  }
}
// 驗(yàn)證函數(shù)
const checkName = (rule, value, callback) => {
  if (value.length > 8) {
    return callback(new Error('您輸入的姓名過(guò)長(zhǎng)！'))
  } else {
    callback()
  }
}
//表單驗(yàn)證規(guī)則 
const rules = reactive({
  name: [{ validator: checkName, trigger: ['blur', 'change'] }],
  phone: [{ type: number, validator: checkPhone, trigger: ['blur', 'change'] }],
  password: [{ validator: checkpassword, trigger: ['blur'] }],
})

</script>

配置項(xiàng)以及其可選的值（詳細(xì)文檔鏈接）

Rules API:

1. type: 指示要使用的驗(yàn)證器類型

type: string, number, boolean, method, regexp, integer, float, array, object, enum, date, url, hex, email, any

2. Required

required:必填/非必填

3. Messages

message: 錯(cuò)誤提示

4. Pattern

pattern: 值需校驗(yàn)通過(guò)的正則表達(dá)式

5. Range

min, max: type為array, string時(shí)，指長(zhǎng)度。為number時(shí)，指大小

6. Length

len: type為array, string時(shí)，指長(zhǎng)度。為number時(shí)，指值

7. Enumerable

enum: 例：{ type: 'enum', enum: ['admin', 'user', 'guest'] }

8. Whitespace

9. Deep Rules 對(duì)象的深層規(guī)則

fields: 對(duì)象的屬性名，數(shù)組的下標(biāo)

defaultField: 應(yīng)用于對(duì)象、數(shù)組內(nèi)的所有成員

10. Transform

transform: 方法，對(duì)值的預(yù)處理

11. validator

validator: 自定義驗(yàn)證方法

12. asyncValidator

asyncValidator: 自定義異步驗(yàn)證方法

trigger: 觸發(fā)驗(yàn)證的方法，值可用字符串’blur’, ‘change’，也可是數(shù)組[‘blur’, ‘change’]

注意，規(guī)則數(shù)組是按序逐一被執(zhí)行驗(yàn)證的（trigger='blur’時(shí)，更改input框的值不會(huì)觸發(fā)驗(yàn)證）

進(jìn)階

1、單項(xiàng)驗(yàn)證

可在表單的項(xiàng) ( < el-form-item > ) 中單獨(dú)設(shè)置驗(yàn)證規(guī)則

<el-form-item label="郵箱：" prop="email"
  :rules="[{ type: 'email', message: '郵箱格式錯(cuò)誤', trigger: 'change' }]"
></el-form-item>

簡(jiǎn)寫(xiě)：

<el-form-item label="姓名：" prop="username" required />

對(duì)于字符串的非空校驗(yàn)，element plus表單驗(yàn)證提供了一種簡(jiǎn)單的方式（能實(shí)現(xiàn)校驗(yàn)，但有很大局限性，而且提示語(yǔ)是英文）

---

為了代碼的可維護(hù)性與美觀，盡量不要將規(guī)則寫(xiě)在模板中。但某些情況下必須如此，比如，當(dāng)需要額外傳遞參數(shù)給validator時(shí)：

<el-form-item label="樣本類型：" prop="sampType"
    :rules="[{ validator: (rule, value, cb) => validateSampType(rule, value, cb, yourParams), trigger: 'change' }]"
></el-form-item>

正則校驗(yàn)

//regex.js
// 手機(jī)號(hào)或座機(jī)號(hào)
export const reg_tel_phone = /(^((\+86)|(86))?(1[3-9])\d{9}$)|(^(0\d{2,3})-?(\d{7,8})$)/

//doctor.vue
import { reg_tel_phone } from '@/assets/regex'
rules: {
  name: [{ required: true, message: '請(qǐng)輸入醫(yī)生名稱', trigger: 'blur' }],
  title: [{ required: true, message: '請(qǐng)選擇職稱', trigger: 'change' }],
  tel: [{ pattern: reg_tel_phone, message: '請(qǐng)輸入正確的手機(jī)號(hào)或座機(jī)號(hào)', trigger: ['blur', 'change'] }]
},

注意：直接在vue模板中進(jìn)行單項(xiàng)驗(yàn)證使用正則校驗(yàn)時(shí)，需將RegExp定義成響應(yīng)式變量。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-755710.html