欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-07 20:03:00
...

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();
      }
    }

 

相关标签: vue