表单验证的设计

  不说废话,直接留干货。实现的效果:多条表单提交的时候,如果某个表单的输入不和格式要求,则提示对应的错误信息,所有表单的内容合适,则提交到后台。显示代码(这里的dom的结构不唯一,我只是在我实际的项目中,遇到的解决方案)

  dom:

  

  css:

  

  js:

  

  显示的效果:

  全部格式不对:

  部分不对:

  验证为空后继续验证是否符合电话格式(这里只做了这个具体的验证,也可以做邮箱的验证,就要单独写正则验证邮箱)

总结:这样做的好处就是,在提交表单的时候,如果某条表单格式不对,可以立马显示出对应表单,不用一条一条的验证,或者,嵌套验证(验证完第一个后,在继续在这段代码验证第二个),以前是这样做的,一来嵌套麻烦,二来这里的bug颇多,不同的输入方式,你还有做不同的判断,几乎是累死人的验证。

每日一句:

It’s not about how badly you want something. It’s about what you are capable of!

翻译:

光有志向是不够的,重要的是你的能力。 —《疯狂动物城》

  

时间: 2024-10-22 17:10:16

表单验证的设计的相关文章

jquery插件,表单验证validation plugin的使用

笔记: 一.首先引入插件 <script type="text/javascript" src="js/jquery-1.10.0.js" ></script> <script type="text/javascript" src="js/jquery.validate-1.13.1.js" ></script> 列子:一个简单的登录表单验证 1 <form id=&quo

群里分享的react的收藏一下!今日周末,改了个表单验证然后无所事事了!

今日周末,改了个表单验证然后无所事事了,然后把昨天群里分享的react的收藏一下尽管现在还在研究angular和nodeJs毕竟刚刚开始用有点不熟...没准以后会研究一下react毕竟看着下面这张图还是觉得有点欢乐的 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,

利刃 MVVMLight 5:绑定在表单验证上的应用

表单验证是MVVM体系中的重要一块.而绑定除了推动 Model-View-ViewModel (MVVM) 模式松散耦合 逻辑.数据 和 UI定义 的关系之外,还为业务数据验证方案提供强大而灵活的支持. WPF 中的数据绑定机制包括多个选项,可用于在创建可编辑视图时校验输入数据的有效性. 常见的表单验证机制有如下几种: 验证类型 说明 Exception 验证 通过在某个 Binding 对象上设置 ValidatesOnExceptions 属性,如果源对象属性设置已修改的值的过程中引发异常,

(转)强大的JQuery表单验证插件 FormValidator使用介绍

jQuery formValidator表单验证插件是客户端表单验证插件.在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者(JavaScript开发者)需要编写大量的JavaScript来进行表单元素的校验,而这些校验在平时开发中不停的重复书写.常见的校验如不能为空,必须满足长度要求,必须为数字,必须为Email等等.一般要判断的表单元素比较多,开发过程就显得枯燥无味--重复的代码不断重复,而且可能还要兼容多种浏览器,更多

表单验证——JqueryValidator、BootstrapValidator

表单验证两种方式: 1.JqueryValidator <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JqueryValidator实战——用户注册</title> <script src="http://static.runoob.com/assets/jquery-validatio

HTML5实战应用:如何让表单验证更友好

HTML5表单验证给前端人员带来了便利,但是在用户体验上存在一些缺陷,默认的提示对用户很不友好,无法准确的获取想要的信息.好在大牛们在接口设计的时候提供了setCustomValidilty方法可以自定义提示信息.这是一个好消息,但也存在一些弊端,需要让开人员做额外的一些处理才达到真正想要的目的. 接下来通过以下示例来阐述方法的应用. 未调用setCustomValidity)方法!DOCTYPE html> html hea ata charset="utf-8 titleform te

Laravel教程 七:表单验证 Validation

Laravel教程 七:表单验证 Validation 此文章为原创文章,未经同意,禁止转载. Laravel Form 终于要更新这个Laravel系列教程的第七篇了,期间去写了一点其他的东西. 就不 说废话了吧,直接进入Form Validation的部分吧.几乎在每一个web应用当中都会有表单,而有表单基本就离不开表单验证.在laravel中,其实可以说是有两种方式来进行表单验证:使用Request和使用Validation.下面将分开讲这两部分的内容,而且我会更着重第一种,也更推荐大家使

jquery validate表单验证插件-推荐

1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的

JaveWeb 公司项目(4)----- Easyui的表单验证

前面三篇博文讲述的是界面的搭建和数据的传输,可以看出目前我做的这个小项目已经有了一个大体的雏形,剩下的就是细节部分的打磨和一些友好的人机交互设计,今天做的是表单的验证,作为初学者,着实花了一番功夫,所以写一篇博文将这个过程记录下来,一方面是可以记录自己的工作过程,以后看起来方便,一方面也希望可以帮助到有需要求的人 Easyui有一个专门为表单验证设计的样式,首先我们将Form表中的Textbox模式改为Validatebox,更改之后输入框会有一些变化,从圆润变得相对方正一些,