element-ui的表单验证规则validate踩坑

element-ui的表单验证规则踩坑

• validate
• 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise

` var checkAge = (rule, value, callback) => {
       if (!value) {
         return callback(new Error('年龄不能为空'));
       }
       setTimeout(() => {
         if (!Number.isInteger(value)) {
           callback(new Error('请输入数字值'));
         } else {
           if (value < 18) {
             callback(new Error('必须年满18岁'));
           } else {
             callback();
           }
         }
       }, 1000);`
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }

• 自定义验证校验结束的回调函数无论成功与否都得传入回调函数，表单预校验时需要用到这个回调函数，
• 没有传入成功的回调函数，表单是无法进行验证，得不到valid。
• 这个validate怎么用算是搞明白了，很好奇这个验证逻辑，查了下资料发现这属于一种策略 验证和之前学的表单验证方式完全不一样
  下面简单记录下什么是策略验证模式

• - 策略验证模式

• 做一件事你会有很多方法，也就是所谓的策略，
• 核心思想
• 将做什么谁去做相分离。
• 一个完整的策略模式要有两个类，一个是策略类，一个是环境类(主要类)，环境类接收请求，但不处理请求，它会把请求委托给策略类，让策略类去处理，而策略类的扩展是很容易的，这样，使得我们的代码易于扩展。

感兴趣同学可以去查看 探索两种优雅的表单验证——策略设计模式和ES6的Proxy代理模式[https://github.com/jawil/blog/issues/19]