原创js表单验证类_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  Android, Python及开发编程讨论区 »
总帖数
1
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 6865 | 回复: 0   主题: 原创js表单验证类        下一篇 
    本主题由 koei123 于 2014-9-29 10:56:03 移动
yang.wang
注册用户
等级:中士
经验:217
发帖:82
精华:0
注册:2011-12-28
状态:离线
发送短消息息给yang.wang 加好友    发送短消息息给yang.wang 发消息
发表于: IP:您无权察看 2014-9-25 14:26:47 | [全部帖] [楼主帖] 楼主

    原创js表单验证类 

js类:

/***************************************************************


* 作者:mousecat, mousecat4444@126.com

* 版本:v1.3

* 修改记录:

* (1)增加默认验证提示信息。

* (2)修改电话号码验证规则,使之符合086-010-87654321

* (3)简化类调用方式

* (4)简化描述符字符个数

* (5)增加相关验证符(小数验证,整数验证)

* (6)更新帮助说明

* (7)去掉收尾两边空格

* (8)没有rq标识符验证的控件,当为空时可以正确提交,当不为空时根据添加的验证符进行判断

* (9)没有自定义函数对象可以正常运行

* (10)修改程序容错信息

*

* 特点:

* (1)描述符(validation descrīptor)实现验证

* (2)允许添加自定义函数

* (3)面向对象(the oriented_object)

* (4)验证方式包括:onSubmit,onBlur,AJAX。

* (5)应用div形式显示提示信息

* (6)对提示信息应用css样式

* (7)对于程序级错误给予提示

* (8)正确识别中文、英文字符长度

* (9)实现表单控件验证、表单集合验证

* (10)对于大型表单验证更加方便容易

* (11)支持 ie6、firefox2.0 浏览器

* (12)方便调用方式

* (13)设置缺省提示信息

*

* 使用说明:

* (1)包含js验证类

* <head>
* <scrīpt language="Javascrīpt" src="gen_validator.js" type="text/javascrīpt"></scrīpt>
* </head>


* (2)定义验证对象集合

* var a_fields = {


* 'username':{'rq':'必填项', 'mx=5':'', 'aa':'字母'},

* 'Email':{'mx=20':'', 'rq':'', 'el':''},
* 'Phone':{'te':''},
* 'introduce':{'mx=20':''},


* 'address':{'ds=0':'必须选择地区!'}

* }


* 其中,

* 'username':代表需要验证的表单控件

* 'rq':验证标识符(参见标识符说明)

* '必填项':验证提示信息

* (3)调用验证主函数

* html_form(a_fields, 'myform', 'testCustom');


* 参数1:验证对象集合

* 参数2:表单名称

* 参数3:自定义函数名称

* (4)备注:

* testCustom:自定义验证函数

*

* 注意事项:

* (1)验证提示div的id需要按照验证控件id值+"txt"形式表示

* 如:验证控件id为username,那么显示提示信息的位置id为txtusername。

* (2)当使用控件验证时,需要增加控件的自定义属性(详见使用范例)

* descrīptor:验证描述符列表,中间用"|"分隔(可采用默认提示信息)

* errormsg:错误信息列表,中间用"|"分隔,对应顺序应该和descrīptor顺序一致,最后一项应为正确时(默认)的提示信息

* 如果某一提示信息采用默认形式"|"不能省略

* (3)js验证类对象声明必须在html form之后

* (4)验证标识符必须保持一致

* (5)验证提示信息必须保持一致

* (6)控件验证标识符(descrīptor)和定义的验证标识符对象必须相同。

*

* 标识符说明(括号内标识为略写模式):

* (1)required(rq):必填项

* (2)maxlength=???(mx=???):最大长度,例:maxlen=25

* (3)minlength=???(mi=???):最小长度,例:minlen=5

* (4)alphanumeric(an):验证字符和数字

* (5)numeric(nc):验证数字

* (6)alpha(aa):验证字符

* (7)email(el):验证邮箱

* (8)lessthan=???(lt):验证对象要小于某值,例:lt=1000

* (9)greaterthan=???(gt):验证对象要大于某值,例:gt=10

* (10)regexp=???(rg=???):正则表达式验证,例:regexp=^[A-Za-z]{1,20}$

* (11)doselect=0(ds=0):验证select控件是否被选择

* (12)alnumhyphen(ay):验证字符、数字、-

* (13)telephone(te):验证电话格式,例:086-010-58022633

* (14)real(rl):验证实数格式,例:12.34

* (15)http(hp):验证url地址格式,例:http://www.baidu.com/aa.index?flag=1&fadsf=2

*
****************************************************************/
/////////////////参数初始化////////////////////////////
//缺省样式规则
//格式:错误样式|正确样式
var defaultStyle = "style2|style1";
//缺省错误提示
var ōbjDescTips = {


required : "请输入必填项",

maxlength : "输入项最大长度不能超过",

minlength : "输入项最小长度不能小于",

alphanumeric : "输入项必须为字母和数字",

numeric : "输入项必须为数字",

alpha : "输入项必须为字母",

alnumhyphen : "输入项必须为字母、数字、横线、下划线",

email : "输入项必须为电子邮件格式",

lessthan : "输入项必须为数字",

lessthan_two : "输入项必须小于", 

greaterthan : "输入项必须为数字",

greaterthan_two : "输入项必须大于",

regexp : "输入项必须符合自定义格式",

doselect : "请选择下拉选项",

telephone : "固定电话格式错误",

real : "实数格式错误",

http : "网址格式错误"

}
//缺省正确提示信息
var defaultTip = {


username : "请输入用户名",

Email : "请输入邮箱地址",

Phone : "请输入电话号码",

introduce : "请输入个人描述",

Lovers : "请选择个人爱好",

address : "请选择地区"

};
///////////////////////功能函数//////////////////////////////////
window.onerror = function() {return true};
String.prototype.trueLen = function() {return this.replace(/[^\x00-\xff]/g,"**").length;}
String.prototype.trim = function() {return this.replace(/(^\s*)|(\s*$)/g, "");};
//快捷方式
function $() {
      return document.getElementById(arguments[0]);
}
//信息提示
function dispInfo(msgObj, msgInfo, msgClass) {
      var ōbjName = msgObj.name
      var msgItem = $("txt" + objName);
      if (!msgItem) {
            alert("Bug: " + objName + "缺少信息显示区域!");
            return false;
      }
      msgItem.style.display = "block";
      msgItem.className = msgClass;
      msgItem.innerHTML = msgInfo;
}
//////////////////////////////核心类//////////////////////////////
//控件验证
function unitCheck(evt) {
      var evt = evt ? evt : window.event;
      var srcEle = (evt.target) ? evt.target : evt.srcElement;
      var strDescrīptor = srcEle.getAttribute("descrīptor");
      var arrDescrīptor = strDescrīptor.split('|');
      var arrStyle = defaultStyle.split('|');
      if (srcEle.getAttribute("errormsg") == null) {
            var arrErrorMsg = new Array();
      } else {
      var strErrorMsg = srcEle.getAttribute("errormsg");
      var arrErrorMsg = strErrorMsg.split('|');
}
if (strDescrīptor.search(/rq|required|ds/gi) == -1) {
      if (srcEle.value.length == 0) {
            dispInfo(srcEle, defaultTip[srcEle.id], arrStyle[1]);
            return true;
      }
}
for (var iteDes = 0; iteDes < arrDescrīptor.length; iteDes++) {
      if (!V2validateData(arrDescrīptor[iteDes], srcEle, arrErrorMsg[iteDes])) return false;
}
disName = srcEle.name;
dispInfo(srcEle, defaultTip[disName], arrStyle[1]);
return true;
}
function Validator(frmname) {
      this.formobj = document.forms[frmname];
      this.strForm = frmname;
      if(!this.formobj) {
            alert("BUG: 不能得到表单对象" + frmname);
            return false;
      }
      if(this.formobj.onsubmit) {
            this.formobj.old_onsubmit = this.formobj.onsubmit;
            this.formobj.onsubmit = null;
      } else {
      this.formobj.old_onsubmit = null;
}
this.formobj.onsubmit = form_submit_handler;
this.addValidation = add_validation;
this.setAddnlValidationFunction = set_addnl_vfunction;
this.clearAllValidations = clear_all_validations;
}
function set_addnl_vfunction(functionname) {
      this.formobj.addnlvalidation = functionname;
}
function clear_all_validations() {
      for(var itr = 0;itr < this.formobj.elements.length;itr++) {
            this.formobj.elements[itr].validationset = null;
      }
}
function form_submit_handler() {
      for(var itr = 0;itr < this.elements.length;itr++) {
            if(this.elements[itr].validationset && !this.elements[itr].validationset.validate()) {
                  return false;
            }
      }
      if(this.addnlvalidation) {
            str =" var ret = "+this.addnlvalidation+"()";
            eval(str);
            if(!ret) return ret;
      }
      return true;
}
function add_validation(itemname, descrīptor, errstr) {
      if(!this.formobj) {
            alert("BUG: 不能得到表单对象!");
            return;
      }
      var itemobj = this.formobj[itemname];
      if(!itemobj) {
            alert("BUG: 不能得到被验证对象: "+itemname);
            return false;
      }
      if(!itemobj.validationset) {
            itemobj.validationset = new ValidationSet(itemobj);
      }
      itemobj.validationset.add(descrīptor, errstr);
}
function ValidationSet(inputitem) {
      this.vSet = new Array();
      this.add = add_validationdesc;
      this.validate = vset_validate;
      this.itemobj = inputitem;
}
function add_validationdesc(desc, error) {
      this.vSet[this.vSet.length] = new ValidationDesc(this.itemobj, desc, error);
}
function vset_validate() {
      for(var itr=0;itr<this.vSet.length;itr++) {
            if(!this.vSet[itr].validate()) {
                  return false;
            }
      }
      return true;
}
function ValidationDesc(inputitem, desc, error) {
      this.desc=desc;
      this.error=error;
      this.itemobj = inputitem;
      this.validate=vdesc_validate;
}
function vdesc_validate() {
      var arrStyle = defaultStyle.split('|');
      if (!this.itemobj.getAttribute("descrīptor")) {
            alert('Bug:缺少' + this.itemobj.id + '验证标识符descrīptor');
            return false;
      }
      if (this.itemobj.getAttribute("descrīptor").search(/rq|required|ds/gi) == -1) {
            if (this.itemobj.value.length == 0) {
                  dispInfo(this.itemobj, defaultTip[this.itemobj.id], arrStyle[1]);
                  return true;
            }
      }
      if(!V2validateData(this.desc, this.itemobj, this.error)) {
            this.itemobj.focus();
            return false;
      }
      return true;
}
function V2validateData(strValidateStr, objValue, strError) {
      var epos = strValidateStr.search("=");
      var command = "";
      var cmdvalue = "";
      var arrStyle = defaultStyle.split('|');
      if(epos >= 0) {
            command = strValidateStr.substring(0,epos);
            cmdvalue = strValidateStr.substr(epos+1);
      } else {
      command = strValidateStr;
}
var _value = objValue.value.trim();
switch(command) {
      case "required":
      case "rq":
      {
            if(eval(_value.trueLen()) == 0) {
                  if (!strError || strError.length == 0) {
                        strError = objDescTips.required;
                  }
                  dispInfo(objValue, strError, arrStyle[0]);
                  return false;
            }
            break;
      }
      case "maxlength":
      case "mx":
      {
            if(eval(_value.trueLen()) > eval(cmdvalue)) {
                  if (!strError || strError.length == 0) {
                        strError = objDescTips.maxlength + cmdvalue;
                  }
                  dispInfo(objValue, strError, arrStyle[0]);
                  return false;
            }
            break;
      }
      case "minlength":
      case "mi":
      {
            if(eval(_value.trueLen()) < eval(cmdvalue)) {
                  if (!strError || strError.length == 0) {
                        strError = objDesTip.minlength + cmdvalue;
                        return false;
                  }
                  dispInfo(objValue, strError, arrStyle[0]);
                  return false;
            }
            break;
      }
      case "alphanumeric":
      case "an":
      {
            var charpos = _value.search("[^A-Za-z0-9]");
            if(_value.trueLen() > 0 && charpos >= 0) {
                  if (!strError || strError.length == 0) {
                        strError = objDescTips.alphanumeric;
                  }
                  dispInfo(objValue, strError, arrStyle[0]);
                  return false;
            }
            break;
      }
      case "numeric":
      case "nc":
      {
            var charpos = _value.search("[^0-9]");
            if(_value.trueLen() > 0 && charpos >= 0) {
                  if (!strError || strError.length == 0) {
                        strError = objDescTips.numeric;
                  }
                  dispInfo(objValue, strError, arrStyle[0]);
                  return false;
            }
            break;
      }
      case "alpha":
      case "aa":
      {
            var charpos = _value.search("[^A-Za-z]");
            if(_value.trueLen() > 0 && charpos >= 0) {
                  if (!strError || strError.length == 0) {
                        strError = objDescTips.alpha;
                  }
                  dispInfo(objValue, strError, arrStyle[0]);
                  return false;
            }
            break;
      }
      case "alnumhyphen":
      case "ay":
      {
            var charpos = _value.search("[^A-Za-z0-9\-_]");
            if(_value.trueLen() > 0 && charpos >= 0) {
                  if (!strError || strError.length == 0) {
                        strError = objDescTips.alnumhyphen;
                  }
                  dispInfo(objValue, strError, arrStyle[0]);
                  return false;
            }
            break;
      }
      case "email":
      case "el":
      {
      var pattern = /^[\w-\.]+\@[\w\.-]+\.[a-z]{2,4}$/;
            if (!pattern.test(_value)) {
                  if (!strError || strError.length == 0) {
                        strError = objDescTips.email;
                  }
                  dispInfo(objValue, strError, arrStyle[0]);
                  return false;
            }
            break;
      }
      case "lessthan":
      case "lt":
      {
            if(isNaN(_value)) {
                  if (!strError || strError.length == 0) {
                        strError = objDescTips.lessthan;
                  }
                  dispInfo(objValue, strError, arrStyle[0]);
                  return false;
            }
            if(eval(_value) >= eval(cmdvalue)) {
                  if (!strError || strError.length == 0) {
                        strError = objDescTips.lessthan_two + cmdvalue;
                  }
                  dispInfo(objValue, strError, arrStyle[0]);
                  return false;
            }
            break;
      }
      case "greaterthan":
      case "gt":
      {
            if(isNaN(_value)) {
                  if (!strError || strError.length == 0) {
                        strError = objDescTips.greaterthan;
                  }
                  dispInfo(objValue, strError, arrStyle[0]);
                  return false;
            }
            if(eval(_value) <= eval(cmdvalue)) {
                  if (!strError || strError.length == 0) {
                        strError = objDescTips.greaterthan_two + cmdvalue;
                  }
                  dispInfo(objValue, strError, arrStyle[0]);
                  return false;
            }
            break;
      }
      case "regexp":
      case "rg":
      {
            if(_value.trueLen() > 0) {
                  if(!_value.match(cmdvalue)) {
                        if (!strError || strError.length == 0) {
                              strError = objDescTips.regexp;
                        }
                        dispInfo(objValue, strError, arrStyle[0]);
                        return false;
                  }
            }
            break;
      }
      case "doselect":
      case "ds":
      {
            if(objValue.selectedIndex == null) {
                  alert("BUG: 不能找到select对象");
                  return false;
            }
            if(objValue.selectedIndex == eval(cmdvalue)) {
                  if (!strError || strError.length == 0) {
                        strError = objDescTips.doselect;
                  }
                  dispInfo(objValue, strError, arrStyle[0]);
                  return false;
            }
            break;
      }
      case "telephone":
      case "te":
      {
      var pattern = /^0?\d{2}\-?\d{3}\-?\d{8}$/;
            if (!pattern.test(_value)) {
                  if (!strError || strError.length == 0) {
                        strError = objDescTips.telephone;
                  }
                  dispInfo(objValue, strError, arrStyle[0]);
                  return false;
            }
            break;
      }
      case "real":
      case "rl":
      {
            var pattern = /^[\+\-]?\d*\.?\d*$/;
            if (!pattern.test(_value)) {
                  if (!strError || strError.length == 0) {
                        strError = objDescTips.real;
                  }
                  dispInfo(objValue, strError, arrStyle[0]);
                  return false;
            }
            break;
      }
      case "http":
      case "hp":
      {
            var pattern = /^http:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?$/;
            if (!pattern.test(_value)) {
                  if (!strError || strError.length == 0) {
                        strError = objDescTips.http;
                  }
                  dispInfo(objValue, strError, arrStyle[0]);
                  return false;
            }
            break;
      }
}
return true;
}
/////////////////////////用户调用接口////////////////////////////
function html_form(objSet, frmName) {
      var frmvalidator = new Validator(frmName);
      for (var objSingle in objSet) {
            for (var descSets in objSet[objSingle]) {
                  if (objSet[objSingle][descSets] == '') {
                        frmvalidator.addValidation(objSingle, descSets);
                  } else {
                  frmvalidator.addValidation(objSingle, descSets, objSet[objSingle][descSets]);
            }
      }
}
//自定义函数
frmvalidator.setAddnlValidationFunction(arguments[2]);
}


html调用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Example for Validator</title>

<scrīpt language="Javascrīpt" src="gen_validator.js" type="text/javascrīpt"></scrīpt>

<style type="text/css">

<!--

.STYLE1 {color: #0000ff;font-size:10pt}

.STYLE2 {color: #FF0000;font-size:10pt}

-->

</style>

</head>

<body>

<form action="" name="myform" >

<table cellspacing="2" cellpadding="2" border="0">

<tr>

<td align="right">用户名</td>

<td><input type="text" name="username" id="username" ōnBlur="javascrīpt:unitCheck(event)" descrīptor='rq|mx=5|aa' errormsg='必填项||字母'><font size=2pt color=red>*</font>

   <div id="txtusername" class='STYLE1'>请输入用户名</div>   </td>

</tr>

<tr>

<td align="right">邮箱</td>

<td><input type="text" name="Email" id="Email" ōnBlur="javascrīpt:unitCheck(event)" descrīptor='mx=20|rq|el'><font size=2pt color=red>*</font>

   <div id="txtEmail" class='STYLE1'>请输入邮箱地址</div>   </td>

</tr>

<tr>

<td align="right">电话</td>

<td><input type="text" name="Phone" id="Phone" ōnBlur="javascrīpt:unitCheck(event)" descrīptor="te">

   <div id="txtPhone" class='STYLE1'>请输入电话号码</div>   </td>

</tr>

<tr>

<td align="right">描述</td>

<td><textarea cols="20" rows="5" name="introduce" id="introduce" ōnBlur="javascrīpt:unitCheck(event)" descrīptor="mx=20"></textarea>

   <div id="txtintroduce" class='STYLE1'>请输入个人描述</div>   </td>

</tr>

<tr>

   <td align="right">爱好</td>

   <td><input type="checkbox" name="Lovers[]" value="football" >

足球

<input type="checkbox" name="Lovers[]" value="basketball" >


   篮球

   <input type="checkbox" name="Lovers[]" value="badminton" >

   羽毛球

<div id="txtLovers" class='STYLE1'>请选择个人爱好</div>   </td>

</tr>

<tr>

<td align="right">地区</td>

<td>

<SELECT name="address" id="address" ōnBlur="javascrīpt:unitCheck(event)" descrīptor="ds=0" errormsg="必须选择地区!">

<option value="" selected>[choose yours]
<option value="010">北京
<option value="0335">秦皇岛
<option value="0315">唐山
<option value="0795">山东
</SELECT><font size=2pt color=red>*</font>
<div id="txtaddress" class='STYLE1'>请选择地区</div> </td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
<scrīpt language="Javascrīpt" type="text/javascrīpt">
//验证用户名
function testName() {
      var v = document.getElementById('username');
      if (v.value.trim() != 'lb') {
            return false;
      } else {
      return true;
}
}
//验证复选框
function testCheckBox() {
      var ōbjWorkPattern = document.getElementsByName("Lovers[]");
      var temp = "";
      for (i = 0; i < objWorkPattern.length; i++) {
            if (objWorkPattern.checked) {
                  temp += objWorkPattern.value.trim();
            }
      }
      if (temp.length == 0) {
            return false;
      } else {
      return true;
}
}
//用户添加的自定义验证函数
function testCustom() {
var v1 = document.getElementById('txtusername');
var v2 = document.getElementById("txtLovers");
if (testName() == false) {
v1.className = 'STYLE2';


   v1.innerHTML = '用户名填写不正确!';

document.getElementById("username").focus();
return false;
} else {
v1.className = 'STYLE1';


   v1.innerHTML = '请输入用户名';

}
if (testCheckBox() == false) {
      v2.innerHTML = "<div class='STYLE2'>个人爱好不能为空!</div>";
      return false;
} else {
v2.innerHTML = "<div class='STYLE1'>请选择个人爱好</div>";
}
return true;
}
//定义验证类
var a_fields = {


'username':{'rq':'必填项', 'mx=5':'', 'aa':'字母'},

'Email':{'mx=20':'', 'rq':'', 'el':''},
'Phone':{'te':''},
'introduce':{'mx=20':''},


'address':{'ds=0':'必须选择地区!'}

}
html_form(a_fields, 'myform', 'testCustom');
</scrīpt>
</body>
</html>


以上代码是我通过3周的时间不断完善最终形成的(中间并不是全做这个,可能还有别的其

它事情)。贴出源码的主要目的是希望php、javascrīpt高手给予批评,使这个小生命能够茁壮成长。

该贴被hui.chen编辑于2014-11-4 23:29:48



赞(0)    操作        顶端 
总帖数
1
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论