1.问题描述
项目开发过程中，遇到表单校验，这次的校验规则比较严，element-ui表单自带的校验完全解决不了问题。
2.解决方法
使用elementui表单校验中的自定义校验，validUsername是自定义的校验方法名称
2.1 定义表单校验：
rules: {
userTypeId: [
{ required: true, message: '请选择类型', trigger: 'change' }
],
username: [
{ required: true, validator: validUsername, trigger: 'blur' }
]
}
2.2 自定义校验方法：
注意：方法中一定义要返回callback()，不然表单校验时是不会成功的
export default {
name: 'Registry',
data() {
// js部分
const validUsername = (rule, value, callback) => {
const reg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,18}$/
if (value === '') {
callback(new Error('请输入用户名'))
} else if (!reg.test(value)) {
callback(new Error('用户名必须是由6-18位英文(含大小写)+数字组成'))
} else {
callback()
}
}
3.表单校验文章来源：https://www.toymoban.com/news/detail-507655.html
this.$refs.ruleForm.validate((valid) => {
if(valid){
console.log('表单校验成功')
}
})
4.清除表单校验结果
取消按钮可能使用到文章来源地址https://www.toymoban.com/news/detail-507655.html
this.$refs.pwdChangeForm.clearValidate()
到了这里，关于element-ui表单自定义校验的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
