1. 前言
VUE作为一款流行的前端框架，其灵活性和简易使用非常有吸引力。而在实际项目中，我们经常需要对表单进行复杂的校验逻辑，在这时我们可以使用VUE和Element-UI的组合来完成表单的复杂校验逻辑。本文将介绍如何使用VUE和Element-UI完成表单的复杂校验逻辑，总结一些细节和注意点，帮助大家快速实现。
2. Element-UI的Form表单
在VUE中，我们可以使用Element-UI组件库中的Form表单来构建表单。在使用Form组件的时候，需要注意以下几点：
2.1 Form表单的基本用法
在一个表单中，要使用Form组件作为根组件，并在里面包含多个x-form-item组件，每个x-form-item组件代表一个表单项。
<template>
<el-formref="form" :model="form" :rules="rules">
<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>
</template>
如上代码所示，我们使用el-form作为根组件，并在里面使用el-form-item组件包含表单项。其中prop属性是表单校验的关键。如果需要校验，我们需要对每个表单项设置prop属性，并在el-form的rules属性中设置校验规则和错误提示。
2.2 Form表单的校验规则
在使用Element-UI的表单校验规则时，一般可以分为以下几个步骤：
2.2.1 定义表单规则
首先，在data中定义表单数据和规则：
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
]
}
}
}
}
</script>
以上我们定义了form对象，并在里面包含了username和password两个属性。同时为这两个属性定义了必填、长度等规则。
2.2.2 校验表单
在提交表单时，我们需要校验表单。可以通过以下代码实现：
<script>
export default {
methods: {
submit() {
this.$refs.form.validate((valid) => {
if (valid) {
console.log('验证通过');
} else {
console.log('验证失败');
return false;
}
})
}
}
}
</script>
在submit方法中，我们通过this.$refs.form.validate()方法，对整个表单进行校验。如果校验通过，输出“验证通过”，反之输出“验证失败”。
3. Vue和Element-UI实现复杂表单校验逻辑
3.1 密码确认校验
在密码输入表单项中再次添加一项确认密码的输入表单，需要进行密码一致性校验，实现如下：
<template>
<el-formref="form" :model="form" :rules="rules">
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"><el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPassword">
<el-input type="password" v-model="form.checkPassword"><el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
password: '',
checkPassword: ''
},
rules: {
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
],
checkPassword: [
{ required: true, message: '请再次输入密码', trigger: 'blur' },
{ validator: this.checkPassword, trigger: 'blur' }
]
}
}
},
methods: {
checkPassword(rule, value, callback) {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.form.password) {
callback(new Error('两次密码输入不一致!'));
} else {
callback();
}
}
}
}
</script>
在以上代码中，我们在校验规则中对“确认密码”添加了一个自定义的validator。在方法中通过判断两次密码是否一致来判断校验是否通过。
3.2 手机号和邮箱的互斥校验
有一些情况下，一个用户在注册时，需要输入手机号或者邮箱，而手机号和邮箱应该是互斥的。
现在我们在form对象中添加一个标志位phoneCheck和emailCheck，记录手机号和邮箱是否开启了输入校验，使用一个x-switch组件，如果开启校验，则需要校验表单项。
<template>
<el-formref="form" :model="form" :rules="rules">
<el-form-item label="手机号码" prop="phone" v-if="form.phoneCheck">
<el-input v-model="form.phone"><el-input>
</el-form-item>
<el-form-item label="电子邮箱" prop="email" v-if="form.emailCheck">
<el-input v-model="form.email"><el-input>
</el-form-item>
<el-form-item label="是否开启手机校验">
<el-switch v-model="form.phoneCheck"></el-switch>
</el-form-item>
<el-form-item label="是否开启邮箱校验">
<el-switch v-model="form.emailCheck"></el-switch>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
phone: '',
phoneCheck: false,
email: '',
emailCheck: false
},
rules: {}
}
},
watch: {
'form.phoneCheck'(val) {
this.$set(this.rules, 'phone', [
{ required: true, message: '请输入手机号码', trigger: 'blur', ...val && { validator: this.checkPhone } }
]);
},
'form.emailCheck'(val) {
this.$set(this.rules, 'email', [
{ required: true, message: '请输入电子邮箱', trigger: 'blur', ...val && { validator: this.checkEmail } }
]);
}
},
methods: {
checkPhone(rule, value, callback) {
if (!(/^1[3456789]\d{9}$/.test(value))) {
callback(new Error('手机号码格式不正确'));
} else {
callback();
}
},
checkEmail(rule, value, callback) {
if (!(/^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/.test(value))) {
callback(new Error('电子邮箱格式不正确'));
} else {
callback();
}
}
}
}
</script>
在以上代码中，我们使用了watch监听器来动态的修改rules。通过$set设置表单校验规则。其中，之所以要使用$set方法来添加rules属性，是因为rules在初始化时为空对象，需要使用该方法将它添加到表单数据对象中。
我们使用了...val && {}语法来动态的给校验规则添加validator。其中...val语法是ES6的扩展语法。当val为true时，validator才会被添加到校验规则中。
4. 总结
本文主要介绍了如何使用VUE和Element-UI实现对表单的复杂校验逻辑。对于表单校验的内容和规则，应由前后端协商完成。同时，我们也描述了一些常见的表单校验场景和细节。希望读者可以掌握VUE和Element-UI的表单组件使用方法，并能够熟练的开发出合格的前端应用程序。