element之el-form的各种校验姿态

1.基础姿势/自定义姿势

"ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
  "活动名称" prop="name">
    "ruleForm.name">
  
 "年龄" prop="age">
    "ruleForm.age">
  
  
    type="primary" @click="submitForm('ruleForm')">立即创建
    "resetForm('ruleForm')">重置
  


复制代码

在el-form上绑定rules，rlues为校验规则，在el-form-item上绑定对应的prop。 自定义规则，validator：checkAge，自定义规则的函数。 不啰嗦，详细的可查看element文档http://element-cn.eleme.io/#/zh-CN/component/form。 2.行间校验

"numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
  "年龄"
    prop="age"
    :rules="[
      { required: true, message: '年龄不能为空'},
      { type: 'number', message: '年龄必须为数字值'}
    ]">
    type="age" v-model.number="numberValidateForm.age" autocomplete="off">
  
复制代码

可将rule写在各自的el-form-item上 3.行间自定义校验

"numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
  "年龄"
    prop="age"
    :rules="[
      {max_age：18， validator: checkAge, trigger: 'blur' }
    ]">
    type="age" v-model.number="numberValidateForm.age" autocomplete="off">
  


复制代码

4.行间循环自定义校验

  "(domain, index) in dynamicValidateForm.domains"
    :label="'域名' + index"
    :key="domain.key"
    :prop="`domains.${index}.value`" //绑定的prop
    :rules="[
     { required: true, message: '域名不能为空', trigger: 'blur' },
     {reg：/^--------$/， validator: checkDomain, trigger: 'blur' }
    ]"
  >



复制代码

转载于:https://juejin.im/post/5c14be1df265da611510b01c