vue ElementUI 表单验证 不能绑定多层次数据

elementUI 的 el-row组件提供了rules属性来定制 各个el-form-item的验证规则

代码如下,其中form的 :model必须绑定一个对象,然后form-item prop属性绑定该对象下面的想要验证的属性,

注意!!! prop指定的属性只能是对象的下一层属性 ,例如对象 var data = {name:"",sex:"",config:{set:"",get:""}}

当:model绑定为data时,form-item prop属性只能填name,sex,不能绑定config属性下面的set和get属性,即只能绑定一层属性,不能绑定多层下的属性,如果想要form-item prop想要绑定seth和get属性,可以设置 :model=data.config,或者设置prop 为 config.set,config.get ,但此时绑定不了上一层的name和sex属性

    <el-form :rules="rules" :model="data.config" ref="ruleForm">
    <el-row>
      <el-col :span="20">
        <el-form-item label="名称" prop="name" >
          <el-input v-model="data.config.name" auto-complete="off" ></el-input>
        </el-form-item>
        <el-form-item label="Percent_DPC_Time最大值" prop="Percent_DPC_Time">
            <el-input v-model="data.config.Percent_DPC_Time"  placeholder="0~100,为空条件不限制"></el-input>
        </el-form-item>
        <el-form-item label="Percent_Idle_Time最大值" prop="Percent_Idle_Time">
            <el-input v-model="data.config.Percent_Idle_Time" placeholder="0~100,为空条件不限制"></el-input>
        </el-form-item>    
        <el-form-item label="Percent_Interrupt_Time最大值" prop="Percent_Interrupt_Time">
            <el-input v-model="data.config.Percent_Interrupt_Time"  placeholder="0~100,为空条件不限制"></el-input>
        </el-form-item> 
        <el-form-item label="Percent_Privileged_Time最大值" prop="Percent_Privileged_Time">
            <el-input v-model="data.config.Percent_Privileged_Time"  placeholder="0~100,为空条件不限制"></el-input>
        </el-form-item> 
        <el-form-item label="Percent_Processor_Time最大值" prop="Percent_Processor_Time">
            <el-input v-model="data.config.Percent_Processor_Time"  placeholder="0~100,为空条件不限制"></el-input>
        </el-form-item>
        <el-form-item label="Percent_User_Time最大值" prop="Percent_User_Time">
            <el-input v-model="data.config.Percent_User_Time"  placeholder="0~100,为空条件不限制"></el-input>
        </el-form-item>                            
      </el-col>
    </el-row>
  </el-form>
checkPercent = (rule, value, callback) => {
    var reg = new RegExp("^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$");
    if (!value) {
      //可为空,代表条件不限制
      return callback();
    }
    setTimeout(() => {
      if (!reg.test(value)) {
        callback(new Error("请输入正数"));
      } else {
        let num = Number(value);
        if (value > 100 || value < 0) {
          callback(new Error("0-100之间"));
        } else {
          callback();
        }
      }
    }, 1000);
  };

      rules: {
        Percent_DPC_Time: [{ validator: checkPercent, trigger: "blur" }],
        Percent_Idle_Time: [{ validator: checkPercent, trigger: "blur" }],
        Percent_Interrupt_Time: [{ validator: checkPercent, trigger: "blur" }],
        Percent_Privileged_Time: [{ validator: checkPercent, trigger: "blur" }],
        Percent_Processor_Time: [{ validator: checkPercent, trigger: "blur" }],
        Percent_User_Time: [{ validator: checkPercent, trigger: "blur" }],
        name:[{required:true,message:'不能为空'}]
      }




  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值