表单验证的思路--先屡清楚中文思路,再考虑代码如何实现

验证插件的思路

一、定义验证规则和出错信息

1.邮箱必须含有@
2.手机必须是数字
3.用户名最小长度为3,最大长度为30
Paste_Image.png

二、收集表单数据

1.获取所以有效的name(input[type=text]),radio,checkbox,select,textarea,input[type=hidden(注意input type为空时)]
2.根据name获取value(注意获取方式)
3.将所有value汇总到一个对象里
Paste_Image.png

三、对每条数据做验证

1.遍历所以数据
2.拿到name和value
3.根据name拿到rule
4.用rule来校验value
5.如果不成功,则整个表单校验不通过
6.返回最终结果
Paste_Image.png

四、返回最终结果

Paste_Image.png

五、提示出错信息

1.根据name找到出错的input
2.在input后面添加错误信息
Paste_Image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,860评论 18 139
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,742评论 18 399
  • 下载安装搭建环境 可以选npm安装,或者简单下载一个开发版的vue.js文件 浏览器打开加载有vue的文档时,控制...
    冥冥2017阅读 6,081评论 0 42
  • Angular 支持非常强大的内置表单验证,maxlength、minlength、required 以及 pat...
    sunny_lvy阅读 20,086评论 3 25
  • 学者使用zookeeper 、dubbo 但是在配置文件以及客户端连接的时候出现了如下问题,下面来看看解决方法 1...
    安琪拉_4b7e阅读 6,332评论 0 2