element-ui之Form表单验证--自定义方法验证【详细】

element ui 验证–自定义方法验证-两种验证写法,方法很简单,主要是自定义方法的时候,方法的位置有些新手还掌握不清,这里详细列举一下。

第一种

/直接在表单上进行验证
<el-form-item label="跳过行数" prop="ignoreLines"
        :rules="[{ required: true, validator: checkNumber, trigger: 'blur' }]">
 //方法定义在methods中
   checkNumber(rule, value, callback){
    if (!value) {
      return callback(new Error('请输入跳过行数'));
    } else if (!/^[0-9]*$/g.test(value)) {
      return callback(new Error('跳过行数只能输入数字'))
      } else if (value < 0) {
      return callback(new Error('跳过行数不能小于0'))
    }else {
      callback()
    }
},

第二种

<el-form-item label="跳过行数" prop="ignoreLines">
  <el-input v-model="form.ignoreLines"></el-input>
</el-form-item>
//统一写在form定义好的rules中;prop对应rules中的名称;
rules: {
  ignoreLines:[
//{required: true, message: '请输入跳过行数', trigger: 'blur'},
{required:true,validator:checkNumber,trigger: 'blur'}
    ]
}
//定义一个checkNum验证方法 直接在data中,与return平级
data() {
  var checkNumber =(rule, value, callback) =>{
    if (!value) {
      return callback(new Error('请输入跳过行数'));
    } else if (!/^[0-9]*$/g.test(value)) {
      return callback(new Error('跳过行数只能输入数字'))
    } else if (value < 0) {
      return callback(new Error('跳过行数不能小于0'))
    }else {
      callback()
    }
  }
}

版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创

转载请注明:出处来自田珊珊个人博客 » element-ui之Form表单验证–自定义方法验证【详细】

点赞

发表评论

邮箱地址不会被公开。 必填项已用*标注