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()}}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！