最近在项目中有一个需求,左侧是下拉框,右侧是输入框。要求选择左侧某一项的时候右侧的不需要填写,其余的选项必须要填写,此时就需要用到validator自定义验证规则
话不多说直接上代码
此处是teplate片段,data数据在下方
<template>
<div>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
:inline="true"
>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="上海" value="shanghai"></el-option>
<el-option label="北京" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动名称" prop="name">
<el-input
:placeholder="ruleForm.region === 'shanghai' ? '可不填' : ''"
v-model.number="ruleForm.name"
:disabled="ruleForm.region === 'shanghai'"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
>立即创建</el-button
>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
这里是data,data中的代码比较重要,核心思路在自定义验证规则里,总共是有三种情况,1用户选的是必填项并且又没有输入值,2用户输入值了需要验证是不是数字,3值不存在并且又不是必填项那么直接放行即可(备注,因为我给输入框动态设置了disabled,所以不是必填项就禁用了)
data() {
let blurText = (rule, value, callback) => {
//val不存在并且是必填项,则提示错误
if (!value && this.ruleForm.region != "shanghai") {
callback(new Error("请输入整数的生效时间"));
} else if (value) {
//value存在,那么需要验证是否是数字
const boolean = new RegExp("^[1-9][0-9]*$").test(value); // console.log(boolean)
if (!boolean) {
this.$message.warning("请输入正整数");
this.ruleForm.name = "";
} else {
callback();
}
} else {
//value不存在并且不是必填项,则不提示错误
callback();
}
};
return {
ruleForm: {
name: "",
region: "",
},
rules: {
name: [
// { message: "请输入活动名称", trigger: "blur" },
{
validator: blurText,
trigger: "blur",
},
],
region: [
{ required: true, message: "请选择活动区域", trigger: "change" },
],
},
};
按钮绑定的回调函数,这个没什么要求
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert("成功");
console.log(valid);
} else {
// console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
},