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. 第十七章，txt文件的写入和读取数据结合练习（C++）

    #include <iostream> #include <fstream> int main(int argc, char** argv) { std::string str ...

  2. [AngularJS] Lazy loading Angular modules with ocLazyLoad

    With the ocLazyLoad you can load AngularJS modules on demand. This is very handy for runtime loading ...

  3. ViewGroup源码部分解析

    ViewGroup的官方解析是: A <code>ViewGroup</code> is a special view that can contain other views ...

  4. iOS开发——语法篇OC篇&高级语法精讲

    高级语法精讲 一.NSSet.NSMutableSet集合的介绍 1)NSSet.NSMutableSet集合,元素是无序的,不能有重复的值. 2)用实例方法创建一个不可变集合对象 例如: //宏定义 ...

  5. Ruby on Rails Tutorial 第六章 用户模型

    1.用户模型(1)数据库迁移Rails默认使用关系数据库存储数据,数据库中的表有数据行组成,每一行都有相应的列,对应数据属性.把列名命名为相应的名字后,ActiveRecord会自动把他们识别为用户对 ...

  6. 高级I/O之存储映射I/O

    存储映射I/O(Memory-mapped I/O)使一个磁盘文件与存储空间中的一个缓冲区相映射.于是当从缓冲区中取数据,就相当于读文件中的相应字节.与此类似,将数据存入缓冲区,则相应字节就自动地写入 ...

  7. memcache 存储session

    php使用memcache存储session   http://blog.csdn.net/weilee2009/article/details/7658260

  8. 小白日记10：kali渗透测试之端口扫描-UDP、TCP、僵尸扫描、隐蔽扫描

    端口扫描 二三四层发现的目的只是为了准确发现所有活着主机IP,确定攻击面,端口扫描即发现攻击点,发现开放端口.端口对应网络服务及应用端程序,服务端程序的漏洞通过端口攻入.[所有的扫描结果,都不要完全相 ...

  9. Android SQLite 数据库详细介绍

    Android SQLite 数据库详细介绍 我们在编写数据库应用软件时,需要考虑这样的问题:因为我们开发的软件可能会安装在很多用户的手机上,如果应用使用到了SQLite数据库,我们必须在用户初次使用 ...

  10. [Oracle AR]Territory Flexfield

    You can use the Territory Flexfield for recording and customized reporting on your territory informa ...