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>