hhcysn
- 浏览: 16220 次
- 性别:
- 来自: 宁波
-
最新评论
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>
分享到：
发表评论
相关推荐
`test.js`则是JavaScript代码，负责处理验证逻辑。 通过以上讨论，我们可以看到JavaScript数据验证的多样性和灵活性，开发者可以根据具体需求定制验证规则，提升应用的质量和安全性。理解并熟练运用这些验证方法，...
动态JavaScript验证是Web开发中一个重要的技术，它主要用于在客户端增强用户输入的验证，提高用户体验，减少不必要的服务器负载。在Web表单提交之前，通过JavaScript进行数据验证，可以即时反馈错误信息，帮助用户...
对于某些特定场景，如仅需输入IP地址的一部分来搜索或过滤设备时，传统的全量IP地址验证就显得不够灵活。本文将详细介绍一个JavaScript函数，该函数能够实现对部分IP地址的有效性验证。 #### 函数概述 此函数通过...
传统的验证方式往往需要编写大量的JavaScript代码，而这套框架通过提供配置文件和特定的标签使用，使得表单验证变得更加简单易行。 在使用**JS客户端表单验证框架**时，开发者不再需要手动编写复杂的JavaScript函数...
在这个场景中，我们讨论的是一个使用JS编写的滑动验证码系统，它没有使用ES6的语法，而是基于更传统的JavaScript版本。 滑动验证的核心原理是将一张完整的图像分割成两部分：背景图像和滑块图像。用户必须通过拖动...
"气泡javascript验证框架"是一个专注于用户体验的验证解决方案，它通过修改`validate.js`库，将原本的验证提示改为了气泡样式，使得用户交互更加直观且友好。 `validate.js`是一个轻量级的JavaScript表单验证框架，...
"verify.js" 文件很可能就是实现这种滑动验证功能的核心JavaScript代码。在这个模块中，通常会涉及到JavaScript、CSS以及与登录验证相关的技术。 JavaScript是前端开发中的主要脚本语言，负责处理用户交互、动态...
- **jquery.idealforms.min.js**：JavaScript文件，实现了表单的动态行为、键盘操作、验证等功能。需要与CSS文件一起引入到项目中，以实现插件的全部功能。 - **readme.txt**：通常包含插件的安装指南、使用方法和...
传统的服务器端验证虽然有效，但在客户端进行初步验证可以显著减少服务器负载，提高用户体验。 JavaScript作为一种广泛使用的客户端脚本语言，能够高效地处理表单验证任务。它可以检测用户的输入是否符合预期的格式...
JavaScript验证是前端开发中的重要环节，它主要负责在用户提交表单前检查输入数据的有效性，防止无效或错误的数据被发送到服务器，从而提高用户体验和减轻服务器负担。JS验证通常包括对电子邮件地址、电话号码、日期...
在"js验证框架"这个压缩包中，很可能包含了一个完整的JavaScript验证库，以及相关的示例代码、文档和资源，帮助开发者快速理解和应用。这个框架可能会有详细的API参考，指导如何创建验证规则，如何绑定到表单元素，...
与传统的表单验证不同，LiveValidation能够在用户输入时立即对数据进行检查，及时反馈错误信息，提高了用户交互的即时性。该库主要包含三个核心类：Validate、LiveValidationForm和LiveValidation，它们共同构建了一...
传统的HTML表单验证可能不足以满足复杂的业务需求，因此JavaScript验证组件应运而生。"validator.js"提供了一系列预定义的验证规则，如检查电子邮件格式、手机号码合法性、密码强度等，同时也允许自定义规则，以适应...
在表单验证中，JavaScript可以实时检查用户输入，提供即时反馈，避免了传统提交后服务器端验证导致的页面刷新，提高了交互性。 正则表达式（Regular Expression）是用于匹配字符串的强大工具，能够高效地检测字符串...
总的来说，JavaScript验证库`FormCheck`简化了前端开发过程中的表单验证工作，通过其丰富的函数库，我们可以轻松地确保用户输入的数据质量，从而提升应用的稳定性和用户体验。对于任何涉及到用户输入的网页应用，...
本文将深入探讨如何实现一个兼容多种浏览器（包括IE6, IE7, IE8, IE9, Firefox, Opera以及Android）的JavaScript验证机制，并关注`Gsvalidator.js`这个核心库和其辅助资源`tipImg`。 首先，我们来看`Gsvalidator.js...
这种验证方式既能有效防止自动化脚本的攻击，又避免了传统验证码对用户造成的困扰。在jQuery中，我们可以利用JavaScript事件监听和DOM操作来实现这一功能。 二、jQuery基础 在开始讲解具体实现之前，我们需要对...
传统的验证方式可能需要开发者手动编写大量的验证代码，而JavaScript验证框架如Validform则通过封装验证逻辑，提供了一套完整的解决方案。 Validform的核心功能包括： 1. **丰富的内置验证规则**：Validform内置了...
在这个主题中，我们将深入探讨这两个工具以及它们如何配合进行验证和JavaScript验证。 **eWebEditor** 是一款基于JavaScript的在线HTML编辑器，它允许用户在Web页面上实现类似Word的编辑体验。通过提供一系列富文本...
JavaScript验证框架是一个专门为JavaScript开发设计的工具，旨在简化和标准化前端数据验证的过程。在Web应用程序中，数据验证是必不可少的，它确保用户输入的数据符合预设的规则，从而保证数据的完整性和安全性。这...