element-ui中表单验证中validate()的作用过程？

Question

在element-ui的代码中有

export default {
    data() {
      var validateUser = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入用户名'));
        } else {
          if (this.ruleForm.user !== '') {
            this.$refs.ruleForm.validateField('pass');
          }
          callback();
        }
      };

      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        }
        else {
          if(this.ruleForm.pass !==''){
            this.$refs.ruleForm.validateField('pass1')
          }
          callback();
        }
      };
      }


      return {
        ruleForm: {
          user: '',
          pass: '',
        },
        rules: {
          user: [
            {validator: validateUser, trigger: 'blur'}
          ],
          pass: [
            {validator: validatePass, trigger: 'blur'}
          ],
        },
        dialogVisible:false
      };
    },

element-ui也不提供个源码。所以想问

• 上面的(rule,value,callback)三个参数都什么意思？，从哪来的啊(+_+)?
• validateField()里面的参数需要填什么？
• ruleForm{}里面的属性名必须要和rule{}里面的属性名一样么？

好吧，其实我就是想知道validate()的内部作用过程是怎么样的？

Answer 1

这里的只是指回调函数啊。element-ui对验证结果的当做参数传入验证函数中。

比如：

var validate = function(trigger, callback = function(){}){
    console.log(trigger);
    callback();
}
validate('sf.gg', function(){
    console.log('调用了callback函数');
});
// sf.gg
// 调用了callback函数
// 其实element-ui源码里就是类似这样写的。

-------分割线--------

看你修改了问题，我也修改下回答吧。
1、你输出下这三个参数就大概知道是什么意思啊。(rule,value,callback)
第一个应该是规则，第二个是输入框的值。第三个是回调函数。
2、validateField其实文档已经对其做了解释。对部分表单字段进行校验的方法
3、ruleForm{}里面的属性名是需要和rule{}里面的属性名保持一致的。不然不知道对谁验证啊。

你要看源码，其实可以去github看的。element-ui的表单验证应用了策略模式（设计模式）。
关于策略模式，推荐@微醺岁月 的文章：探索两种优雅的表单验证——策略设计模式和ES6的Proxy代理模式，或者曾探的书籍《JavaScript设计模式与开发实践》第5章策略模式。
关于源码，可以克隆相对应的1.x分支（猜你应该用的是1.x）下来，自己研究。可以从Element-ui源码：传入的参数rules为对象看起
另外 推荐一个chrome插件octotree,树形结构方便查看github项目。可以不翻墙，下载dist/chrome.crx安装即可。

希望对你有所帮助。

Answer 2

1. 上面的(rule,value,callback)分别是表单验证规则，输入框的value值，校验结果的回调函数。
2. validateField是表单dom自带的方法，里面的参数是prop绑定的字符串名checkPass，该函数的作用是执行校验绑定字符串checkPass的条目。
3. ruleForm{}里面的属性名不需要和rule{}里面的属性名一样。ruleForm2{}里面的属性名和v-model里绑定的属性对应，rule2{}里面的属性名和prop绑定的属性名对应。