当前位置:   article > 正文

Element-UI表单验证 二选一、三选一、多选一验证_element ui 实现动态表单(点击按钮增删表格及嵌套输入框的增删)

element ui 实现动态表单(点击按钮增删表格及嵌套输入框的增删)

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

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

HTML代码

  1. <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="form">
  2. <el-row :xs="24" style="width:96%">
  3. <el-col :span="8">
  4. <el-form-item label="简单:" prop="singleChoiceEasy" >
  5. <el-input v-model.number="ruleForm.singleChoiceEasy" placeholder="题量" @input="clearRule('singleChoiceDifficulty','singleChoiceMedium')"></el-input>
  6. </el-form-item>
  7. </el-col>
  8. <el-col :span="8">
  9. <el-form-item label="中等:" prop="singleChoiceMedium">
  10. <el-input v-model.number="ruleForm.singleChoiceMedium" placeholder="题量" @input="clearRule('singleChoiceDifficulty','singleChoiceEasy')"></el-input>
  11. </el-form-item>
  12. </el-col>
  13. <el-col :span="8">
  14. <el-form-item label="困难:" prop="singleChoiceDifficulty">
  15. <el-input v-model.number="ruleForm.singleChoiceDifficulty" placeholder="题量" @input="clearRule('singleChoiceEasy','singleChoiceMedium')"></el-input>
  16. </el-form-item>
  17. </el-col>
  18. </el-row>
  19. </el-form>
  1. data() {
  2. var validateNum= (rule, value, callback) => {
  3. if (!this.ruleForm.singleChoiceEasy && !this.ruleForm.singleChoiceMedium && !this.ruleForm.singleChoiceDifficulty) {
  4. callback(new Error('请至少填写一项'));
  5. } else {
  6. callback();
  7. }
  8. };
  9. return {
  10. ruleForm: {},
  11. rules: {
  12. singleChoiceEasy: [
  13. { required: true, validator: validateNum, trigger: 'blur' },
  14. { type: 'number', message: '必须为正整数', trigger: 'blur'}
  15. ],
  16. singleChoiceMedium: [
  17. { required: true, validator: validateNum, trigger: 'blur' },
  18. { type: 'number', message: '必须为正整数', trigger: 'blur'}
  19. ],
  20. singleChoiceDifficulty: [
  21. { required: true, validator: validateNum, trigger: 'blur' },
  22. { type: 'number', message: '必须为正整数', trigger: 'blur'}
  23. ]
  24. }
  25. }
  26. },
  27. methods: {
  28. clearRule(obj,obj1) {
  29. //接收参数 表单prop
  30. this.$refs.ruleForm.clearValidate(obj);
  31. this.$refs.ruleForm.clearValidate(obj1);
  32. }
  33. //另一种方式 表单@input 给他
  34. clearRule() {
  35. this.$refs.ruleForm.clearValidate();
  36. this.$refs.ruleForm.validateField(["singleChoiceEasy","singleChoiceMedium","singleChoiceDifficulty"]);
  37. }
  38. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/天景科技苑/article/detail/776881
推荐阅读
相关标签
  

闽ICP备14008679号