在平常的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校验的更多相关文章

  1. 15 款优化表单的 jQuery 插件

    网页上的表单提供给用户的一种交互的方式,用户输入数据,提交到服务器,等待后续的处理.这些表单在我们浏览的网页中随处可见,也容易被我们忽略. 比如,“联系我们”页面会提供一个表单给用户填写他们的信息和想 ...

  2. Java工作流引擎表单引擎之JS表单字段输入脚本验证

    关键字: 表单设计器, 字段验证. workflow,ccform, ccBPM. 工作流快速开发平台  工作流流设计  业务流程管理   asp.net 开源工作流bpm工作流系统  java工作流 ...

  3. jQuery Validate 表单验证插件----自定义校验结果样式

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...

  4. json化表单数据

    /** * josn化表单数据 * @name baidu.form.json * @function * @grammar baidu.form.json(form[, replacer]) * @ ...

  5. 如何发送HTML表单数据

    多数时候,HTML表单的目的只是为了把数据发给服务器,之后服务器再处理这些数据并发送响应给用户.虽然看起来挺简单的,但我们还是得注意一些事情以确保传送的数据不会破坏服务器.或者给你的用户制造麻烦. 数 ...

  6. 传统 HTML 表单数据的“整存整取”

    在日常开发中,涉及表单的处理司空见惯.过往,在取值和赋值的过程中,借助 jQuery 常常只是逐个控件进行操作,可惜这样开发效率并不高.那么能不能批量获取整个表单的值呢,以及批量为表单赋值. 一.取值 ...

  7. Ajax在jQuery中的应用 (4)向jsp提交表单数据

    ajax技术带给我们的是良好的用户体验,同时,使用jquery可以简化开发,提高工作效率. 下面就介绍一下大致的开发步骤. 工具/原料 本文中使用的是 jquery-1.3.2.min.js 方法/步 ...

  8. JavaScript实现ajax发送表单数据

    知识点: 1.重置表单数据 2.获取表单数据(纯JavaScript) 3.设置表单数据(纯JavaScript) 4.ajax发送数据到客户端 (1)设置请求头,自己组合数据 (2)实例化表单对象, ...

  9. Koa 提交和接收 JSON 表单数据

    来自 url 中的 query 参数可直接通过 context.query 获取,但 POST 方式提交的表单数据则需要借助中间件的解析来完成,比如 koa-bodyparser. 首先准备好一个表单 ...

随机推荐

  1. permission denied for window type 2003

    今天在做系统悬浮窗的时候出现权限拒绝,类型是2003,这里要说下,做系统悬浮窗需要申请权限,6.0以上的 还需要动态申请下,这里我就不过多描述了, 我在申请完权限后仍然不行,这里主要是出现在了这个类型 ...

  2. Python学习_06_文件、IO

    文件对象 python中的文件操作和c语言比较类似,包括一些缓冲.偏移量的方式. 文件对象可以通过open().file()两个内建方法创建,两个方法并没有什么不同,使用方法和c语言中的fopen() ...

  3. Vue 爬坑之路(九)—— 用正确的姿势封装组件

    迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作 通用组件必须具备高性能.低耦合的特性 为了满 ...

  4. Linux下查找文件的方法

    在Linux环境下查找一个文件的方法:find 路径 -name 'filename',filename不清楚全名的话可以用*号进行匹配,如“tomcat.*”.如果不清楚路径的话可以用"/ ...

  5. 在commons-lang3包中StringUtils类的ordinalIndexOf中有一个错误

    * StringUtils.ordinalIndexOf(null, *, *) = -1 * StringUtils.ordinalIndexOf(*, null, *) = -1 * String ...

  6. angular4.0运行在微信端的坑坑洼洼

    最近的一个项目,我用ng4操刀,踩了超多的坑: 坑1:项目build后,刷新后404错误: 解决方案:<angular4.0项目build发布后,刷新页面报错404> 坑2:微信分享: 运 ...

  7. switchery按钮使用

    1.先引入switchery.css 和 switchery.js 2.绘制 checkbox按钮 : a.静态页面写法  未选中时 <input type="checkbox&quo ...

  8. sqlserver资源

    1.数据库“高可用性”和“灾难恢复”技术 参考: niyi0318的专栏

  9. Spring_Spring与AOP

    一.传统编程使用代理解决目标类增强问题 //主业务接口 public interface ISomeService { // 目标方法 void doFirst(); // 目标方法 void doS ...

  10. python 3.x 与2.x的区别

    前言 保持学习的态度,学一门动态语言其实是很早以前的就准备要做的事情,当时还在纠结python与ruby.现在不单单是要学python,还在考虑用它做点什么,这些等后续再说吧,因为看的是python2 ...