el-form-item 包含多个input 怎么验证？

Question

<el-form-item v-for="member in memberList" style="display:flex;" prop="member">
    <el-select v-model="member.role" clearable filterable placeholder="选择人物角色" style="width:35%">
        <el-option v-for="item in projectRole" :label="item.label" :key="item.value" :value="item.value">{{ item.label }}</el-option>
    </el-select>

    <el-input placeholder="输入人员域账号" v-model="member.username"  style="width:35%"></el-input>
    <el-button @click.prevent="removeMember(member)">删除</el-button>
    <el-button @click.prevent="addMember">增加</el-button>
    <br />
</el-form-item>

如果一个 el-form-item 中含有两个输入项，比如上面的，一个select，一个input，这种如果要使用 element-ui 的表单验证，该怎么写呢？

我尝试了自定义表单验证，

// {trigger: 'change', validator: validatePass,}
var validatePass = (rule, value, callback) => {
    console.log(value);
    callback();
};

但是value一直是undefined。不知要怎么写这个prop属性才可行？

Answer 1

<el-form-item v-for="member in memberList" style="display:flex;" prop="member"> 中的 prop 属性名，要跟 el-form 的 model 对应，也就是说：

<el-form :model="form">
    <el-form-item  prop="member">
...
// 对应的data 应该是
data() {
    return {
        form: { member: `xxx` }
    }
}    

所以题主这样写是无法触发校验的，一个el-form-item 也只能有一个 表单元素。
就题主的需求，得把 v-for 写在 el-form

<el-form v-for="member in memberList" :rules="rules">
    <el-form-item  style="display:flex;" prop="role">
        <el-select v-model="member.role" clearable filterable placeholder="选择人物角色" style="width:35%">
                <el-option v-for="item in projectRole" :label="item.label" :key="item.value" :value="item.value">{{ item.label }}</el-option>
        </el-select>
    </el-form-item>
    
    <el-form-item  style="display:flex;" prop="username">
        <el-input placeholder="输入人员域账号" v-model="member.username"  style="width:35%"></el-input>
    </el-form-item>
    <el-button @click.prevent="removeMember(member)">删除</el-button>
    <el-button @click.prevent="addMember">增加</el-button>
</el-form>

Answer 2

这一点element-ui真是有点死板，我是这样解决的，有两个<el-input>情况，prop可以只绑定第一个input的，第二个input写上ref属性，验证的rules中写一个方法，这个方法验证第一个input框的同时，通过 this.$refs.xxx.value的形式获取第二个input框值，只要这两个input框中存在有问题的情况则直接返回error。当然这个方法不能算优雅，我也是分享下我的经验，有更好的方法希望大家分享下。

    <el-form-item label="同步数据频率：" prop="frequency">
      <el-input size="mini" v-model="addForm.frequency" class="form-input" style="width: 60px;"></el-input>
      次/
      <el-input size="mini" v-model="addForm.frequencyMinute" class="form-input" style="width: 60px;" ref="frequencyMinute"></el-input>
      分钟
      <span style="color: rgba(0,0,0,0.29);">均为空则不限制请求频率</span>
    </el-form-item>

以上是页面代码，校验部分

      frequency:[
        { validator: checkFrequency, trigger: 'blur' }
      ]

校验方法

  var checkFrequency = (rule, value, callback) => {
    let minutes = this.$refs.frequencyMinute.value;
    if (!value && !minutes) {
      callback();
    }
    var reg =  /^[1-9]\d*$/;
    if (!reg.test(value) || !reg.test(minutes)) {
      callback(new Error('请输入非零正整数'));
    } else {
      if (value > 1440 || minutes > 1440) {
        callback(new Error('数值不能大于1440'));
      } else {
        callback();
        }
      }
    };

Answer 3

同样遇到这个问题，一个 el-form-item 里有两个input，主要是因为两个input是同一类，比如值的范围。

解决方法：
使用两个 el-form-item 嵌套。如下处理

<el-form ref="editForm" :model="editForm" :rules="FormRules" label-width="80px">
  <el-form-item label="餐后血糖" prop="pbg_min">
    <el-col :span="5">
      <el-form-item prop="pbg_min">
        <el-input-number size="mini" class="numberInput" :controls="false" v-model="editForm.pbg_min"></el-input-number> -
      </el-form-item>
    </el-col>
    <el-col :span="10">
      <el-form-item prop="pbg_max">
        <el-input-number size="mini" class="numberInput" :controls="false" v-model="editForm.pbg_max"></el-input-number> mmol/l
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="BMI" prop="bmi_min">
    <el-col :span="5">
      <el-form-item prop="bmi_min">
        <el-input-number size="mini" class="numberInput" :controls="false" v-model="editForm.bmi_min"></el-input-number> -
      </el-form-item>
    </el-col>
    <el-col :span="10">
      <el-form-item prop="bmi_max">
        <el-input-number size="mini" class="numberInput" :controls="false" v-model="editForm.bmi_max"></el-input-number>
        kg/m^2
      </el-form-item>
    </el-col>
  </el-form-item>
</el-form>

FormRules 里正常写字段校验规则即可。

Answer 4

let checkFrequency = (rule, value, callback) => {
      let callbackFlag = 0;
      value.forEach(minutes => {
        if(callbackFlag !== 0){
          return
        }
        if (!minutes) {
          callbackFlag = 0
        }
        var reg = /^[1-9]\d*$/;
        if (!reg.test(minutes)) {
          callbackFlag = 1;
        } else {
          if (minutes > 100) {
            callbackFlag = 2;
          } else {
            callbackFlag = 0
          }
        }
      });
      if(callbackFlag === 0){
        callback();
      } else if(callbackFlag === 1){
        callback(new Error("请输入非零正整数"));
      } else if(callbackFlag === 2){
        callback(new Error("数值不能大于100"));
      }
    };