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. [AngularJS] Build Your Own ng-controller Directive

    /** * Created by Answer1215 on 12/21/2014. */ angular.module('app', []) .controller('FirstCtrl' , fu ...

  2. iOS开发——混编Swift篇&OC移植为swift

    将Ojective-C代码移植转换为Swift代码 2015-03-09 15:07发布:yuhang浏览:201   相比于Objective-C,Swift语言更加简练.有时我们需要把原来写的一些 ...

  3. mydumper原理3

    Mydumper介绍 Mydumper是一个针对MySQL和Drizzle的高性能多线程备份和恢复工具.开发人员主要来自MySQL,Facebook,SkySQL公司.目前已经在一些线上使用了Mydu ...

  4. discuz2.0升级后不能自动跳转问题

    /static/js/admincp.js文件有问题,重新覆盖,在后台:运营->更新缓存就ok了

  5. You Need This One Skill to Succeed in IT--reference

    The ability to program in five languages, including one machine-level? Not it. Project management sk ...

  6. 使用cocos2d-x制作 Texture unpacker

    使用cocos2d-x制作 Texture unpacker 没错,就是unpacker. 在大多数游戏包里面,可以找到很多纹理图集,他们基本上是用texture packer制作的,有plist文件 ...

  7. oracle--varchar2

    1. varchar2列最多占用4000字节,但是能容纳多少字符就不一定了 使用sql查看字符集: select userenv('language') from dual;--select * fr ...

  8. 关于JDK中的集合总结(二)

    1.2版本的JDK才出现的java集合框架. 下面介绍说一下Vector的一些特点. import java.util.Enumeration; import java.util.Iterator; ...

  9. GDB调试器简介

     Linux系统中包含了GNU 调试程序gdb,它是一个用来调试C和 C++ 程序的调试器.可以使程序开发者在程序运行时观察程序的内部结构和内存的使用情况. GDB提供了一下一些功能: (1)监视程序 ...

  10. Scala官方作弊条

    Scala官方作弊条请参考:http://docs.scala-lang.org/cheatsheets/