优化表单数据的JS校验
在平常的web开发中,我经常需要在客户端对表单的数据进行验证。比如,我们验证表单输入的内容不为空:
<form action= "" method= "post" > 名称:<input type= "text" name= "name" /> 密码:<input type= "text" name= "password" /> <input type= "submit" value= "确认" onclick= "return validate()" /> </form> |
1
|
根据以往的经验,我们会写出如下的JS验证代码: |
<script type= "text/javascript" > function validate() { var form document.forms[0]; if (form.name.value== null &&form.name.value= "" ) { alert( "名称不能为空" ); return false ; } if (form.password.value== null &&form.password.value= "" ) { alert( "密码不能为空" ); return false ; } return true ; } </script> |
但是,现在我有一个业务追求:我要在页面取得的表单数据有很多,比如有十几二十项数据吧,那么我们要在JS代码中重复的写一部分代码,这样就将页面的代码拉得很长,以至于代码很不优雅。这里,我们用另一种面向对象的思维来看待这个问题。
首先,我们观察:验证的代码只有两个地方在改变,form的域和alert弹出的内容,所以我们这里就将其抽象出来:
function FormFiled(filename,desc) { this.name = name; this.desc = desc; } |
然后我在用组装字符串的方法来验证:
function validate() { var list = new Array( new FormFiled(“name”,“名称”), new FormFiled(“password”,“密码”), ) for ( var i=0;i<list.length;i++) { //这里组装一个字符串,相当于value = form.name.value var value = eval( "form." +list[i].name+ ".value" ); if (value== null || value= "" ) { alert(list[i].desc+ "不能为空" ); return false ; } } return true ; } |
用以上方法来验证的话,增加表单域的验证的时候,只需要在list中添加一些对象就可以了,这样就可以大大减少代码量,页面代码也更优雅。
优化表单数据的JS校验的更多相关文章
- 15 款优化表单的 jQuery 插件
网页上的表单提供给用户的一种交互的方式,用户输入数据,提交到服务器,等待后续的处理.这些表单在我们浏览的网页中随处可见,也容易被我们忽略. 比如,“联系我们”页面会提供一个表单给用户填写他们的信息和想 ...
- Java工作流引擎表单引擎之JS表单字段输入脚本验证
关键字: 表单设计器, 字段验证. workflow,ccform, ccBPM. 工作流快速开发平台 工作流流设计 业务流程管理 asp.net 开源工作流bpm工作流系统 java工作流 ...
- jQuery Validate 表单验证插件----自定义校验结果样式
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
- json化表单数据
/** * josn化表单数据 * @name baidu.form.json * @function * @grammar baidu.form.json(form[, replacer]) * @ ...
- 如何发送HTML表单数据
多数时候,HTML表单的目的只是为了把数据发给服务器,之后服务器再处理这些数据并发送响应给用户.虽然看起来挺简单的,但我们还是得注意一些事情以确保传送的数据不会破坏服务器.或者给你的用户制造麻烦. 数 ...
- 传统 HTML 表单数据的“整存整取”
在日常开发中,涉及表单的处理司空见惯.过往,在取值和赋值的过程中,借助 jQuery 常常只是逐个控件进行操作,可惜这样开发效率并不高.那么能不能批量获取整个表单的值呢,以及批量为表单赋值. 一.取值 ...
- Ajax在jQuery中的应用 (4)向jsp提交表单数据
ajax技术带给我们的是良好的用户体验,同时,使用jquery可以简化开发,提高工作效率. 下面就介绍一下大致的开发步骤. 工具/原料 本文中使用的是 jquery-1.3.2.min.js 方法/步 ...
- JavaScript实现ajax发送表单数据
知识点: 1.重置表单数据 2.获取表单数据(纯JavaScript) 3.设置表单数据(纯JavaScript) 4.ajax发送数据到客户端 (1)设置请求头,自己组合数据 (2)实例化表单对象, ...
- Koa 提交和接收 JSON 表单数据
来自 url 中的 query 参数可直接通过 context.query 获取,但 POST 方式提交的表单数据则需要借助中间件的解析来完成,比如 koa-bodyparser. 首先准备好一个表单 ...
随机推荐
- permission denied for window type 2003
今天在做系统悬浮窗的时候出现权限拒绝,类型是2003,这里要说下,做系统悬浮窗需要申请权限,6.0以上的 还需要动态申请下,这里我就不过多描述了, 我在申请完权限后仍然不行,这里主要是出现在了这个类型 ...
- Python学习_06_文件、IO
文件对象 python中的文件操作和c语言比较类似,包括一些缓冲.偏移量的方式. 文件对象可以通过open().file()两个内建方法创建,两个方法并没有什么不同,使用方法和c语言中的fopen() ...
- Vue 爬坑之路(九)—— 用正确的姿势封装组件
迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作 通用组件必须具备高性能.低耦合的特性 为了满 ...
- Linux下查找文件的方法
在Linux环境下查找一个文件的方法:find 路径 -name 'filename',filename不清楚全名的话可以用*号进行匹配,如“tomcat.*”.如果不清楚路径的话可以用"/ ...
- 在commons-lang3包中StringUtils类的ordinalIndexOf中有一个错误
* StringUtils.ordinalIndexOf(null, *, *) = -1 * StringUtils.ordinalIndexOf(*, null, *) = -1 * String ...
- angular4.0运行在微信端的坑坑洼洼
最近的一个项目,我用ng4操刀,踩了超多的坑: 坑1:项目build后,刷新后404错误: 解决方案:<angular4.0项目build发布后,刷新页面报错404> 坑2:微信分享: 运 ...
- switchery按钮使用
1.先引入switchery.css 和 switchery.js 2.绘制 checkbox按钮 : a.静态页面写法 未选中时 <input type="checkbox&quo ...
- sqlserver资源
1.数据库“高可用性”和“灾难恢复”技术 参考: niyi0318的专栏
- Spring_Spring与AOP
一.传统编程使用代理解决目标类增强问题 //主业务接口 public interface ISomeService { // 目标方法 void doFirst(); // 目标方法 void doS ...
- python 3.x 与2.x的区别
前言 保持学习的态度,学一门动态语言其实是很早以前的就准备要做的事情,当时还在纠结python与ruby.现在不单单是要学python,还在考虑用它做点什么,这些等后续再说吧,因为看的是python2 ...