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

最新推荐文章于 2024-06-27 10:21:38 发布

zhougl996

最新推荐文章于 2024-06-27 10:21:38 发布

阅读量1.8k

点赞数

分类专栏：前端文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/Aoutlaw/article/details/121540348

版权

前端专栏收录该内容

58 篇文章

订阅专栏

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

在表单提交过程中很多时候要用到几个表单项二选一验证或多选一验证

template

<el-row v-else>
  <el-col :span="8">
    <el-form-item label="账户ID" prop="acctId">
      <el-input v-model="publicForm.acctId" style="margin-right: 0.625rem;" @input="clearRule()">
      </el-input>
    </el-form-item>
  </el-col>
  <el-col :span="8">
    <el-form-item label="用户ID" prop="userId">
      <el-input v-model="publicForm.userId" style="margin-right: 0.625rem;" @input="clearRule()"></el-input>
    </el-form-item>
  </el-col>
  <el-col :span="8">
    <el-form-item label="号码" prop="number">
      <el-input v-model="publicForm.number" style="margin-right: 0.625rem;" @input="clearRule()"></el-input>
    </el-form-item>
  </el-col>
</el-row>

类定义

publicForm: {
  acctId: '',
  userId: '',
  number: '',
},
publicRule: {
  acctId: [{
    required: true,
    validator: this.validateNum,
    trigger: 'blur'
  }],
  userId: [{
    required: true,
    validator: this.validateNum,
    trigger: 'blur'
  }],
  number: [{
    required: true,
    validator: this.validateNum,
    trigger: 'blur'
  }],
},

类方法

validateNum (rule, value, callback) {
  if (!this.publicForm.acctId && !this.publicForm.userId && !this.publicForm.number) {
    callback(new Error('账户ID,用户ID,号码,请至少填写一项'))
  } else {
    callback()
  }
},
clearRule () {
  this.$refs.publicForm.clearValidate('acctId')
  this.$refs.publicForm.clearValidate('userId')
  this.$refs.publicForm.clearValidate('number')
},