- 浏览: 217689 次
- 性别:
- 来自: 成都
文章分类
最新评论
-
springmvc_springjpa:
spring mvc demo教程源代码下载,地址:http: ...
SpringMVC初探_(1) -
LinApex:
测试,如何看性能,如何评比各种服务器,你也写篇日志呗
压力测试 (LoadRunner+Websphere +Tomcat) -
tanying2869:
没找到附件
集成struts2 spring hibernate,使用注解 -
xiaotao.2010:
ranwei09321115 写道晕 不是免费的!...我也发 ...
各种免费的Webservice接口 -
xiaotao.2010:
gaoxingang2008 写道这些方法 都用了 还是不行呀 ...
禁用浏览器后退按钮
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高手给予批评,使这个小生命能够茁壮成长。
/***************************************************************
* 作者: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高手给予批评,使这个小生命能够茁壮成长。
发表评论
-
一些达成共识的JavaScript编码风格约定(引)
2013-07-12 10:22 1549原文:http://www.iteye.com/news/2 ... -
禁用浏览器后退按钮
2013-07-10 16:08 2481为解决浏览器后退按钮 ... -
JS 笔记--BOM
2013-02-21 15:04 1056ECMAScript是JavaScript的核心,BOM是 ... -
JS 笔记--中级篇
2013-02-18 17:02 13551、ECMAScript中的继承(inheritance) ... -
JS 笔记--基础篇
2013-02-04 15:24 1023浅谈JavaScript的语言特性 一片很好的JS ... -
HTML5 本地存储 LocalStorage
2012-05-29 11:27 1368说到本地存储,这玩意真是历尽千辛万苦才走到H ... -
js跳转方式
2012-05-28 13:57 1149偶尔看到的 很好很强大! 引用:http://www.zhu ... -
JavaScript动态更改input的disabled属性
2011-05-14 15:33 6782JavaScript动态更改input的disabled属性 ... -
ajax 学习笔记
2011-05-11 11:39 977又是一个第一次,第一次接触AJAX 突然发现有了AJAX网络 ... -
网页制作技术总结:常用Javascript语句
2011-05-11 10:59 994网页制作技术总结:常 ...
相关推荐
JS验证代码大全是汇集了多种JavaScript验证技术的资源集合,可以帮助开发者在创建网页表单、验证用户输入等方面提供有效的解决方案。 一、表单验证基础 在网页开发中,表单验证是非常重要的一环,它能够确保用户...
Validator.chm文件是一个Windows帮助文档,可能包含了关于JavaScript验证的详细指南或API参考。通常,CHM文件是由多个HTML页面组成,可以方便地搜索和查看特定主题。这个文件可能涵盖了各种验证方法、函数、类或者...
本文将详细介绍一种JavaScript验证数字的方法,并通过具体的代码示例来解释其实现原理。 #### 二、需求分析 根据题目提供的信息,我们需要实现一个功能:验证用户输入的文本框中的值是否为长度为6位的纯数字。具体...
JavaScript(简称JS)是一种轻量级的编程语言,主要用于网页和网络应用的开发。它能够直接在客户端运行,无需...通过深入研究`pubcheck.js`的源代码,我们可以学习到更多关于JavaScript验证策略和实现方式的知识。
"js验证大全"是一个集合了多种JavaScript验证技术和特效的资源包,对于程序员来说,它是一个非常宝贵的参考资料。 首先,我们来看一下这个压缩包中包含的文件: 1. **Default.aspx**:这是一个ASP.NET网页文件,...
JavaScript,简称JS,是网页开发中不可或缺的一部分,主要用于实现客户端的交互逻辑和增强用户体验。本篇文章将深入探讨三个关键知识点:JS表单验证、JS导出Excel以及JS验证。 一、JS表单验证 在Web应用程序中,...
JavaScript验证框架是Web开发中常用的一种工具,它用于在客户端对用户输入的数据进行实时检查,以确保数据的有效性和合规性,从而减少服务器端的压力并提供更好的用户体验。本项目提供的"js验证框架"是一个轻量级的...
总结,这个"js 验证 自定义 类"框架旨在提供一种高效、灵活和可扩展的JavaScript验证解决方案。通过其内置的基本验证功能和自定义规则的能力,开发者可以轻松应对各种数据验证需求,同时保持良好的用户体验。结合...
在JavaScript(JS)中,验证错误信息是网页前端开发中不可或缺的部分。这通常涉及到用户输入数据的检查,确保数据的有效性和安全性。"js验证错误信息.rar" 包含的资源显然是一个封装了验证功能的JS类,适用于文本框...
根据给定文件的信息,本文将详细介绍如何使用JavaScript(简称JS)进行输入验证,具体包括三种情况:一是确保用户只能输入数字;二是确保用户输入的是字母、数字或下划线;三是验证固定电话号码的格式是否正确。这三...
在Web开发中,JavaScript验证扮演着至关重要的角色,它能够提高用户体验,减少服务器负担,防止无效或错误的数据提交。本文将深入探讨JavaScript验证的各种方法和应用场景。 1. **基础验证** - **非空验证**:检查...
总之,JavaScript验证在密码修改过程中扮演着至关重要的角色,它可以确保用户输入的数据满足特定的安全标准,从而提高整个系统的安全性。正确实现和使用这些验证技术,对于创建一个用户友好且安全的Web应用至关重要...
在网页开发中,JavaScript(简称JS)是一种必不可少的前端编程语言,它被广泛用于处理用户交互,其中之一就是验证用户在表单中输入的数据格式。表单验证能够确保用户提交的信息符合预设的标准,例如正确的电话号码、...
js验证居民身份证,就这么简单,你懂得~
3. ComboBoxCheckTree.js:这是主要的JavaScript文件,很可能包含了ComboBoxCheckTree组件的逻辑代码,包括数据加载、用户交互处理、验证功能等。 4. treedata.js:这是一个可能存储树形数据的文件,数据可能以JSON...
总结来说,本文所列出的JavaScript验证和函数汇总,对于前端开发人员在处理数值和验证输入时提供了有价值的工具,不仅减少了重复编写验证代码的工作量,还确保了数据处理的准确性,提高开发效率和代码质量。...
**JavaScript验证**在Web开发中扮演着重要角色,主要用于确保用户在表单中输入的数据符合特定格式或规则,例如检查邮箱格式、手机号码合法性、密码强度等。在没有服务器端验证的情况下,JavaScript验证能提供即时...
JavaScript验证主要分为客户端验证和服务器端验证。客户端验证通常通过JavaScript在用户提交表单前进行,可以实时反馈错误信息,减少不必要的服务器请求,提高响应速度。而服务器端验证则是为了防止恶意用户绕过...
这个标题暗示我们,我们将探讨一个轻量级、高效且具有高度可定制性的JavaScript验证解决方案。 在描述中提到的链接(http://blog.csdn.net/luoyehanfei/article/details/42262249)可能提供了一个详细的实现方案,...