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"]);
    }
}
相关推荐
jh_cao16 小时前
(1)SwiftUI 的哲学:声明式 UI vs 命令式 UI
ui·swiftui·命令模式
心疼你的一切1 天前
使用Unity引擎开发Rokid主机应用的模型交互操作
游戏·ui·unity·c#·游戏引擎·交互
我的xiaodoujiao1 天前
从 0 到 1 搭建 Python 语言 Web UI自动化测试学习系列 9--基础知识 5--常用函数 3
前端·python·测试工具·ui
Larry_Yanan2 天前
QML学习笔记(二十四)QML的Keys附加属性
c++·笔记·qt·学习·ui
我命由我123452 天前
Photoshop - Photoshop 工具栏(5)多边套索工具
笔记·学习·ui·职场和发展·photoshop·ps·美工
西西学代码2 天前
安卓开发---耳机的按键设置的UI实例
android·ui
大熊猫侯佩3 天前
浪浪山 iOS 奇遇记:给 APP 裹上 Liquid Glass “琉璃罩”(下集)
ui·界面设计·ios 26·液态玻璃·liquid glass·glass effect·glass container
不老刘3 天前
Base UI:一款极简主义的「无样式」组件库
前端·ui
hqwest3 天前
QT肝8天16--加载动态菜单
开发语言·数据库·qt·ui·sqlite
兰亭妙微3 天前
[特殊字符]灵感补给站 | pinterest 设计灵感分享 UI版面设计3
ui·审美积累·桌面端界面设计·ui设计公司