Vue中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一个错误出来,使事件无法继续执行
![在这里插入图片描述](https://img-blog.csdnimg.cn/91577b4eb6a84b25b5cf83dd465872fb.png)
代码:

```javascript
async addDeliveryCodeInfo() {
//效验 
	await  this.$refs['form'].validate()
	//通过后执行,不通过,不执行
	console.log('你通过了')
}