Element-UI表单验证 二选一、三选一、多选一验证

Element-UI表单验证二选一验证

在表单提交过程中很多时候要用到几个表单项二选一验证或多选一验证,比如联系方式中的手机号和固定电话只需要填写一项就可通过验证,针对这样情况可以使用Element-UI的自定义验证实现,具体实现方法如下。

HTML代码

javascript 复制代码
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="form">
	<el-row :xs="24" style="width:96%">
		<el-col :span="8">
            <el-form-item label="简单:" prop="singleChoiceEasy" >
                <el-input v-model.number="ruleForm.singleChoiceEasy" placeholder="题量" @input="clearRule('singleChoiceDifficulty','singleChoiceMedium')"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item label="中等:" prop="singleChoiceMedium">
                <el-input v-model.number="ruleForm.singleChoiceMedium" placeholder="题量" @input="clearRule('singleChoiceDifficulty','singleChoiceEasy')"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item label="困难:" prop="singleChoiceDifficulty">
                <el-input v-model.number="ruleForm.singleChoiceDifficulty" placeholder="题量" @input="clearRule('singleChoiceEasy','singleChoiceMedium')"></el-input>
            </el-form-item>
        </el-col>
	</el-row>
</el-form>
javascript 复制代码
data() {
	var validateNum= (rule, value, callback) => {
        if (!this.ruleForm.singleChoiceEasy && !this.ruleForm.singleChoiceMedium && !this.ruleForm.singleChoiceDifficulty) {
            callback(new Error('请至少填写一项'));
        } else {
            callback();
        }
    };
    return {
		ruleForm: {},
		rules: {
			singleChoiceEasy: [
                { required: true,  validator: validateNum, trigger: 'blur' },
                { type: 'number', message: '必须为正整数', trigger: 'blur'}
            ],
            singleChoiceMedium: [
                { required: true,  validator: validateNum, trigger: 'blur' },
                { type: 'number', message: '必须为正整数', trigger: 'blur'}
            ],
            singleChoiceDifficulty: [
                { required: true,  validator: validateNum, trigger: 'blur' },
                { type: 'number', message: '必须为正整数', trigger: 'blur'}
            ]
		}
	}
},
methods: {
	clearRule(obj,obj1) {
//接收参数 表单prop
        this.$refs.ruleForm.clearValidate(obj);
        this.$refs.ruleForm.clearValidate(obj1);
    }
//另一种方式 表单@input 给他 
clearRule() {

        this.$refs.ruleForm.clearValidate();
        this.$refs.ruleForm.validateField(["singleChoiceEasy","singleChoiceMedium","singleChoiceDifficulty"]);
    }
}
相关推荐
cooldream20096 小时前
深入理解MVP架构:让UI层与业务逻辑完美分离的设计模式
ui·设计模式·架构·系统架构师
拖孩6 小时前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
sky_smile_Allen11 小时前
[Unity]-[UI]-[Prefab] 关于Unity UGUI 的布局及组件讲解
ui·unity·游戏引擎
Python_金钱豹13 小时前
Text2SQL零代码实战!RAGFlow 实现自然语言转 SQL 的终极指南
前端·数据库·sql·安全·ui·langchain·机器人
Quz1 天前
使用Qt Quick Controls创建自定义日历组件
qt·ui·交互
just小千2 天前
重学React(一):描述UI
前端·react.js·ui
招风的黑耳2 天前
Axure中继器表格:实现复杂交互设计的利器
ui·表格
招风的黑耳3 天前
Axure按钮设计分享:打造高效交互体验的六大按钮类型
ui·按钮·动态按钮·按钮设计
Aotman_3 天前
VUE Element-ui Message 消息提示组件自定义封装
前端·javascript·vue.js·ui·elementui·es6