H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】element-ui中表单验证中validate()的作用过程?

在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()的内部作用过程是怎么样的?

回答:

这里的只是指回调函数啊。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安装即可。

希望对你有所帮助。

回答:

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

本文地址:H5W3 » 【Web前端问题】element-ui中表单验证中validate()的作用过程?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址