VUE+HUI开发中的表单验证

表单验证是前端开发中比较重要的一个环节, 作用是在防止用户犯错的前提下,尽可能让用户更早地发现并纠正错误,提交有效的表单。

在VUE+HUI 开发环境中,我们需要用到Form 组件提供的表单验证功能来实现表单验证。

 

主要方法:

1.  通过 rule 属性传入约定的验证规则

2.  将Form-Item 的 prop 属性设置为需校验的字段名。

 

方法比较简单,但是在实际操作中,有一些场景下的表单验证比较灵活,API中提供的用法不够参考。

 

例如:

1.  通过v-for动态生成的表单

2.     自定义的表单

 

现将添加过程中的方法总结如下:

 

一.   基本的表单验证添加 (必选.最小最大长度)

 

例: 添加数据字典

验证规则


实现:

 

(1)在data中定义验证规则


(2) 在HTML元素上引用规则


注意:prop的命名必须严格对应v-model的命名,否则获取不到值,规则不生效

二. 自定义的表单验证

 

以密码和确认密码为例,密码的添加因为涉及到安全红线,所以添加起来相对复杂一点。总结一个密码的表单验证和动态检测密码风险等级的添加过程,代码中写的不好之处还请指正。

 

例. 新建用户添加密码


验证规则:

1.密码与确认密码相同

2.  包含数字,大写,小写字母,特殊字符中的至少3类

3.  密码不能和用户名正序和倒序相同

4.  必填

 

实现:

(1)data中定义rule验证规则


(2)在HTML元素上引用规则

 

(3)编写自定义规则的方法


(4)监听输入值,得到用户实时输入的数据


(5)密码风险计算


(6) 界面显示

 

(7)完成效果

三. 动态表单验证添加(通过v-for动态生成的表单元素)

 

例.如图,添加人员证件信息最多可加至20个,通过v-for动态生成

验证规则:  0-64位的数字,英文字母,最多添加20个

实现:

(1)data中定义验证规则

 

 

(2)HTML中引用规则


对应的循环数据

 

(3)自定义规则


(4)完成


所有类型的表单验证注意事项:

再次打开对话框应将上次的校验提示信息清除;

清除方法:


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页