element-ui之Form表单验证--自定义方法验证【详细】
element ui 验证--自定义方法验证-两种验证写法：方法略有不同；
至于基本的表单验证呢，统一写在rules 【表单验证规则】中即可；
第一种：
//直接在表单上进行验证 <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() } } }