ElementUI 实现动态表单数据校验（已解决）

**ElementUI 实现动态表单数据校验**

在实际的开发过程中，我们经常会遇到需要实现动态表单数据校验的需求。例如，一个用户注册表单可能需要验证用户名、密码、确认密码等字段，而这些验证规则可能会根据不同的场景而改变。在 ElementUI 中，我们可以使用 Form 和 Rule 的组合来实现动态表单数据校验。

**Form 组件**

首先，我们需要在页面中引入 Form 组件：

html<template>
 <div>
 <el-form ref="form" :model="form" label-width="120px">
 <!-- 表单内容 -->
 </el-form>
 </div>
</template>

<script>
export default {
 data() {
 return {
 form: {}
 }
 },
 methods: {
 // 表单提交事件 submitForm(formName) {
 this.$refs[formName].validate((valid) => {
 if (valid) {
 console.log('submit!')
 } else {
 console.log('error submit!!')
 return false;
 }
 })
 },
 }
}
</script>

javascriptexport default {
 data() {
 return {
 rules: {}
 }
 },
 methods: {
 // 验证用户名 validateUsername(rule, value, callback) {
 if (value === '') {
 callback(new Error('请输入用户名'));
 } else if (!/^[a-zA-Z0-9]{3,12}$/.test(value)) {
 callback(new Error('用户名必须是3 到12 位的字母或数字'));
 } else {
 callback();
 }
 },
 // 验证密码 validatePassword(rule, value, callback) {
 if (value === '') {
 callback(new Error('请输入密码'));
 } else if (!/^[a-zA-Z0-9]{6,18}$/.test(value)) {
 callback(new Error('密码必须是6 到18 位的字母或数字'));
 } else {
 callback();
 }
 },
 // 验证确认密码 validateConfirmPassword(rule, value, callback) {
 if (value === '') {
 callback(new Error('请输入确认密码'));
 } else if (value !== this.form.password) {
 callback(new Error('两次输入的密码不一致'));
 } else {
 callback();
 }
 },
 }
}

html<template>
 <div>
 <el-form ref="form" :model="form" label-width="120px">
 <!-- 表单内容 -->
 <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 type="password" v-model="form.password"></el-input>
 </el-form-item>
 <el-form-item label="确认密码" prop="confirmPassword">
 <el-input type="password" v-model="form.confirmPassword"></el-input>
 </el-form-item>
 </el-form>
 </div>
</template>

<script>
export default {
 data() {
 return {
 form: {
 username: '',
 password: '',
 confirmPassword: ''
 }
 }
 },
 methods: {
 // 表单提交事件 submitForm(formName) {
 this.$refs[formName].validate((valid) => {
 if (valid) {
 console.log('submit!')
 } else {
 console.log('error submit!!')
 return false;
 }
 })
 },
 },
 mounted() {
 // 动态添加 Rule 的验证规则 this.$refs.form.rules = {
 username: [
 { required: true, trigger: 'blur', validator: this.validateUsername }
 ],
 password: [
 { required: true, trigger: 'blur', validator: this.validatePassword }
 ],
 confirmPassword: [
 { required: true, trigger: 'blur', validator: this.validateConfirmPassword }
 ]
 };
 }
}
</script>