ElementUI 是一套基于 Vue.js 的組件庫，提供了豐富的表單組件和驗證功能。其表單驗證通過 el-form 組件結合 rules 規則實現，支持同步和異步驗證。

基本表單驗證實現

在 ElementUI 中，表單驗證需要配置 el-form 的 rules 屬性，并為每個 el-form-item 指定 prop 屬性以關聯驗證規則。

<template><el-form :model="form" :rules="rules" ref="formRef"><el-form-item label="用戶名" prop="username"><el-input v-model="form.username"></el-input></el-form-item><el-form-item label="密碼" prop="password"><el-input v-model="form.password" type="password"></el-input></el-form-item><el-form-item label="手機號" prop="mobile"><el-input v-model="form.mobile" ></el-input></el-form-item><el-form-item label="身份證" prop="identityCard"><el-input v-model="form.identityCard" ></el-input></el-form-item><el-form-item label="車牌號" prop="carId"><el-input v-model="form.carId" ></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm">提交</el-button></el-form-item></el-form>
</template><script>
export default {data() {return {form: {username: '',password: ''},rules: {username: [{ required: true, message: '請輸入用戶名', trigger: 'blur' },{ min: 3, max: 10, message: '長度在 3 到 10 個字符', trigger: 'blur' },{ pattern: /^[\u4E00-\u9FA5]+$/,  message: '用戶名只能為中文'}],password: [{ required: true, message: '請輸入密碼', trigger: 'blur' },{ pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/, message: '密碼必須包含字母和數字，且至少8位', trigger: 'blur' },{ pattern: /^(\w){6,20}$/, message: '只能輸入6-20個字母、數字、下劃線'},{pattern: /[a-z]\w{3,7}/,message: '必須是4-8位的數字英文下畫線,以字母開頭'},],mobile:[{ required: true, message: '請輸入手機號碼', trigger: 'blur' },{validator:function(rule,value,callback){if(/^1[34578]\d{9}$/.test(value) == false){callback(new Error("請輸入正確的手機號"));}else{callback();}}, trigger: 'blur'}],//   pattern: /^1[34578]\d{9}$/, message: '目前只支持中國大陸的手機號碼' }identityCard:[{ required: true, message: '請輸入身份證ID', trigger: 'blur'},{ pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '你的身份證格式不正確' }],carId:[{required: true, message: '請輸入車牌號', trigger: 'blur'}, {pattern:/(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[掛學警軍港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9掛學警軍港澳]{1}$)/, message: '常規格式：晉B12345'},],}}},methods: {submitForm() {this.$refs.formRef.validate(valid => {if (valid) {alert('表單驗證通過')} else {return false}})}}
}
</script>

自定義驗證規則

可以通過自定義驗證函數實現更復雜的驗證邏輯。驗證函數需要返回 callback 或 Promise。

data() {const validateAge = (rule, value, callback) => {if (!value) {return callback(new Error('年齡不能為空'))}setTimeout(() => {if (!Number.isInteger(+value)) {callback(new Error('請輸入數字值'))} else {if (value < 18) {callback(new Error('必須年滿18歲'))} else {callback()}}}, 1000)}return {rules: {age: [{ validator: validateAge, trigger: 'blur' }]}}
}

表單重置和清除驗證

ElementUI 提供了表單重置和清除驗證狀態的方法。

methods: {resetForm() {this.$refs.formRef.resetFields()},clearValidate() {this.$refs.formRef.clearValidate()}
}

動態表單驗證

對于動態增減的表單項，需要特別注意驗證規則的更新。ElementUI 支持動態添加和移除驗證規則。

methods: {addItem() {this.form.items.push({ value: '' })this.rules.items.push({ value: [{ required: true, message: '請輸入值', trigger: 'blur' }]})}
}

異步驗證

某些場景需要異步驗證，如檢查用戶名是否已存在。可以通過返回 Promise 實現異步驗證。

data() {const checkUsername = (rule, value, callback) => {return new Promise((resolve, reject) => {if (!value) {return reject(new Error('請輸入用戶名'))}setTimeout(() => {if (value === 'admin') {reject(new Error('用戶名已存在'))} else {resolve()}}, 1000)})}return {rules: {username: [{ validator: checkUsername, trigger: 'blur' }]}}
}

表單驗證事件

ElementUI 表單提供多種驗證事件，可以監聽表單和表單項的驗證狀態變化。

<el-form @validate="onValidate"@submit.native.prevent><el-form-item @change="onFieldChange"></el-form-item>
</el-form>

驗證規則參數詳解

ElementUI 驗證規則支持多種配置參數：

• required: 是否為必填項
• message: 驗證失敗時的提示信息
• trigger: 觸發驗證的事件，如 blur 或 change
• validator: 自定義驗證函數
• pattern: 正則表達式驗證
• min/max: 最小/最大長度或值

rules: {email: [{ type: 'email', message: '請輸入正確的郵箱地址', trigger: ['blur', 'change'] }],phone: [{ pattern: /^1[3-9]\d{9}$/, message: '請輸入正確的手機號', trigger: 'blur' }]
}

限制表單輸入類型

正整數

<el-input v-model="params.insAmt" maxlength="10" oninput="value=value.replace(/\D/g, '')"><template slot="append">萬元</template></el-input>

大于零的數

 <el-input v-model="params.intendedPrice" maxlength="10"oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,4})?.*$/,'$1')"></el-input>