JS-clientValidator

原创 2006年06月15日 11:35:00

**********clientvalidator.js************

//*************************************验正类定义**********************************************
function valControlSec(id,regExp,info,errInfo,sucInfo)
{
 this.validated = 0; 

 this.id = id?id:"";
 this.regExp = regExp?regExp:"";
 this.info = info?info:"";
 this.errInfo = errInfo?errInfo:"";
 this.sucInfo = sucInfo?sucInfo:"";
 
 this.normalColor = "";
 this.rightColor = "";
 this.wrongColor = "";

 this.index = -1;

 this.check = function (){
  curObj = event.srcElement;
  if (typeof(curObj) != Object)
   //alert(this.id);
   curObj = document.getElementById(this.id);
  info_ctrl = document.getElementById(this.id+"_info");
  var curRegExp = new RegExp(this.regExp);
  if (curObj.value != "")
   if (curObj.value.match(curRegExp))
   {
    this.validated = 1; 
    info_ctrl.innerHTML = this.sucInfo;
    info_ctrl.style.color = this.rightColor;
   }
   else
   {
    this.validated = 0; 
    info_ctrl.innerHTML = this.errInfo;
    info_ctrl.style.color = this.wrongColor;
   }
  else
  {
   this.validated = 0; 
   info_ctrl.innerHTML = this.info;
   info_ctrl.style.color = this.normalColor;
  }
 } 

 this.setup = function (){
  var curControl = document.getElementById(this.id);
  curControl.parentElement.innerHTML += "<span id=/""+this.id+"_info/" style=/"font-size:10pt;/">"+this.info+"</span>";
  curControl = document.getElementById(this.id);
  document.getElementById(this.id+"_info").style.color = this.normalColor;
  curControl.attachEvent("onblur",new Function("document.validater.valControlSecs["+this.index+"].check();"));
 }
}

function clientValidate()
{
 this.email = "^//w{4,12}@//w{1,12}/.[a-zA-Z]{2,3}$";
 
 this.normalColor = "#000000";
 this.rightColor = "#00ff00";
 this.wrongColor = "#ff0000";
 this.info = "Type in some data";
 this.errInfo = ":(";
 this.sucInfo = "";
 
 this.valControlSecs = new Array();
 this.addValControlSec = function (valControlSec){
  this.valControlSecs[this.valControlSecs.length] = valControlSec;
  valControlSec.index = this.valControlSecs.length - 1 ;
  with(valControlSec)
  {
   if (normalColor == "" || normalColor == null)
     normalColor = this.normalColor;
   if (rightColor == "" || rightColor == null)
    rightColor = this.rightColor;
   if (wrongColor == "" || wrongColor == null)
    wrongColor = this.wrongColor;
     
   if (errInfo == "" || errInfo == null)
    errInfo = this.errInfo;
   if (info == "" || info == null)
    info = this.info;
   if (sucInfo == "" || sucInfo == null)
    sucInfo = this.sucInfo;
   if (errInfo == this.errInfo && info != this.info)
    errInfo = info;
  
  }
 }
 
 this.setup = function (){
  for(var i=0;i<this.valControlSecs.length;i++)
  {
   this.valControlSecs[i].setup();
  }

  document.forms[0].attachEvent("onsubmit",new Function("return myValidater.validated()"));
 }

 this.validated = function (){
  var isVal = true;
  var curObj = null;
  var info_ctrl = null;
  for(var i=0;i<this.valControlSecs.length;i++)
  {
   this.valControlSecs[i].check();
   if(!this.valControlSecs[i].validated)
   {
    curObj = document.getElementById(this.valControlSecs[i].id);
    info_ctrl = document.getElementById(this.valControlSecs[i].id+"_info");

    if(curObj.value == "")
    {
     info_ctrl.innerHTML = this.valControlSecs[i].info;
     info_ctrl.style.color = this.valControlSecs[i].wrongColor;
    }
      
    isVal = false;
   }
  }
  if (!isVal) alert("表单验证失败,请检查您的输入内容!");
  return isVal;
 }
}
//*************************************邦定表单************************************************
document.validater = new clientValidate();
var myValidater = document.validater;
    with (myValidater)
 {
  normalColor = "#aaaa00";
  rightColor = "#66ff66";
  wrongColor = "#ff0066";
 }
 var curForm =document.forms[0];
 var curElement = null;
 
 var myValControlSec = null;
 for (var i=0;i<curForm.elements.length;i++)
 {
  curElement = curForm.elements[i];
  if(!curElement.getAttribute("id") && curElement.getAttribute("regExp") != null)
   if(curElement.getAttribute("name"))
    curElement.setAttribute("id",curElement.getAttribute("name"));

  if(curElement.getAttribute("regExp") != null && curElement.getAttribute("id") != null)
  {
   myValControlSec = new valControlSec();
   with (myValControlSec)
   {
    id         = curElement.getAttribute("id");                             //表单元素属性


    regExp     = curElement.getAttribute("regExp");               //表单元素属性


    info       = curElement.getAttribute("info"); //表单元素属性

    errInfo    = curElement.getAttribute("errInfo");//表单元素属性

    sucInfo    = curElement.getAttribute("sucInfo");//表单元素属性

    normalColor= curElement.getAttribute("normalColor");
    rightColor = curElement.getAttribute("rightColor");
    wrongColor = curElement.getAttribute("wrongColor");
   }
   if (myValControlSec.regExp.substring(0,1) != "^")
    myValControlSec.regExp = eval("myValidater."+myValControlSec.regExp);

   myValidater.addValControlSec(myValControlSec);
      
  }
      
 }

myValidater.setup();   //执行邦定

**************  用法  *******************

<table width="460" border="0" align="center" cellpadding="4" cellspacing="0" borderColor="#333333" bgcolor="#333333" style="border-collapse: collapse;color:#AC71B3;">
<form action="admin_Login_check.asp" method=post>
  <tr>
   <th bgcolor="#000000">&nbsp;</th>
   <th bgcolor="#000000" style="text-align:left;">后台管理登陆</th>
    </tr>
  <tr>
    <td height="30" colspan="2" align="right" bgcolor="#000000"><hr size="1" /></td>
    </tr>
  <tr>
    <td width="170" align="right" bgcolor="#000000">用户名:</td>
    <td nowrap="nowrap" bgcolor="#000000">
  <input name="admin_user" type="text" class="admin_input" id="admin_user" maxlength=16
  onmouseover="this.style.background='#efefef';" onmouseout="this.style.background='#FFFFFF'" onFocus="this.select(); "
  regExp="^[/w/-_/.]{4,16}$" info="请输入4-12的a-z,A-Z,0-9,_,-,." normalColor="#aaaaaa"
  /> </td>
  </tr>
  <tr>
    <td align="right" bgcolor="#000000">密码:</td>
    <td bgcolor="#000000">
 <input name="admin_pwd" type="password" class="admin_input" id="admin_pwd" maxlength=16
  onmouseover="this.style.background='#efefef';" onmouseout="this.style.background='#FFFFFF'" onFocus="this.select(); "
  regExp="^[/w/-_/.]{3,16}$" info="请输入3-12的a-z,A-Z,0-9,_,-,." normalColor="#aaaaaa"
  />  </tr>
  <tr>
    <td align="right" bgcolor="#000000">验证码:</td>
    <td bgcolor="#000000"><input name="checkCode" type="text" id="checkCode"  maxlength="4" size=4  class="checkcode"
  onmouseover="this.style.background='#efefef';" onmouseout="this.style.background='#FFFFFF'" onFocus="this.select(); "
  regExp="^[/w]{4}$" info="请输入左边的 4 位 字母." normalColor="#aaaaaa"
  />
  <img src="inc/checkcode/checkCode.asp" align="absmiddle"/> </td>
  </tr>
  <tr>
    <td height="30" colspan="2" align="right" bgcolor="#000000"><hr size="1" /></td>
  </tr>
  <tr>
    <td bgcolor="#000000">&nbsp;</td>
    <td bgcolor="#000000">
  <input type="submit" name="Submit" value="  登陆  " style="background:#ffffff;" /> </td>
  </tr>
</form>
</table>
<script language="javascript" src="Javascript/clientValidate.js"></script>

 

js unicode加解码

  • 2017年12月11日 15:03
  • 913B
  • 下载

使用HTML5+CSS+JS框架有那些好处

点击有惊喜 相信很多程序猿朋友都用过框架,不过你是否知道你用的是HTML框架、CSS框架还是JS框架,其实这都不重要,重要的是使用框架的目的是什么?是不是节约了开发项目时间陈本,这事多么伟大...

Jquery,js的逐帧动画实现

  • 2017年12月07日 10:09
  • 88KB
  • 下载

【 D3.js 入门系列 --- 9.1 】 饼状图的制作

本章介绍如何用 D3 做一个饼状图。初始数据是几个整数,用 Layout 将这几个整数转换成饼状图使用的数据。...
  • lzhlzz
  • lzhlzz
  • 2014年07月22日 10:56
  • 14991

DWR框架包(包含所有jar、js)

  • 2017年12月04日 15:05
  • 791KB
  • 下载

201712最新版go.js

  • 2017年12月03日 11:44
  • 1.15MB
  • 下载

JS 中 DateTime日期时间及方法函数

一、js获取当前日期时间 var myDate = new Date(); myDate.getYear();        //获取当前年份(2位) myDate.getFullYear();   ...

three.js javascript 002

  • 2017年12月01日 22:46
  • 58.48MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS-clientValidator
举报原因:
原因补充:

(最多只允许输入30个字)