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实现的页面关键字密度查询代码
Dec 27 Javascript
Javascript 模式实例 观察者模式
Oct 24 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
javascript从右边截取指定字符串的三种实现方法
Nov 29 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 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
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
PHP模板解析类实例
2015/07/09 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
js实现表格筛选功能
2017/01/18 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
Python如何为图片添加水印
2016/11/25 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
浅谈Python处理PDF的方法
2017/11/10 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
客房主管岗位职责
2013/12/09 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
微观世界观后感
2015/06/10 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server