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

最新推荐文章于 2024-09-24 15:29:26 发布

ldb923

最新推荐文章于 2024-09-24 15:29:26 发布

阅读量6k

点赞数 7

CC 4.0 BY-SA版权

文章标签： javascript vue.js elementui

原文链接：https://www.h5w3.com/142387.html

本文介绍如何在 Element UI 中实现复杂表单验证，包括如何为包含多个输入项的 el-form-item 设置 prop 属性，并提供了一种通过自定义验证方法来检查多个输入框值的有效性的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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