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"]);
    }
}
相关推荐
weixin_4093831220 小时前
cocos 用widget将ui组件固定在屏 随着分辨率自适应 编辑器界面canvas作为手机屏参考 将ui组件放进去 deepseek解答
ui·cocos
Hi202402171 天前
Qt+Qml客户端和Python服务端的网络通信原型
开发语言·python·qt·ui·网络通信·qml
紫薯馍馍2 天前
Adobe Photoshop 2025(Ps2025)下载安装教程
ui·adobe·photoshop
兰亭妙微3 天前
2026年UX/UI五大趋势:AI、AR与包容性设计将重新定义用户体验
开发语言·ui·1024程序员节·界面设计·设计趋势
摘星编程3 天前
【参赛心得】HarmonyOS创新赛获奖秘籍:如何用Stage模型和声明式UI打造高分作品
ui·华为·harmonyos·鸿蒙开发·stage模型
知识分享小能手4 天前
uni-app 入门学习教程,从入门到精通,uni-app中uCharts组件学习((8)
vue.js·学习·ui·微信小程序·小程序·uni-app·echarts
Aevget4 天前
界面控件Kendo UI for Angular 2025 Q3亮点 - 全新的AI编码助手
ui·界面控件·kendo ui·ui开发·1024程序员节
油炸自行车5 天前
【Qt】VS Code配置Qt UI插件,vscode打开Qt Designer ,vscode打开Qt*.ui文件
qt·ui·cursor·qt designer·vscode插件·trae·qt ui
程序员小远5 天前
Appium+python+unittest搭建UI自动化框架
自动化测试·软件测试·python·测试工具·ui·appium·测试用例
尤老师FPGA6 天前
LVDS系列32:Xilinx 7系 ADC LVDS接口参考设计(三)
android·java·ui