for表单自定义validator 验证未生效

页面存在两个表单 对其中的一个表单进行校验 结果自定义的validator 验证未生效，想知道如何解决

ruleseditPassword: {
newPassword: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ pattern: /^[a-z0-9_-]{3,15}$/, message: '密码为数字，小写字母，大写字母，长度为 3 - 15位' }
],
surePassword: [
{ validator: validatePass2, trigger: 'blur' }
]
}

var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'))
} else if (value !== this.loginPassword.newPassword) {
callback(new Error('两次输入密码不一致!'))
} else {
callback()
}
}

<el-form
ref="loginform"
v-loading="loading"
:model="loginPassword"
:rules="ruleseditPassword"
label-width="120px"
:inline="true"
class="form-inline"
label-position="right"
>

this.$refs.['loginform'].rules的打印结果

回答

surePassword: [
  { validator: validatePass2, trigger: 'blur' }
]

能打印出，说明校验函数绑定没错，是校验函数内部问题，尝试将
(value === '') 改为(!value)
value在从未输入时，或resetFields后，值为undefined

required表示必填项，你自定义验证的话，不需要required，所有的验证规则都写在validator函数里面，你看看官网是怎么做的：
https://element.eleme.cn/#/zh-CN/component/form

我上面说的required在自定义验证的时候，还是可以加的，会多一个红色的星号，表示必填项。

再检查下你表单里面prop、v-model是否绑定正确了(你有两个表单，字段有没有冲突)

<el-form-item label="密码" prop="newPassword">
            <el-input type="password" v-model="loginPassword.newPassword" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="surePassword">
            <el-input type="password" v-model="loginPassword.surePassword" autocomplete="off"></el-input>
</el-form-item>

image prop 有写么

以上是 for表单自定义validator 验证未生效 的全部内容， 来源链接： utcz.com/a/39606.html

回到顶部