ElementUI 表单验证之ref、$refs和rules解析

不点 阅读:238 2021-03-31 13:44:31 评论:0

ElementUI 提供的表单Form支持表单验证,仅仅需要添加rules 属性值:

<el-form ref="form" :model="form" :rules="rules"  label-width="80px">

我们在el-form表单控件中发现了ref 属性,ref 属性涉及Dom 元素的获取(el-form表单对象)。我们首先需要了解下javasrcipt 是如何获取Dom 元素是通过:document.querySelector(".input")获取dom元素节点 。Vue 为简化DOM获取方法提出了ref 属性和$refs 对象。一般的操作流程是:ref 绑定控件,$refs 获取控件。

ref 绑定控件:

<el-form ref="form" :model="form" :rules="rules"  label-width="80px">

$refs 获取控件:

 methods: { 
      onSubmit(formName) { 
       this.$refs[formName].validate((valid) => { 
        if (valid) { 
            alert('验证成功!'); 
        } else { 
            console.log('error submit!!'); 
            return false; 
        } 
        }); 
      }, 
      resetForm(formName) { 
        this.$refs[formName].resetFields(); 
      } 
    }

 

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
KIKK导航

KIKK导航

关注我们