Vue中Rule的使用方式
作者：广州第22号吴彦祖
这篇文章主要介绍了Vue中Rule的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Rule的使用
日常的rule效验，能帮我们省很多时间去做if eles判断
下边记录一下我在入职新公司的使用
1.需要效验的字段
要在from-item上家prop属性 可以和字段同名
2.在data中创建一个rules对象
绑定当前的from表单，并把效验字段的prop放置进去
对于简单效验可以直接，做非空判断，复杂的判断在回调函数validator中效验
baseRules:{
materialsName: [{required: true, message: "请输入物料名称", trigger: "blur"}],
deliveryScope: [{required: true, message: "请输入物料名称", trigger: "blur"}],
offect: [{required: true, message: "请输入用途", trigger: "blur"}],
materialsContent: [{validator: (rule, value, callback) => {
// rule:当前标准
//value:当前输入框的值 也常常是用值做判断
// callback:Element传入的固定回调函数,校验完成就需要执行
// 1,如果校验合法直接执行,没有参数
// 2.如果不合法,创建一个错误对象参数new Error
if (!value) {
callback(new Error('请选择物料内容'))
} else {
let result = JSON.parse(value)
if(result && result.link) {
callback()
}else {
callback(new Error('请选择物料内容'))
}
}
}, trigger: "change"}],
}
3.最后一步
看效验是否成功然后执行成功后的操作，否则就return一个错误出来，使事件无法继续执行
代码：
async addDeliveryCodeInfo() {
//效验
await this.$refs['form'].validate()
//通过后执行,不通过,不执行
console.log('你通过了')
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。