elementui表单item中包含多个必填项

最新推荐文章于 2026-02-21 00:20:49 发布

转载最新推荐文章于 2026-02-21 00:20:49 发布 · 736 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.jianshu.com/p/3fb1007c0421

标签

#elementui #前端 #javascript

文章讲述了在Vue.js应用中，如何使用ElementUI组件库的el-form-item和el-select来创建级联选择的城市和区域输入。重点在于实现自定义验证规则，确保当选择省份时，必须同时选择城市，否则会触发错误提示。验证规则定义在data对象内，并在formRules中针对selectProValue字段设置。

代码

<el-form-item label="城市：" class="cityList" prop="selectProValue">
  <!-- 城市 -->
  <el-select v-model="form.selectProValue" placeholder="请选择" @change="proValueChange">
    <el-option v-for="(province, index) in provinceList" :key="index" :label="province" :value="province"></el-option>
  </el-select>
  <!-- 城市下地区 -->
  <el-select v-model="form.selectCityValue" placeholder="请选择" @change="onCityRules">
    <el-option v-for="(city, index) in cityList" :key="index" :label="city" :value="city"></el-option>
  </el-select>
</el-form-item>

验证规则方法：

item中给其中一个下拉框字段添加验证规则，通过自定义validator验证规则校验这个字段，在自定义校验规则中，对第二个必填项进行校验，两个必填项必须都要通过。

 data(){
    // 自定义城市验证规则
    varcityRule = (rule, value, callback) => {
      // value 就是 验证那个字段 为空 或者 selectCityValue 为空 验证都不会通过
      if (value === '' || this.form.selectCityValue === '') {
        returncallback(newError('请选择地区！'))
      } else { callback() }
    }
  }
  return {
    // 城市地区验证规则 只需要添加第一个字段的验证规则
    formRules: {
      selectProValue: [{ required: true, validator: cityRule, trigger: 'chang    ·e' }]
    }
  }