el-form-item 包含多个input 验证方法

<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-f

ldb923

5950人浏览 · 2022-05-25 15:00:23

ldb923 · 2022-05-25 15:00:23 发布

<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属性才可行？

解决方法：

这一点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();
      }
    }
};