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）完成

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

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

清除方法：