javascript 页面验证

最新推荐文章于 2024-01-06 11:24:48 发布
最新推荐文章于 2024-01-06 11:24:48 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： javascript 文章标签： javascript 正则表达式 null button border div

//=================CurrencyAjax0.1===========================
/*

名     称：   PageValidator
版     本：   0.1
作     者：   杜庆明
修改日期：   2007年5月30日

作     用：  
             对页面上的用户输入的数据进行验证

主     类：
             控件获得焦点时执行：
                             getOnFocus(control, msg)
                            
             控件失去焦点时执行：
                             RegularExpressionValidator(control,regularType,msgError,msgOK,msgRequired)
                            
             专门为重复输入密码而写的：
                             CompareValidator(controlUI1, controlUI2, compare, msgOK, msgError, must)
            
             专门为验证用户名而写的：(其中要用的CurrencyAjax.js文件做为ajax发送验证请求)                            
                             ValidatorUserName(control,regularType,msgError,msgOK,msgRequired)

使用方法：
             请看下面的说明
            
注意：
      1.要用的CurrencyAjax.js文件做为ajax发送验证请求.
      2.此文件必须的CSS样式文件
       // 默认灰色  
      .explain_gray {
          color: #999999;   //   边框 下  
          padding-top: 3px;    //    
          padding-right: 3px;    //    
          padding-left: 3px;    //    
          padding-bottom: 3px;   //   背景颜色  
          overflow: hidden;    //    
          width: 420px;    //   宽  
          height: 30px   //   高   ;
          font-size: 12px;
          font-style: italic;
          text-decoration: blink;
          background-color: #EEEEEE;
          border: 1px solid #999999;
          }
     
      // 获得焦点  
      .explain_blue {
       color: #5555FF;   //   边框 下  
       padding-top: 3px;    //    
       padding-right: 3px;    //    
       padding-left: 3px;    //    
       padding-bottom: 3px;   //   背景颜色  
       overflow: hidden;    //    
       width: 420px;    //   宽  
       height: 30px   //   高   ;
       background-color: #EEEEFF;
       border: 1px solid #5555FF;
       }
      
      // 验证错误  
      .explain_red {
       color: red;
       BORDER-RIGHT: #ff7b67 1px solid;
       PADDING-RIGHT: 3px;
       BORDER-TOP: #ff7b67 1px solid;
       PADDING-LEFT: 3px;
       BACKGROUND: #feeeed;
       PADDING-BOTTOM: 3px;
       OVERFLOW: hidden;
       BORDER-LEFT: #ff7b67 1px solid;
       WIDTH: 420px;   
       PADDING-TOP: 3px;
       BORDER-BOTTOM: #ff7b67 1px solid;
       HEIGHT: 30px
       }
      
      // 验证通过  
      .explain_pass {
       color: #32A2B1;  
          padding-top: 3px;   
          padding-right: 3px;   
          padding-left: 3px;   
          padding-bottom: 3px;
          overflow: hidden;   
          width: 420px;   
          height: 30px;
          font-style: oblique;
          background-color: #EDF9FA;
          border: 1px solid #38b5c7;
       }
*/
//==================================================== 代码部分 ======================================================
var json={
     "error":null
}

// 根据参数返回一个政则表达式
function getRegExpStr(regString)
{
     var regExp = "";
     switch(regString)
     {
         case 'reg_userName':     regExp = /^[a-zA-Z][a-zA-Z0-9_]{4,19}$/; break;   //用户名
         case 'reg_passWord':     regExp = /[/w]{4,14}$/; break; //密码
         case 'reg_realName':     regExp = /^[/u4E00-/u9FA0][/u4E00-/u9FA0]{1,15}$/; break; //真实姓名            
         case 'reg_email':        regExp = /^[_a-z0-9-]+(/.[_a-z0-9-]+)*@[a-z0-9-]+(/.[a-z0-9-]+)*$/; break;   //电子邮件地址
         // case 'reg_email':        regExp = //w+@/w+/.[a-z]+/; break;   //电子邮件地址 比较宽松
         case 'reg_cardid':       regExp = /^[1-9][0-9]{14,17}$/; break;     //身份证号
         //case 'reg_time':         regExp = //; break;   //
         case 'reg_date':         regExp = /((^((1[8-9]/d{2})|([2-9]/d{3}))([-///._])(10|12|0?[13578])([-///._])(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]/d{2})|([2-9]/d{3}))([-///._])(11|0?[469])([-///._])(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]/d{2})|([2-9]/d{3}))([-///._])(0?2)([-///._])(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)([-///._])(0?2)([-///._])(29)$)|(^([3579][26]00)([-///._])(0?2)([-///._])(29)$)|(^([1][89][0][48])([-///._])(0?2)([-///._])(29)$)|(^([2-9][0-9][0][48])([-///._])(0?2)([-///._])(29)$)|(^([1][89][2468][048])([-///._])(0?2)([-///._])(29)$)|(^([2-9][0-9][2468][048])([-///._])(0?2)([-///._])(29)$)|(^([1][89][13579][26])([-///._])(0?2)([-///._])(29)$)|(^([2-9][0-9][13579][26])([-///._])(0?2)([-///._])(29)$))/; break;   //日期 2006-12-4 YYYY/MM/DD YYYY_MM_DD YYYY.MM.DD
         case 'reg_telephone':    regExp = //d{3}-/d{8}|/d{4}-/d{7}$/; break;     //电话　010-68728701  
         case 'reg_callphone':    regExp = /^[1][0-9]{10}$/; break;     //手机号码
         case 'reg_qq':           regExp = /^[1-9][0-9]{4,15}$/; break;     //Tencen QQ 号码
         case 'reg_www':          regExp = /(?:(?:http[s]?|ftp):)?[^///.]+?/.[^/.]+?/./w{2,}$/i; break;     //网址
         case 'reg_enchar':          regExp = /[a-zA-Z][a-zA-Z0-9_]{4,19}$/;; break;     //可以包含数字、字母
         default:                 regExp = "";
     }
     return regExp;    
}
/**
* 当控件获得焦点时提示用户输入
*
* control:   当前控件，一般为"this"即可
* msg:       控件获得焦点时高亮显示的内容   
*
* 使用实例：
*       οnfοcus="getOnFocus(this,'用户名必须以4-20 个字符 (仅限大小写字母,数字,下划线等)组成，注册后不可修改。')"
*
*/
function getOnFocus(control, msg)
{
var controlId = control.id;
if(controlId==null || controlId=="")
{
   controlId = control.name;
}
//alert(controlId);
if(controlId!=null && controlId!="")
{
   var controlDiv = document.getElementById(controlId+"Div");//取得要更改样式和控件  
   if(controlDiv==null)
   {
    alert("在本页面中没有找到“id”或“name”属性为：“" + controlId + "Div" + "”的控件。");
   }
   else
   {
    controlDiv.className="explain_blue";
    if(msg!=null && msg!="")
    {
     controlDiv.innerHTML = msg;
    }
   }
}
else
{
   alert("在本页面中没有找到“id”或“name”属性为：“" + control.id + " " + control.name + " ”的控件。");
}
}
/**
*
* 用一个正则表达式去验证值是否匹配
* control:      要验证的控件
* regularType: 验证时要有的正则表达式
* msgError:     验证错误时显示的内容
* msgOK:        验证通过时显示的内容
* msgRequired: 如果用户没有输入内容时显示的信息
*
* 使用实例：
*　     οnblur="RegularExpressionValidator(this,
*                                         'reg_date',
*                                         '出生日期格式不正确,请重新输入正确的出生日期',
*                                         '出生日期格式验证通过',
*                                         '出生日期不能为空');"
*
*/
function RegularExpressionValidator(control,regularType,msgError,msgOK,msgRequired)
{
     regular = getRegExpStr(regularType);
var controlId = control.id;
if(controlId==null||controlId=="")
{
   controlId = control.name;
}
var controlDiv = document.getElementById(controlId+"Div");//取得要更改样式的控件
var controlValue = control.value;
     if(regular == "")
     {
         //alert("您输入的正则表达式“"+ regularType +"”不正确，请输入正确的验证表达式！");
         controlDiv.className="explain_gray";
         return false;
     }
//判断控件是否存在　如果不存在弹出对话框提示用户
if(controlDiv==null)
{
   alert("RegularExpressionValidator(control,regular,msgError,msgOK,msgRequired)“"+controlId+"Div"+"”不存在");
}

if(controlValue!="")
{
   if (regular.exec(controlValue))
   {
    //验证通过
    controlDiv.className="explain_pass";
    //alert(controlDiv.className);
    if(msgOK!="")
    {
           controlDiv.innerHTML = "<img alt='恭喜！' src='images/ico_face_green.gif' />&nbsp;&nbsp;" + msgOK;
       }
       else
       {
           controlDiv.innerHTML = "<img alt='恭喜！' src='images/ico_face_green.gif' />&nbsp;&nbsp;数据格式验证通过";
       }
       return true;
   }
   else
   {
    //验证未通过
    controlDiv.className="explain_red";
    if(msgError!="")
    {
           controlDiv.innerHTML = "<img alt='对不起！' src='images/ico_face_red.gif' />&nbsp;&nbsp;" + msgError;
       }
       else
       {
           controlDiv.innerHTML = "<img alt='对不起！' src='images/ico_face_red.gif' />&nbsp;&nbsp;数据格式不正确,请重新填写";
          
       }
       json.error = controlDiv;
       return false;
   }
}
else if(msgRequired!=null)
{
   //不能为空
   controlDiv.className="explain_red";
   if(msgRequired!="")
   {
       controlDiv.innerHTML = "<img alt='对不起！' src='images/ico_face_red.gif' />&nbsp;&nbsp;" + msgRequired;
   }
   else
   {
       controlDiv.innerHTML = "<img alt='对不起！' src='images/ico_face_red.gif' />&nbsp;&nbsp;此项不能为空";
   }
   json.error = controlDiv;
   return false;
}
else if(msgRequired==null)
{
      controlDiv.className="explain_gray";
         return false;
}
}
/**
*
* 两个控件的值相比较
* controlUI1　比较的第一个控件
* controlUI2　比较的第二个控件
* compare　比较的操作符
* msgOK　当比较通过时显示的提示信息
* msgError   当比较未通过时显示的提示信息
* must 当有控件值为空时是否进行比较
*
* 使用实例：
*           οnblur="RegularExpressionValidator(this,'reg_passWord',
*                                '密码的长度最少4个字符但不超过15个字符,不能包含除字母、数字和下划线以外的字符',
*                                '密码格式验证通过',
*                                '密码不能为空')"
*
*
*/
function CompareValidator(controlUI1, controlUI2, compare, msgOK, msgError, must)
{
      var value1 = document.getElementById(controlUI1).value;
      var value2 = document.getElementById(controlUI2).value;
      var controlDiv = document.getElementById(controlUI2+"Div");//取得要更改样式的控件
      var compareResult = false;
     
      if(!must)
      {
          if(value1 == "" || value2 == "")
          {
              return;　//如果不是必须的，当第三个值为空时不再判断两个值是否相等
          }
      }
      else
      {
         if(value1 == "" || value2 == "")
          {
             controlDiv.className="explain_red";
          controlDiv.innerHTML = "<img alt='对不起！' src='images/ico_face_red.gif' />&nbsp;&nbsp;"+msgError;
             return;　//如果不是必须的，当第三个值为空时不再判断两个值是否相等
          }
      }
      //alert(value1+"---"+compare+"---"+value2);
      if(compare == "==")
      {
          if(value1 == value2)
          {
               compareResult = true;
          }
          else
          {
              compareResult = false;
          }
      }
      else if(compare == ">")
      {
          if(value1 > value2)
          {
               compareResult = true;
          }
          else
          {
              compareResult = false;
          }
      }     
      else if(compare == "<")
      {
          if(value1 < value2)
          {
               compareResult = true;
          }
          else
          {
              compareResult = false;
          }
      }
      else if(compare == ">=")
      {
          if(value1 >= value2)
          {
               compareResult = true;
          }
          else
          {
              compareResult = false;
          }
      }     
      else if(compare == "<=")
      {
          if(value1 <= value2)
          {
               compareResult = true;
          }
          else
          {
              compareResult = false;
          }
      }    
      else if(compare == "!=")
      {
          if(value1 != value2)
          {
               compareResult = true;
          }
          else
          {
              compareResult = false;
          }
      }
     
      // 比较是否相等
      if(compareResult)
      {
          controlDiv.className="explain_pass";
          controlDiv.innerHTML = "<img alt='恭喜！' src='images/ico_face_green.gif' />&nbsp;&nbsp;" + msgOK;
      }
      else
      {
          controlDiv.className="explain_red";
       controlDiv.innerHTML = "<img alt='对不起！' src='images/ico_face_red.gif' />&nbsp;&nbsp;" + msgError;
       json.error = controlDiv;           
      }
}
/**
*
* 功能介绍：
*       首先用正则表达式验证用户名的格式是否正确，
*       如果正确则调用 CurrencyAjax.startRequest 向服务器发送请求验证用户名是否已经存在
*
* 使用实例：
*        οnblur="ValidatorUserName(this,
*                           'reg_userName',
*                           '用户名格式不正确。正确的用户名应该以字母开头，可包含5-20 个字符(包括大小写字母,数字,下划线等)，注册后不可修改。',
*                           '用户名格式验证通过',
*                           '用户名不能为空');"
*
*/
function ValidatorUserName(control,regularType,msgError,msgOK,msgRequired)
{
     var controlId = control.id;
     controlDiv = document.getElementById(controlId+"Div");//取得要更改样式的控件
    
     if(RegularExpressionValidator(control,regularType,msgError,msgOK,msgRequired))
     {
         //如果格式验证通过则连接数据库查看此用户名是否已经存在
         controlDiv.className="explain_red";
         controlDiv.innerHTML = "<img src='images/guage.gif' alt='...' />&nbsp;&nbsp;正在验证用户名是否可用&nbsp;请稍后......";
         CurrencyAjax.startRequest("GET", "ValidatorUserName.aspx", "userName="+control.value, ValidatorUserNamePostback);
     }
}
var ValidatorUserNamePostback = function(resultText)
{
     alert(resultText);
     if(resultText=="have")
     {
         controlDiv.className="explain_red";
         controlDiv.innerHTML ="<img alt='对不起！' src='images/ico_face_red.gif' />&nbsp;&nbsp;真实姓名已经存在，请在真实姓名上加一个字以区分不同用户";
         json.error = controlDiv;
     }
     else if(resultText=="nohave")
     {
         controlDiv.className="explain_pass";
         controlDiv.innerHTML =" <img alt='恭喜！' src='images/ico_face_green.gif' />&nbsp;&nbsp;真实姓名验证通过";                
     }
     else
     {
         alert("从服务器返回来的数据不能识别，只能返回“have”或“nohave”");
     }
}
/**
*
* 在表间提交之后执行，可以写在用来提交表单的按钮上
*
* 功能：
*           查检 json.error 的值是否为空
*           如果不为空则查检其指向的控件的错误信息是否是显示的
*           如果显示则将错误信息弹出并取消表单的提交，否则继续提交
*
* 使用实例：
*           <asp:Button ID="bt_btUserRegister" runat="server" Text="　注册　" class="input_button" OnClick="bt_btUserRegister_Click" OnClientClick="javascript:return RegisterLoginUser()" />
*           或
*           <input type="button" οnclick="javascript:return RegisterLoginUser()" />
*
*/
function RegisterLoginUser()
{
     if(json.error!=null)
     {
         if(json.error.className="explain_red")
         {
             alert(json.error.innerText);
             json.error.focus();
             return false;
         }
     }
}

 

骑猪逛街
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
JavaScript实现验证功能
weixin_44125722的博客
08-24 349
用JavaScript实现网页用户名，密码，邮箱，手机号等验证功能 1.用户名必须填写 2.密码长度8-16之间 3.邮箱地址，手机号必须符合正确格式 4.必须同意（勾选复选框）才能提交 5.当鼠标离开输入框点击后就会出现提示 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l...
JavaScript日期验证
04-07
JavaScript是Web开发中不可或缺的一部分，尤其在处理用户输入和页面交互时。在众多的JavaScript功能中，日期验证是一项重要的任务，确保用户输入的日期符合预期的格式和逻辑。标题"JavaScript日期验证"提示我们，本...
Javascript与页面验证
成长的天空
11-04 825
     上上礼拜五台湾来的客人做演示的时候，系统突然出现了问题（非常糗）.页面参数传递出现的问题，也导致了页面验证的失败。其实本来一切都OK的。在这之前自己也做过很多测试，YC师兄之前也给我大略测试了一下，也提了一些建议（^_^）。其实后来想想，出现问题我倒不怕，咱搞技术的，说白了就是跟问题打叫道。问题来了，我把你摆平，问题不来，我硬是给你搞出来，然后再把你摆平.后来分析了下问题，发现罪
使用Validator.validateAll对所有验证控件进行验证的例子
cpb32cpb
07-01 802
　　调用 validators 数组中的所有验证程序。返回一个数组，其中包含每个失败验证程序的一个 ValidationResultEvent 对象。如果所有验证程序都成功，则返回空数组。 [b]参数: [/b] 　　[b]validators[/b] 包含要执行的 Validator 对象的数组。 　　[b]返回: [/b] 　　ValidationResultEvent 对象的...
[Page_IsValid]检验页面中的所有输入是否都合法
星空传说BLOG
03-21 1098
Page_IsValid 检验页面中的所有输入是否都合法，返回布尔值 Page_Validators  当前页面中所有验证控件所形成的一个数组 Page_ValidationActive  为一个布尔值，表明是否执行验证功能，设置为false则关闭验证功能。 Isvalid 该属性验证客户端的输入是否合法  ValidatorEnable(val, enable) 该方法将某个验证控件作为传递参数
JavaScript验证Email(3种方法)
11-24
今天为大家推荐三种JavaScript验证Email方法，希望对大家的学习有所帮助。  第一种：javascript验证邮箱格式 [removed] function isEmail(strEmail) { if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+...
用户注册页面代码javascript验证
11-06
用户注册页面代码javascript验证，主要是讲用户注册界面的设计。
JavaScript实现仿网易通行证表单验证
10-24
主要介绍了JavaScript实现仿网易通行证表单验证，十分的实用，有需要的小伙伴可以参考下。
JavaScript注册页面
11-16
注册页面前端代码，该代码实现了 用户、密码的验证，“单选框”“复选框”“重置”四个按钮能够实现对应的响应，以及通过域标记和建立一个下拉列表，列表可以显示一定数量的选项
jquery 表单验证插件
潇湘博客
07-19 1014
1、为inputValidator增加empty属性。用于设置控件文本值是否允许两边为空。具体请看demo1里的密码的校验代码。该属性是个对象，默认值{leftempty:true,rightempty:true,emptyerror:null}leftempty:表示左边是否允许为空rightempty:表示右边是否允许为空 emptyerror：出现该错误的时候的提示，如果为null，则利用o
【JavaScript】案例1：使用JS完成注册页面校验
专注于Java领域开发 关注我 带你玩转Java
07-30 7393
使用JS完成注册页面校验
html 表单js验证,JavaScript使用表单元素验证表单
weixin_29326909的博客
06-19 183
第一章:使用JavaScript验证表单JavaScript的主要作用:验证表单1最简单的表单验证-禁止空白的必填项目1.1最简单的HTML结构网站最基础的就是注册,它是一个系统的交互基础.例子:简单列表的html结构账户:密码:确认:1.2绑定验证功能因为用户最后要去点击"注册"按钮,所以我们就在"注册"按钮上添加一个onclick事件属性,引用eg.regCheck()例子:​ ...
html表单验证js代码,JavaScript表单验证实现代码
weixin_35170789的博客
06-10 379
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证JavaScript 表单验证JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。被 JavaScript 验证的这些典型的表单数据有：用户是否已填写表单中的必填项目？用户输入的邮件地址是否合法？用户是否已输入合法的日期？用户是否在数据域 (numeric field)...
创建强大的网页表单验证器：使用JavaScript
最新发布
geng1025的博客
01-06 994
使用表单验证器插件是一种非常方便的方式来验证用户输入。这些插件通常提供了丰富的内置验证规则，并且允许你根据需要进行自定义。
Javascript实现具有验证功能的页面登录
qq_64314976的博客
08-18 4333
使用JS的函数功能，获取屏幕的宽度和高度，并实现居中效果。登录区域设置一定的宽度和高度；打开登录页面时，登录区在浏览器水平、垂直方向上都居中。登录过程中会有相应的提示功能，输入正确后会显示登录成功，否则失败。...
验证注册页面信息（JavaScript）
热门推荐
weixin_48112113的博客
07-19 1万+
1. 任务要求 1）正则表达式的使用； 2）如何获取表单元素？ 3）函数的应用； 4）掌握String对象的创建； 5）掌握String对象的常用方法； 6）表单验证的方法。 2. 需求说明 根据所给素材制作注册页面，使用JavaScript制作文本提示特效，验证页面数据的有效性，要求如下： （1）使用表单form的onsubmit事件，根据验证函数的返回值是true或false来决定是...
javascript页面验证数据的合法性
qq_40956679的博客
10-30 3893
javascript页面验证数据的合法性 &lt;script language="javascript"&gt; function on_submit() { //验证数据的合法性 if (form1.username.value == "") { alert("用户名不能为空，请输入用户名！"); return false; } if (form1.userpas...
JavaScript表单验证
weixin_52629592的博客
06-14 1万+
表单验证是JavaScript的高级选项之一.我们可以通过JavaScript在网页中对即将送往服务器的HTML表单中的输入数据进行验证.如果所输入内容与所需不符,我们就在页面中进行提示.这样就使得我们不用频繁的与服务器进行交互,减少了IO的频率,提高了效率.在表单验证中,我们通常使用如下的验证功能:验证用户名与密码为指定格式在验证用户名与密码时,我们通常验证用户名与密码不能为空,用户名和密码必须在指定长度范围内,用户名和密码由数字和字母组成(使用正则表达式)等等验证单选框所选内容最常见的验证单选框就是验证
JavaScript客户端验证和页面特效制作总结文档.doc
06-11
JavaScript客户端验证和页面特效制作总结文档

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值