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. 关于flash player debugger 无法弹窗报错的解决办法

    第一个是IE的插件, Download the Windows Flash Player 10.2 ActiveX control content debugger (for IE) (EXE, 2. ...

  2. Java_eclipse软件与git配合使用创建git仓库

    一.在eclipse上安装git,和安装其他插件一样 help->Install new software->add... 在弹出框中输入name,location;点击-->ok ...

  3. java_类承继其他类的内部类例子

    package ming; class Outer { class In { public In(String msg) { System.out.println(msg); } } } public ...

  4. 为laravel分页样式制定class

    做的项目有一个上翻页和下翻页,使用了框架提供的

  5. 一天一个mysql函数(二） FIND_IN_SET()

    in和FILD_IN_SET() 的区别: select id, list, name from table where FIND_IN_SET( 'daodao' , list) 所以如果list是 ...

  6. 关于通过adb启动Activity、activity、service以及发送broadcast的命令

    一.启动activity: $ adb shell$ am start -n {包名}/{包名}.{活动名称} 如:启动一个名叫MainActivity的活动 # am start -n com.ex ...

  7. ESX虚拟机文件列表详解

    http://jackiechen.blog.51cto.com/196075/210492 关闭状态时的文件列表: *-flat.vmdk:虚拟机的原始磁盘文件,包含整个虚拟机镜像.   *.nvr ...

  8. Ubuntu 下安装VNC server

    尽管我们在大部分情况下用ssh登录Ubuntu服务器就好了,但是有时候我们的程序需要在图形界面下运行,这时我们就要用到vnc server这个软件了.在Ubuntu下安装vnc server很简单的, ...

  9. A very hard Aoshu problem

    A very hard Aoshu proble Problem Description Aoshu is very popular among primary school students. It ...

  10. ASP.NET MVC and jqGrid 学习笔记 1-基本配置

    新建一个mvc项目后