下面我将详细讲解关于element-ui中form验证的攻略。
在前后端分离的开发中,前端对数据的验证尤为重要。element-ui提供了许多常用的表单验证功能,本文将详解其使用方法。
本次验证需求如下:
在element-ui中,通过给el-form-item
组件添加prop
属性,即可将该表单项加入校验规则队列中。接下来,我们需要使用el-form
组件的rules
属性来声明具体的校验规则。
以下是代码示例:
<el-form ref="myform" :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-item label="确认密码" prop="confirm">
<el-input type="password" v-model="form.confirm"></el-input>
</el-form-item>
<el-button @click="handleSubmit">提交</el-button>
</el-form>
<script>
export default {
data() {
return {
form: {
username: '',
password: '',
confirm: '',
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 20, message: '长度在3到20个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 18, message: '长度在6到18个字符', trigger: 'blur' }
],
confirm: [
{ 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();
}
},
// 提交表单
handleSubmit() {
this.$refs.myform.validate(valid => {
if (valid) {
this.$message.success('验证通过,提交成功!');
} else {
this.$message.error('表单验证失败,请检查输入是否正确!');
}
});
},
},
};
</script>
有时候,我们需要自定义校验规则。这时,可以使用el-form
中的规则验证器,示例如下:
<el-form ref="form" :model="formData" :rules="rules">
<el-form-item label="测试1" prop="test1">
<el-input v-model="formData.test1"></el-input>
</el-form-item>
<el-form-item label="测试2" prop="test2">
<el-input v-model="formData.test2"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="validateForm">提交</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
formData: {
test1: '',
test2: '',
},
rules: {
test1: [
{ required: true, message: '请输入测试1', trigger: 'blur' },
],
test2: [
{ validator: this.validateTest2, trigger: 'blur' },
]
},
};
},
methods: {
// 自定义校验规则函数
validateTest2(rule, value, callback) {
if (value === '') {
callback(new Error('测试2不能为空'));
} else {
callback();
}
},
// 提交表单
validateForm() {
this.$refs.form.validate((valid) => {
if (valid) {
this.$message.success('表单验证通过!');
} else {
this.$message.error('表单验证失败,请检查输入是否正确!');
}
});
},
},
};
</script>
本文详细讲解了如何使用element-ui进行表单验证,包括使用内置的校验规则和自定义校验规则。希望读者能够从中受益,更好地开发自己的网站。
本文链接:http://task.lmcjl.com/news/9296.html