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

您所在的位置:网站首页 自定义验证控件是什么意思 ElementUI 表单验证之ref、$refs和rules

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

2024-07-16 19:46| 来源: 网络整理| 查看: 265

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

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

ref 绑定控件:

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

 



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3