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 相关文章推荐
一段非常简单的让图片自动切换js代码
Nov 10 Javascript
jquery提升性能最佳实践小结
Dec 06 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 Javascript
vue递归实现树形组件
Jul 15 Vue.js
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
通过PHP CLI实现简单的数据库实时监控调度
2009/07/01 PHP
PHP Stream_*系列函数
2010/08/01 PHP
php中异常处理方法小结
2015/01/09 PHP
PHP7匿名类用法分析
2016/09/26 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
nodejs的路径问题的解决
2018/06/30 NodeJs
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python访问纯真IP数据库的代码
2011/05/19 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
Python递归函数实例讲解
2019/02/27 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
高中毕业自我鉴定
2013/12/19 职场文书
先进班集体事迹材料
2014/12/25 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
行政诉讼答辩状
2015/05/21 职场文书
小数乘法教学反思
2016/02/22 职场文书
Python中使用ipython的详细教程
2021/06/22 Python
vue中 this.$set的使用详解
2021/11/17 Vue.js