type
status
date
slug
summary
tags
category
icon
password
前言
最为一个java后台人员，最近在学习编写VUE。发现很多功能的输入框都需要校验，百度了一下vue和element-ui，可以使用rules进行校验。所以记录此次学习过程，供小伙伴们使用。
步骤
配置el-form
在你的form表单中增加rules的配置，如
配置el-form-item
在对应的字段增加prop属性，如（注意此处prop属性要跟步骤3对应）
配置规则
在export default的data中增加rules的规则配置
提交时增加方法
通过上述方法配置，如果鼠标点击对应input框，但是没有填写，光标移除后就会出现下图样式
不过如果只按照上面配，在保存的时候，是不会有强行验证的，所以还需要加个验证
通过以上四步，则可以完成表单的校验功能
其他
如果element-ui的验证不满足自己的校验方式（比如要验证电话号码，验证是否为整数等），则可以通过下面方法处理
（1）增加一个js，添加自定义的验证js，方法可参考
比如引入方法validateNumber
（2）vue页面引入此js的具体方法，如
（3）在方法3的配置规则中，修改为如下即可
- 作者:Doubletree
- 链接:https://blog.doubletree.fun/article/92ed2963-4ae4-4d3e-a818-f3e16d4265b7
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。