Element-ui的使用(二):Form表单(基本效验)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Element-ui的使用(二):Form表单(基本效验)相关的知识,希望对你有一定的参考价值。

参考技术A

在此以登录案例作为分析使用

2.1、布局

分析:

用户名输入框效验:

密码输入框效验:

原理:失去焦点时判断输入框是否有值,如果有值则将效验的规则 required 关闭,反之则打开
细节:当输入框没有输入值的时候输入框的值是 undefined ,当输入值之后又将值清空输入框的值是 空 ,所以在判断的时候都要加上判断

2.3、弹出框提示

在效验的时候调用提示框(传值)方法就可以了

2.4、调用网络接口完全登录的整个Form效验

以上是关于Element-ui的使用(二):Form表单(基本效验)的主要内容,如果未能解决你的问题,请参考以下文章

element-ui使用form表单校验

Element-ui关于form表单的踩坑

agel-form 基于 element-ui form 的二次封装,数据配置表单,快速开发!

Element-ui 表单的基础使用

vue element-ui 的form表单验证rules

element-ui Form表单验证