Vue 进阶(三十):element-ui 表单验证
一、简单逻辑验证(直接应用 rules)
实现思路
html
中给el-form
增加:rules="rules"
;
html
中在el-form-item
中增加属性prop="名称"
;
js
中直接在data
中定义rules:{}
;
html 部分
复制代码
js 部分
复制代码
二、自定义验证逻辑
实现思路
html
中给el-form
增加:rules="rules"
;
html
中在el-form-item
中增加属性prop="名称"
;
js
中直接在data
中在rules
中的名称对应设置validator: 验证器名称
,;
js
中在data
中return
之上书写验证器对应的 js 验证逻辑;
html 部分
复制代码
js 部分
复制代码
效果图如下
三、表单提交
实现思路
html
中给el-form
增加ref="form" :model="ruleForm"
;
html
中给提交按钮增加点击事件@click="submitForm('form')"
中对应form
的ref="form"
;
js
中直接在methods
中定义提交事件 submitForm(){}
html 部分
复制代码
js 部分
复制代码
四、拓展阅读
在对表单日期/时间选择器
进行校验的时候,rules
中需要增加type='date'
,否则会提示类型错误。例如,
复制代码
版权声明: 本文为 InfoQ 作者【华强】的原创文章。
原文链接:【http://xie.infoq.cn/article/66095092cccfa1976d992e01e】。文章转载请联系作者。
评论