VUE+ElementUI的表单el-from表单验证二选一必填项,并且满足条件后会清除表单验证提示。
效果图:使用Element-UI的自定义验证实现。这里面有个坑是,两个input输入框都点出了提示信息,填写任一输入框之后只有操作的那一项的验证提示消失了,不主动清除另一项的验证提示就会一直存在,观感很不好。如图:所以,在验证成功后要强制清除另一方的验证提示。本来应该分别清除的,我这里懒得写那么长了干脆一起清掉哈哈哈。现在,填入其中一项效果如图:HTML:<el-formref="form"
·
效果图:
使用Element-UI的自定义验证实现。
这里面有个坑是,两个input输入框都点出了提示信息,填写任一输入框之后只有操作的那一项的验证提示消失了,不主动清除另一项的验证提示就会一直存在,观感很不好。如图:
所以,在验证成功后要强制清除另一方的验证提示。本来应该分别清除的,我这里懒得写那么长了干脆一起清掉哈哈哈。
PS:本来应该用this.$nextTick(() =>{}在更新数据后立即调用的,但是不知道为啥我这用这个反而说没有clearValidate()这个方法。虽然没用上,但是下面的代码段还是保留了,看到这篇文章的UU都可以试试。
现在,填入其中一项效果如图:
HTML:
<el-form
ref="form"
class="forminfo"
:model="form"
label-width="20%"
:rules="rules"
>
<el-form-item
ref="zhname"
label="客户中文名称"
prop="product_name_zh"
>
<el-input
v-model="form.product_name_zh"
style="width: 250px"
placeholder="中文名称和英文名称至少填写一项"
/>
</el-form-item>
<el-form-item
ref="enname"
label="客户英文名称"
prop="product_name_en"
>
<el-input
v-model="form.product_name_en"
style="width: 250px"
placeholder="中文名称和英文名称至少填写一项"
/>
</el-form-item>
</el-form>
JS:
export default {
data() {
var validateName = (rule, value, callback) => {
if (!this.form.product_name_zh && !this.form.product_name_en) {
callback(new Error("请至少填写一项"))
} else {
//任意值被填写,清除验证提示
if (!this.form.product_name_zh || !this.form.product_name_en) {
// this.$nextTick(() => {
// this.$refs.zhname.clearValidate()
// })
this.$refs.zhname.clearValidate()
this.$refs.enname.clearValidate()
}
callback()
}
}
return {
rules: {
product_name_zh: [
{
required: true,
validator: validateName,
trigger: "change",
},
],
product_name_en: [
{
required: true,
validator: validateName,
trigger: "change",
},
],
},
}
},
更多推荐
已为社区贡献7条内容
所有评论(0)