ElementUI 验证、elementui自定义验证规则
在使用ElementUI进行表单开发时，我们常常需要对用户输入的数据进行验证以确保数据的准确性。ElementUI内置了一些常用的验证规则，但有时候我们需要根据业务需求自定义验证规则。下面将介绍如何实现。
解决方案
ElementUI提供了rules属性用于设置表单项的验证规则，对于自定义验证规则，我们可以通过编写一个函数作为规则项中的validator，这个函数接收三个参数：rule(当前规则)、value(当前值)和callback(回调函数)，在函数中可以编写自己的逻辑，当验证通过时调用callback()，否则调用callback(new Error('错误信息'))。
思路一：简单自定义规则
假设我们要验证一个手机号码是否合法。在表单组件中给对应字段设置rules。
html
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<el-form-item label="手机号" prop="phone">
<el-input v-model="ruleForm.phone"></el-input>
</el-form-item>
</el-form>
javascript
data() {
return {
ruleForm: {
phone: ''
},
rules: {
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (!/^1[3456789]d{9}$/.test(value)) {
callback(new Error('手机号格式不正确'));
} else {
callback();
}
},
trigger: 'blur'
}
]
}
};
}
思路二：基于其他字段的验证
有时一个字段的验证要依赖于其他字段。例如密码和确认密码必须相同。这里我们在rules里为确认密码添加验证规则。
html
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="ruleForm.password"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPassword">
<el-input type="password" v-model="ruleForm.checkPassword"></el-input>
</el-form-item>
javascript
data() {
const validatePass = (rule, value, callback) => {
if (value !== this.ruleForm.password) {
callback(new Error('两次输入密码不一致'));
} else {
callback();
}
};
return {
ruleForm: {
password: '',
checkPassword: ''
},
rules: {
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
checkPassword: [
{ required: true, message: '请再次输入密码', trigger: 'blur' },
{ validator: validatePass, trigger: 'blur' }
]
}
};
}
思路三：异步验证
对于一些需要向服务器请求来验证的情况，我们可以使用异步验证。比如验证用户名是否已存在。
html
<el-form-item label="用户名" prop="username">
<el-input v-model="ruleForm.username"></el-input>
</el-form-item>
javascript
data() {
const validateUsername = (rule, value, callback) => {
// 模拟异步请求
setTimeout(() => {
if (value === 'admin') {
callback(new Error('该用户名已被注册'));
} else {
callback();
}
}, 1000);
};
return {
ruleForm: {
username: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ validator: validateUsername, trigger: 'blur' }
]
}
};
}
以上就是关于ElementUI验证以及自定义验证规则的一些方法，希望对你有所帮助。
