H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

回答:

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

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

回答:

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

回答:

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

解决方法:
使用两个 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 里正常写字段校验规则即可。

回答:

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"));
      }
    };

本文地址:H5W3 » el-form-item 包含多个input 怎么验证?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址