js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装


Posted in Javascript onMay 15, 2010

前段时间写了一个 js数据验证、js email验证、js url验证、js长度验证、js数字验证等 弹出对话框形式的但是,现在不太流行那种很不友好的方式,于是重写了一个,封装得更加好的,更友好的层形式共享给大家,如果大家使用有bug,请大家给我留言完善,谢谢了.

js代码

/** 
* 数据验证框架.增加了对id字段检查出错时,直接在对应后面添加一< span>元素来显示错误信息. 
* 
* @author wangzi6hao 
* @version 2.1 
* @description 2009-05-16 
*/ 
var checkData = new function() { 
var idExt="_wangzi6hao_Span";//生成span层的id后缀 
/** 
* 得到中英文字符长(中文为2个字符) 
* 
* @param {} 
* str 
* @return 字符长 
*/ 
this.length = function(str) { 
var p1 = new RegExp('%u..', 'g') 
var p2 = new RegExp('%.', 'g') 
return escape(str).replace(p1, '').replace(p2, '').length 
} 
/** 
* 删除对应id元素 
*/ 
this.remove = function(id) { 
var idObject = document.getElementById(id); 
if (idObject != null) 
idObject.parentNode.removeChild(idObject); 
} 
/** 
* 在对应id后面错误信息 
* 
* @param id:需要显示错误信息的id元素 
* str:显示错误信息 
*/ 
this.appendError = function(id, str) { 
this.remove(id + idExt);// 如果span元素存在,则先删除此元素 
var spanNew = document.createElement("span");// 创建span 
spanNew.id = id + idExt;// 生成spanid 
spanNew.style.color = "red"; 
spanNew.appendChild(document.createTextNode(str));// 给span添加内容 
var inputId = document.getElementById(id); 
inputId.parentNode.insertBefore(spanNew, inputId.nextSibling);// 给需要添加元素后面添加span 
} 
/** 
* @description 过滤所有空格字符。 
* @param str:需要去掉空间的原始字符串 
* @return 返回已经去掉空格的字符串 
*/ 
this.trimSpace = function(str) { 
str += ""; 
while ((str.charAt(0) == ' ') || (str.charAt(0) == '???') 
|| (escape(str.charAt(0)) == '%u3000')) 
str = str.substring(1, str.length); 
while ((str.charAt(str.length - 1) == ' ') 
|| (str.charAt(str.length - 1) == '???') 
|| (escape(str.charAt(str.length - 1)) == '%u3000')) 
str = str.substring(0, str.length - 1); 
return str; 
} 
/** 
* 过滤字符串开始部分的空格\字符串结束部分的空格\将文字中间多个相连的空格变为一个空格 
* 
* @param {Object} 
* inputString 
*/ 
this.trim = function(inputString) { 
if (typeof inputString != "string") { 
return inputString; 
} 
var retValue = inputString; 
var ch = retValue.substring(0, 1); 
while (ch == " ") { 
// 检查字符串开始部分的空格 
retValue = retValue.substring(1, retValue.length); 
ch = retValue.substring(0, 1); 
} 
ch = retValue.substring(retValue.length - 1, retValue.length); 
while (ch == " ") { 
// 检查字符串结束部分的空格 
retValue = retValue.substring(0, retValue.length - 1); 
ch = retValue.substring(retValue.length - 1, retValue.length); 
} 
while (retValue.indexOf(" ") != -1) { 
// 将文字中间多个相连的空格变为一个空格 
retValue = retValue.substring(0, retValue.indexOf(" ")) 
+ retValue.substring(retValue.indexOf(" ") + 1, 
retValue.length); 
} 
return retValue; 
} 
/** 
* 过滤字符串,指定过滤内容,如果内容为空,则默认过滤 '~!@#$%^&*()-+." 
* 
* @param {Object} 
* str 
* @param {Object} 
* filterStr 
* 
* @return 包含过滤内容,返回True,否则返回false; 
*/ 
this.filterStr = function(str, filterString) { 
filterString = filterString == "" ? "'~!@#$%^&*()-+.\"" : filterString 
var ch; 
var i; 
var temp; 
var error = false;// 当包含非法字符时,返回True 
for (i = 0; i <= (filterString.length - 1); i++) { 
ch = filterString.charAt(i); 
temp = str.indexOf(ch); 
if (temp != -1) { 
error = true; 
break; 
} 
} 
return error; 
} 
this.filterStrSpan = function(id, filterString) { 
filterString = filterString == "" ? "'~!@#$%^&*()-+.\"" : filterString 
var val = document.getElementById(id); 
if (this.filterStr(val.value, filterString)) { 
val.select(); 
var str = "不能包含非法字符" + filterString; 
this.appendError(id, str); 
return false; 
} else { 
this.remove(id + idExt); 
return true; 
} 
} 
/** 
* 检查是否为网址 
* 
* @param {} 
* str_url 
* @return {Boolean} true:是网址,false:<b>不是</b>网址; 
*/ 
this.isURL = function(str_url) {// 验证url 
var strRegex = "^((https|http|ftp|rtsp|mms)?://)" 
+ "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" // ftp的user@ 
+ "(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184 
+ "|" // 允许IP和DOMAIN(域名) 
+ "([0-9a-z_!~*'()-]+\.)*" // 域名- www. 
+ "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." // 二级域名 
+ "[a-z]{2,6})" // first level domain- .com or .museum 
+ "(:[0-9]{1,4})?" // 端口- :80 
+ "((/?)|" // a slash isn't required if there is no file name 
+ "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$"; 
var re = new RegExp(strRegex); 
return re.test(str_url); 
} 
this.isURLSpan = function(id) { 
var val = document.getElementById(id); 
if (!this.isURL(val.value)) { 
val.select(); 
var str = "链接不符合格式;"; 
this.appendError(id, str); 
return false; 
} else { 
this.remove(id + idExt); 
return true; 
} 
} 
/** 
* 检查是否为电子邮件 
* 
* @param {} 
* str 
* @return {Boolean} true:电子邮件,false:<b>不是</b>电子邮件; 
*/ 
this.isEmail = function(str) { 
var re = /^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; 
return re.test(str); 
} 
this.isEmailSpan = function(id) { 
var val = document.getElementById(id); 
if (!this.isEmail(val.value)) { 
val.select(); 
var str = "邮件不符合格式;"; 
this.appendError(id, str); 
return false; 
} else { 
this.remove(id + idExt); 
return true; 
} 
} 
/** 
* 检查是否为数字 
* 
* @param {} 
* str 
* @return {Boolean} true:数字,false:<b>不是</b>数字; 
*/ 
this.isNum = function(str) { 
var re = /^[\d]+$/ 
return re.test(str); 
} 
this.isNumSpan = function(id) { 
var val = document.getElementById(id); 
if (!this.isNum(val.value)) { 
val.select(); 
var str = "必须是数字;"; 
this.appendError(id, str); 
return false; 
} else { 
this.remove(id + idExt); 
return true; 
} 
} 
/** 
* 检查数值是否在给定范围以内,为空,不做检查<br> 
* 
* @param {} 
* str_num 
* @param {} 
* small 应该大于或者等于的数值(此值为空时,只检查不能大于最大值) 
* @param {} 
* big 应该小于或者等于的数值(此值为空时,只检查不能小于最小值) 
* 
* @return {Boolean} <b>小于最小数值或者大于最大数值</b>数字返回false 否则返回true; 
*/ 
this.isRangeNum = function(str_num, small, big) { 
if (!this.isNum(str_num)) // 检查是否为数字 
return false 
if (small == "" && big == "") 
throw str_num + "没有定义最大,最小值数字!"; 
if (small != "") { 
if (str_num < small) 
return false; 
} 
if (big != "") { 
if (str_num > big) 
return false; 
} 
return true; 
} 
this.isRangeNumSpan = function(id, small, big) { 
var val = document.getElementById(id); 
if (!this.isRangeNum(val.value, small, big)) { 
val.select(); 
var str = ""; 
if (small != "") { 
str = "应该大于或者等于 " + small; 
} 
if (big != "") { 
str += " 应该小于或者等于 " + big; 
} 
this.appendError(id, str); 
return false; 
} else { 
this.remove(id + idExt); 
return true; 
} 
} 
/** 
* 检查是否为合格字符串(不区分大小写)<br> 
* 是由a-z0-9_组成的字符串 
* 
* @param {} 
* str 检查的字符串 
* @param {} 
* idStr 光标定位的字段ID<b>只能接收ID</b> 
* @return {Boolean} <b>不是</b>"a-z0-9_"组成返回false,否则返回true; 
*/ 
this.isLicit = function(str) { 
var re = /^[_0-9a-zA-Z]*$/ 
return re.test(str); 
} 
this.isLicitSpan = function(id) { 
var val = document.getElementById(id); 
if (!this.isLicit(val.value)) { 
val.select(); 
var str = "是由a-z0-9_组成的字符串(不区分大小写);"; 
this.appendError(id, str); 
return false; 
} else { 
this.remove(id + idExt); 
return true; 
} 
} 
/** 
* 检查二个字符串是否相等 
* 
* @param {} 
* str1 第一个字符串 
* @param {} 
* str2 第二个字符串 
* @return {Boolean} 字符串不相等返回false,否则返回true; 
*/ 
this.isEquals = function(str1, str2) { 
return str1 == str2; 
} 
this.isEqualsSpan = function(id, id1) { 
var val = document.getElementById(id); 
var val1 = document.getElementById(id1); 
if (!this.isEquals(val.value, val1.value)) { 
val.select(); 
var str = "二次输入内容必须一样;"; 
this.appendError(id, str); 
return false; 
} else { 
this.remove(id + idExt); 
return true; 
} 
} 
/** 
* 检查字符串是否在给定长度范围以内(中文字符以2个字节计算),字符为空,不做检查<br> 
* 
* @param {} 
* str 检查的字符 
* @param {} 
* lessLen 应该大于或者等于的长度 
* @param {} 
* moreLen 应该小于或者等于的长度 
* 
* @return {Boolean} <b>小于最小长度或者大于最大长度</b>数字返回false; 
*/ 
this.isRange = function(str, lessLen, moreLen) { 
var strLen = this.length(str); 
if (lessLen != "") { 
if (strLen < lessLen) 
return false; 
} 
if (moreLen != "") { 
if (strLen > moreLen) 
return false; 
} 
if (lessLen == "" && moreLen == "") 
throw "没有定义最大最小长度!"; 
return true; 
} 
this.isRangeSpan = function(id, lessLen, moreLen) { 
var val = document.getElementById(id); 
if (!this.isRange(val.value, lessLen, moreLen)) { 
var str = "长度"; 
if (lessLen != "") 
str += "大于或者等于 " + lessLen + ";"; 
if (moreLen != "") 
str += " 应该小于或者等于 " + moreLen; 
val.select(); 
this.appendError(id, str); 
return false; 
} else { 
this.remove(id + idExt); 
return true; 
} 
} 
/** 
* 检查字符串是否小于给定长度范围(中文字符以2个字节计算)<br> 
* 
* @param {} 
* str 字符串 
* @param {} 
* lessLen 小于或等于长度 
* 
* @return {Boolean} <b>小于给定长度</b>数字返回false; 
*/ 
this.isLess = function(str, lessLen) { 
return this.isRange(str, lessLen, ""); 
} 
this.isLessSpan = function(id, lessLen) { 
var val = document.getElementById(id); 
if (!this.isLess(val.value, lessLen)) { 
var str = "长度大于或者等于 " + lessLen; 
val.select(); 
this.appendError(id, str); 
return false; 
} else { 
this.remove(id + idExt); 
return true; 
} 
} 
/** 
* 检查字符串是否大于给定长度范围(中文字符以2个字节计算)<br> 
* 
* @param {} 
* str 字符串 
* @param {} 
* moreLen 小于或等于长度 
* 
* @return {Boolean} <b>大于给定长度</b>数字返回false; 
*/ 
this.isMore = function(str, moreLen) { 
return this.isRange(str, "", moreLen); 
} 
this.isMoreSpan = function(id, moreLen) { 
var val = document.getElementById(id); 
if (!this.isMore(val.value, moreLen)) { 
var str = "长度应该小于或者等于 " + moreLen; 
val.select(); 
this.appendError(id, str); 
return false; 
} else { 
this.remove(id + idExt); 
return true; 
} 
} 
/** 
* 检查字符不为空 
* 
* @param {} 
* str 
* @return {Boolean} <b>字符为空</b>返回true,否则为false; 
*/ 
this.isEmpty = function(str) { 
return str == ""; 
} 
this.isEmptySpan = function(id) { 
var val = document.getElementById(id); 
if (this.isEmpty(val.value)) { 
var str = "不允许为空;"; 
val.select(); 
this.appendError(id, str); 
return false; 
} else { 
this.remove(id + idExt); 
return true; 
} 
} 
}

测试页面
<html> 
<head> 
<title>网页标题</title> 
<script type="text/javascript" src="test.js"></script> 
<script type="text/javascript"> 
function checkForm(){ 
var isPass = true; 
//过滤字符串 
if(!(checkData.isEmptySpan("filterStr") && checkData.filterStrSpan('filterStr','#$%$'))) { 
isPass = false; 
} 
//检查url 
if(!(checkData.isEmptySpan("isURL") && checkData.isURLSpan('isURL'))) 
isPass = false; 
//email 
if(!(checkData.isEmptySpan("isEmail") && checkData.isEmailSpan('isEmail'))) 
isPass = false; 
//数字 
if(!(checkData.isNumSpan('isNum'))) 
isPass = false; 
//数字大小 
if(!(checkData.isEmptySpan("isRangeNum") && checkData.isNumSpan('isRangeNum') && checkData.isRangeNumSpan('isRangeNum',10,100))) 
isPass = false; 
//密码 (数字,字母,下划线) 
if(!(checkData.isLicitSpan('isLicit'))) 
isPass = false; 
//二个字段是否相等 
if(!(checkData.isEmptySpan("isEquals") && checkData.isEqualsSpan('isEquals','isEquals1'))) 
isPass = false; 
//字符长度控制 
if(!(checkData.isRangeSpan('isRange',5,10))) 
isPass = false; 
//字符最短控制 
if(!(checkData.isLessSpan('isLess',10))) 
isPass = false; 
//字符最长控制 
if(!(checkData.isEmptySpan("isMore") && checkData.isMoreSpan('isMore',30))) 
isPass = false; 
//为空控制 
if(!(checkData.isEmptySpan("isEmpty"))) 
isPass = false; 
return isPass; 
} 
</script> 
</head> 
<body> 
<form action="index.jsp" method="post" onsubmit="return checkForm();"> 
<table> 
<tbody> 
<tr> 
<td>字符过滤:<input type="text" id="filterStr" name="filterStr"></td> 
<td>链接:<input type="text" id="isURL" name="isURL"></td> 
</tr> 
<tr> 
<td>邮件:<input type="text" id="isEmail" name="isEmail"></td> 
<td>数字:<input type="text" id="isNum" name="isNum"></td> 
</tr> 
<tr> 
<td>数字范围:<input type="text" id="isRangeNum" name="isRangeNum"></td> 
<td>a-zA-Z0-9_<input type="text" id="isLicit" name="isLicit"></td> 
</tr> 
<tr> 
<td>判断相等:<input type="text" id="isEquals" name="isEquals"></td> 
<td><input type="text" id="isEquals1" name="isEquals1"></td> 
</tr> 
<tr> 
<td>长度控制:<input type="text" id="isRange" name="isRange"></td> 
<td>长度大于控制:<input type="text" id="isLess" name="isLess"></td> 
</tr> 
<tr> 
<td>长度小于控制:<input type="text" id="isMore" name="isMore"></td> 
<td>是否为空:<input type="text" id="isEmpty" name="isEmpty"></td> 
</tr> 
<tr> 
<td><input type="submit" name="submit" value="提交数据"></td> 
</tr> 
</tbody> 
</table> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
javascript 对象比较实现代码
Apr 27 Javascript
JavaScript打字小游戏代码
Dec 26 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 #Javascript
WEB 浏览器兼容 推荐收藏
May 14 #Javascript
js 数值项目的格式化函数代码
May 14 #Javascript
IE8 中使用加速器(Activities)
May 14 #Javascript
jquery 日期分离成年月日的代码
May 14 #Javascript
JQuery 操作select标签实现代码
May 14 #Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 #Javascript
You might like
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
vue.js实现简单的计算器功能
2020/02/22 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
Python机器学习之决策树算法
2017/12/22 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
python解决字符串倒序输出的问题
2018/06/25 Python
Python多项式回归的实现方法
2019/03/11 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
python装饰器原理与用法深入详解
2019/12/19 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
Python学习笔记之装饰器
2020/08/06 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
我爱祖国演讲稿
2014/09/02 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
民主生活会汇报材料
2014/12/15 职场文书
2015年清明节活动总结
2015/02/09 职场文书
就业证明函
2015/06/17 职场文书
导游词之桂林山水
2019/09/20 职场文书