vue中elment-ui添加表单验证规则,以及动态增加的表单校验

一、表单格式固定的添加表单验证

<template>
  <el-form ref="addForm" :model="form" label-width="100px" :rules="addRules">
     <el-form-item label="名称"  prop="name" >
        <el-input v-model="addForm.telNumber"></el-input>
     </el-form-item>
  </el-form>
</template>

data () {
    return {
      addForm: {
        name:'',//名称
      },
    addRules: {
        name:[{ required: true, message: "名称不能为空", trigger: "blur" }],
    }
  }
}

二、动态增加表单,添加表单验证

<template>
 <el-form ref="form" :model="addForm" label-width="100px" :rules="addRules">
     <el-form-item v-for="(item,index) in addForm.nameList" 
                   label="名称数组对象"
                   :prop="'nameList.'+ index +'.name'"
                   :rules="addRules.name">
        <el-input v-model="item.name"></el-input>
     </el-form-item>
 </el-form>
</template>

data () {
    return {
      addForm: {
        nameList:[
            {name:''}
        ]
      },
      addRules: {
        name:[{ required: true, message: "名称不能为空", trigger: "blur" }],
    }
  }
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
你可以使用 Vue Element 的表单验证规则来实现多层循环的动态添加校验规则。下面是一个简单的示例代码,演示了如何使用 v-for 指令循环生成表单项,并动态添加校验规则: ```html <template> <el-form ref="form" :model="formData" :rules="formRules" label-width="100px"> <el-form-item v-for="(item, index) in formItems" :key="index" :label="item.label" :prop="item.prop"> <el-input v-model="formData[item.prop]" :placeholder="item.placeholder"></el-input> </el-form-item> </el-form> </template> <script> export default { data() { return { formData: {}, // 表单数据 formItems: [ // 表单项配置 { label: '姓名', prop: 'name', placeholder: '请输入姓名' }, { label: '年龄', prop: 'age', placeholder: '请输入年龄' }, // ... ], formRules: {} // 表单校验规则 }; }, mounted() { this.generateFormRules(); }, methods: { generateFormRules() { this.formItems.forEach(item => { // 根据不同的表单项生成对应的校验规则 // 这里只是示例,你可以根据实际需求进行修改 this.$set(this.formRules, item.prop, [ { required: true, message: `请输入${item.label}`, trigger: 'blur' }, // 其他校验规则... ]); }); } } }; </script> ``` 在上面的示例表单项的配置存储在 `formItems` 数组,你可以根据实际需求自行修改。在 `generateFormRules` 方法,通过遍历 `formItems` 数组,动态生成表单校验规则,并将其存储在 `formRules` 对象。最后,在 `<el-form>` 组件上使用 `:rules` 属性绑定表单校验规则。 这样,你就可以实现多层循环动态添加校验规则的功能了。记得根据实际需求修改校验规则的内容。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值