js form 验证函数 当前比较流行的错误提示


Posted in Javascript onJune 23, 2009

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

效果图:
js form 验证函数 当前比较流行的错误提示
Javascript 相关文章推荐
Extjs学习笔记之一 初识Extjs之MessageBox
Jan 07 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
JS验证码实现代码
Sep 14 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 Javascript
javascript form 验证函数 弹出对话框形式
Jun 23 #Javascript
WordPress 照片lightbox效果的运用几点
Jun 22 #Javascript
WordPress JQuery处理沙发头像
Jun 22 #Javascript
JQuery 前台切换网站的样式实现
Jun 22 #Javascript
利用JQuery为搜索栏增加tag提示
Jun 22 #Javascript
web 页面分页打印的实现
Jun 22 #Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 #Javascript
You might like
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
js模拟类继承小例子
2010/07/17 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
JS判断数组那点事
2017/10/10 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
python类参数self使用示例
2014/02/17 Python
Python测试人员需要掌握的知识
2018/02/08 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
strstr()的简单实现
2013/09/26 面试题
主管竞聘书范文
2014/03/31 职场文书
父母寄语大全
2014/04/12 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
80后婚前协议书范本
2014/10/24 职场文书
工地食品安全责任书
2015/05/09 职场文书
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL
Python测试框架pytest高阶用法全面详解
2022/06/01 Python