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. Android Service AIDL 远程调用服务 【简单音乐播放实例】

    Android Service是分为两种: 本地服务(Local Service): 同一个apk内被调用 远程服务(Remote Service):被另一个apk调用 远程服务需要借助AIDL来完成 ...

  2. Linux rsync 同步实践

    目录[-] 1. rsync 同步的大致思路 2. rsync的安装 3. rsync的配置 4. rsync的基本操作 服务器端启动 注2. 实时同步 注3. rsync通过linux防火墙 公司网 ...

  3. 云计算平台(检索篇)-Elasticsearch

    前段时间为公司基于Elasticsearch(下面简称ES)做了一套检索平台,下面将这段时间积累的一些知识与大家分享,如有不对之处,欢迎大家多多批评与建议.针对Elasticsearch由于东西还是比 ...

  4. day06 Java面向对象

    1.对象内存图 (1)1个对象的内存图:一个对象的基本初始化过程 (2)2个对象的内存图:方法的共用 (3)3个对象的内存图:其中有两个引用指向同一个对象

  5. 刚安装完jdk和eclipse需要配置什么？

    还需要配置环境变量,你还要下载 apache-tomcat WEB服务器,也就是说 系统能找到你的 服务器,具体配置:(在windows桌面上右击“我的电脑” —> “属性” —> “高级 ...

  6. 批处理DataTable

    DataTable dt = CreateTable(); SqlConnection conn = new SqlConnection("Data Source=.;Initial Cat ...

  7. TCP/IP协议原理与应用笔记18：构成子网和超网

    1. 引言: (1)类别IP编址(Classful IP)的缺陷 • 固定的3种IP网络规模      C类地址:少于255台主机的网络      B类地址:介于255~65535台主机的网络     ...

  8. ASP.NET MVC and jqGrid 学习笔记 5-添加数据

    据介绍,jqgrid有3种编辑数据的方式: Cell Editing 只允许修改某一个单元格内容 Inline Editing 允许在jqGrid中直接修改某一行的数据 Form Editing 弹出 ...

  9. Python Thread

    lock 对象: acquire():负责取得一个锁.如果没有线程正持有锁,acquire方法会立刻得到锁.否则,它闲意态等锁被释放. 一旦acquire()返回,调用它的线程就持有锁. releas ...

  10. 编写一个单独的Web Service for Delphi

    早段时间看了一篇好文章,对其整理成以下几步 1新建一个SOAP Server Application,在提示输入接口时输入MyHello,把所有文件保存在一个叫Ser的目录下,其中一个包含TWebMo ...