HTML页面代码：

 <!doctype html>

 <html lang="en">

  <head>

   <meta charset="UTF-8">

   <meta name="Generator" content="EditPlus®">

   <meta name="Author" content="">

   <meta name="Keywords" content="">

   <meta name="Description" content="">

   <title>Document</title>

   <script type="text/javascript" src="04.js" charset="GBK"></script>

  </head>

  <body>

   <!--

   访问表单节点的元素

   输入校验

   -->

   <form action="" id="a">

      <br/>

      姓名：<input id="" name="name" type="text" ><br/>

      密码：<input id="" name="pass" type="text"/><br/>

      年龄：<input id="" name="age" type="text"/><br/>

      <input id="" name="" type="button" value="检查" onclick="checkForm();"/>

   </form>

   <script type="text/javascript">

      var checkForm = function () {

        //指明要各个字段要校验的规则

          check ("a" , {

             "name":"required",   //必填

             "pass":{type:"regex",expr:/\w{4,8}/}, //符合指定的正则表达式，这里正则表达式的规则是字符长度要在4到8之间

             "age":"int" //输入的必须为整数

         });

      }

   </script>

  </body>

 </html>

04.js代码：

 //为String添加一个去除空格的方法：

 String.prototype.trim = function(){

     return this.replace(/^\s+/,"").replace(/\s+$/,"");

 }

 //错误信息对象

 var errMsg = {

   "required":"必须填写",

    "int":"必须是一个整数",

    "regex":"必须符合要求的格式"

 }

 var check = function(formid , fields)  //fields 参数的形式：{表单控件：要满足的规则}

 {

     var errResult = "";

     var targetForm = document.getElementById(formid);

     //fieldName一次代表fields对象里的每个key

     for (var fieldName in fields )

     {

         //alert(fieldName);

         //根据表单的控件的名称来获取相应的表单控件的值

         var fieldValue = targetForm.elements[fieldName].value;

         //alert(fieldValue);

         //获取每个表单域应该满足的规则

         var rule =   fields[fieldName];  //rule可能是字符串或者json对象

         //如果规则是字符串

         if(typeof rule == "string")

         {

             switch(rule)

             {

                 case "required":

                     if(!fieldValue || fieldValue.trim() == "")

                     {

                         errResult += ( fieldName + " :" +errMsg["required"]+"\n") ;

                     }

                     break;

                 case "int":

                     if(fieldValue && fieldValue!=null && fieldValue.trim() != "")

                     {

                         if (isNaN(parseInt(fieldValue)))  //如果不是整数

                         {

                             errResult += ( fieldName + " :" +errMsg["int"]+"\n") ;

                         }

                     }

                     else

                         {

                          errResult += ( fieldName + " :" +errMsg["required"]+"\n") ; //"int"校验也必须为必填

                     }

                     break;

             }

         }

         //为json对象

         else

         {

             switch(rule.type)

             {

                 case "regex":

                     if(fieldValue && fieldValue!=null && fieldValue.trim() != "")

                     {

                         var reg = eval(rule.expr);  //将字符串转为正则表达式

                         var result = reg.exec(fieldValue);//执行正则表达式，得到结果

                         if(!result)

                         {

                             errResult += ( fieldName + " :" +errMsg["regex"]+"\n") ;

                         }

                     }

                     else

                     {

                         errResult += ( fieldName + " :" +errMsg["required"]+"\n") ;

                     }

                     break;

             }

         }

     }

     //显示错误信息

     if(errResult != "")

     {

        alert(errResult);

     }

 }

结果：

使用JavaScript实现简单的输入校验的更多相关文章

  1. JavaWeb框架_Struts2_(六)----->Struts2的输入校验

    1. 输入校验章节目录 输入校验概述 客户端校验 服务器端校验 手动编程校验 重写validate方法 重写validateXxx()方法 输入校验流程 校验框架校验 Struts2 内置的校验器 常 ...

  2. Struts 2（五）：输入校验 & 校验框架

    第一节 Struts2输入校验 1.1 输入校验的重要性 输入校验分为客户端校验和服务器端校验.客户端校验用来过滤用户的错误操作,一般使用JavaScript代码实现.服务器端校验用来防止非法用户的恶 ...

  3. （十三）struts2的输入校验

    输入校验是web应用必须处理的问题,要防止用户的误输入和恶意非法输入.struts2给我们提供了非常强大的输入校验体系. 输入校验分为客户端校验和服务器端校验.一般开发中两者都用,但是服务端校验必须使 ...

  4. Struts2的输入校验（1）——校验规则文件的编写

    Struts2的输入校验(1) --校验规则文件的编写 Struts2提供了基于验证框架的输入校验,所有的输入校验只要编写配置文件,Struts2的验证框架将会负责进行服务器校验和客户端校验. 注: ...

  5. Struts2的输入校验

    一.Struts2提供了基于验证框架的输入校验,在这种校验方式下,所有的输入校验只需要编写简单的配置文件,Struts2的验证框架将会负责进行服务器校验和客户端校验. 校验失败后将Struts2将自动 ...

  6. Struts2输入校验

    1.编写校验规则文件 (<ActionName>-validation.xml),文件放在Action类文件相同的路径下校验失败返回input的result.       <vali ...

  7. 【Struts2学习笔记（11）】对action的输入校验和XML配置方式实现对action的全部方法进行输入校验

    在struts2中,我们能够实现对action的全部方法进行校验或者对action的指定方法进行校验. 对于输入校验struts2提供了两种实现方法: 1. 採用手工编写代码实现. 2. 基于XML配 ...

  8. Struts2框架(8)---Struts2的输入校验

    Struts2的输入校验 在我们项目实际开发中在数据校验时,分为两种,一种是前端校验,一种是服务器校验: 客户端校验:主要是通过jsp写js脚本,它的优点很明显,就是输入错误的话提醒比较及时,能够减轻 ...

  9. struts2（四）之输入校验

    前言 这个本来是昨天就写好的,但是不知道为什么没有保存成功!但是今天起来再写一遍就当巩固一下知识吧. 一.输入校验概述 在以前我们写一个登录页面时,并没有限制用户的输入,不管用户输入什么,我们都存入数 ...

随机推荐

  1. mysql_upgrade命令

    mysql 创建存储过程失败.查看错误日志,发现如下信息:*********************************************************************** ...

  2. Online DDL与pt-online-schema-change

    http://seanlook.com/2016/05/24/mysql-online-ddl-concept/ http://seanlook.com/2016/05/27/mysql-pt-onl ...

  3. LINUX 内核文档地址

    Linux的man很强大,该手册分成很多section,使用man时可以指定不同的section来浏览,各个section意义如下: 1 - commands2 - system calls3 - l ...

  4. Ruby on Rails Tutorial 第二章 之 toy_app项目搭建

    (第一章小结) 第一步:生成项目骨架 $ rails _4.1.6_ new toy_app 第二步:修改Gemfile 第三步:安装gem $ bundle install --without pr ...

  5. oracle 直接客户端使用

    到oracle网站下载直接客户端,http://www.oracle.com/technology/software/tech/oci/instantclient/htdocs/winsoft.htm ...

  6. 带约束优化问题 拉格朗日 对偶问题 KKT条件

    转自:七月算法社区http://ask.julyedu.com/question/276 咨询:带约束优化问题 拉格朗日 对偶问题 KKT条件 关注 | 22 ... 咨询下各位,在机器学习相关内容中 ...

  7. hadoop实例---多表关联

    多表关联和单表关联类似,它也是通过对原始数据进行一定的处理,从其中挖掘出关心的信息.如下 输入的是两个文件,一个代表工厂表,包含工厂名列和地址编号列:另一个代表地址表,包含地址名列和地址编号列.要求从 ...

  8. C#加密算法汇总(转载)http://www.cnblogs.com/zengxiangzhan/archive/2010/01/30/1659687.html

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 方法一:     //须添加对System.Web的引用    ...

  9. Python刷票小脚本——网络人气奖？不好意思，我要了

    零.前言 最近参加微软的kinect大赛,报名之后发现有一个网络投票,票数最多的项目可以得到网络人气奖. 这种事,必然是要搞一搞! 说干就干. 说明:由于本人过于懒惰,所以就不截图了,让大家失望了! ...

  10. python(1) - 字符串

    前面说过了,字符串也是一种数据类型,但字符串有一个特殊的问题,就是编码. 因为计算机是美国人发明的,所以最早只有127个字符被编码到计算机里,就是大小写英文字母,数字和一些符号,这个编码表被称为ASC ...