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

本文介绍如何在 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();
      }
    }
};

### 如何对 `el-form-item` 中多个输入框进行循环校验 在 Element UI 的表单组件中,可以通过自定义验证规则来实现对 `el-form-item` 下的多个输入框进行循环校验。以下是具体方法: #### 自定义验证函数 通过编写一个通用的验证器函数,在该函数内部遍历所有的输入字段并逐一检查其有效性。可以利用 Vue.js 数据绑定特性动态获取这些输入框的内容。 ```javascript // 定义全局或者局部使用的验证逻辑 function validateMultipleInputs(rule, value, callback) { const inputsArray = this.$refs[&#39;inputRefs&#39;]; // 假设所有子 input 都有统一 ref 名字 &#39;inputRefs&#39; let isValid = true; for (let i = 0; i < inputsArray.length; i++) { if (!inputsArray[i].value.trim()) { // 如果某个输入为空,则标记为无效 isValid = false; break; } } if (!isValid) { callback(new Error(&#39;所有输入项都不能为空&#39;)); // 返回错误提示消息 } else { callback(); // 表明验证成功 } } ``` 上述代码片段展示了如何创建一个多输入框联合检验的方法[^1]。注意这里的 `this.$refs[&#39;inputRefs&#39;]` 是假设每个子 `<el-input>` 组件都被赋予了一个相同的 `ref="inputRefs"` 属性以便于访问它们的实际 DOM 节点或实例对象。 #### HTML 结构与数据模型关联 下面是一个简单的例子展示如何设置模板部分以及相应的 JavaScript 控制器配置: ```html <template> <el-form :model="formModel" :rules="validationRules" ref="multipleInputForm"> <!-- 动态渲染多组输入 --> <div v-for="(item,index) in formModel.inputsList" :key="&#39;input&#39;+index"> <el-form-item label="请输入内容:" prop="allInputsValidated"> <el-input type="text" v-model="item.value" ref="inputRefs"></el-input> </el-form-item> </div> <el-button @click="submitForm">提交</el-button> </el-form> </template> <script> export default { data() { return { formModel:{ inputsList:[{value:&#39;&#39;},{value:&#39;&#39;}] // 初始化两个空白输入条目作为示范 }, validationRules: { allInputsValidated:[ { validator:validateMultipleInputs , trigger:&#39;blur&#39; } ] } }; }, methods:{ submitForm(){ this.$refs.multipleInputForm.validate((valid)=>{ console.log(valid ? "Validation passed":"Validation failed"); }); } } }; </script> ``` 此示例说明了怎样构建包含可变数量文本域的表单项,并且只用单一属性名来进行整体的有效性检测[^2]。重要的是要记住给每一个单独的 `<el-input>` 设置一致的 reference (`ref`) 所以可以在验证过程中轻松取得它们的状态。 #### 注意事项 - **性能考量**: 当列表非常庞大时,频繁触发整个集合上的重新计算可能会影响用户体验;因此建议仅当必要时候才执行全面扫描。 - **用户体验优化**: 可考虑增加即时反馈机制让使用者知道哪些特定位置存在问题而无需等待最终递交动作完成后再告知全部问题所在之处[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值