element表单校验，数据循环校验

最新推荐文章于 2024-02-28 10:11:13 发布

qq_33475629

最新推荐文章于 2024-02-28 10:11:13 发布

阅读量258

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/qq_33475629/article/details/134353465

版权

步骤一：

表单绑定form对象，model和rules必填，自定义校验规则checkNum

<el-form
      :model="ruleForm"
      :rules="rules"
    >


data() {
    var checkNum = (rule, value, callback) => {
      if (value) {
        const reg = /^\d+$/ //大于等于零的整数
        if (reg.test(value)) {
          if(Number(value) > 999){
            return callback(new Error('最大输入999'))
          }else{
            callback()
          }
        } else {
          return callback(new Error('只能输入大于等于零的整数'))
        }
      } else {
        return callback(new Error('文本框不能为空'));
      }
    }
    return {
      ruleForm: {},
      rules: {
        limitTime: [ { required: true, validator: checkNum, trigger: 'blur' }],
      },
    };
  },

步骤二

表单循环内写法，prop和rules必填

<template v-for="(item, index) in ruleForm.riskList">
   <el-form-item label="姓名1" :prop="'riskList.'+index+'.limitTime'" :rules="rules.limitTime">
     <el-input v-model="item.limitTime" />
   </el-form-item>
 </template>