/**
* 数据验证框架.增加了对id字段检查出错时,直接在对应后面添加一< span>元素来显示错误信息.
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;
}
}
}
分享到:
相关推荐
在这个主题中,`form.html`文件很可能包含了以上提到的HTML表单和JavaScript验证代码,`js`文件可能是独立封装的验证功能脚本,而`pic.png`可能是用于增强表单视觉效果的图片,如错误图标等。 综上所述,"html、js...
JavaScript是Web开发中不可或缺的一部分,尤其在前端领域,它承担着与用户交互、动态更新页面以及数据验证等重要任务。本案例重点聚焦于JavaScript在表单验证中的应用,旨在帮助开发者掌握如何使用纯JavaScript实现...
该插件覆盖了多种常见的数据验证需求,如Email验证、日期验证、字符长度验证以及通用的格式验证。其核心实现策略是通过对象扩展的方式,对String原型进行扩展以及对默认的表单元素进行增强,并自定义了两个对象用于...
【标题】:“超好用的验证框架 封装js” 这个标题揭示了我们讨论的核心——一个前端验证框架,它被封装在JavaScript代码中。在Web开发中,前端验证是必不可少的一部分,它允许开发者在用户提交数据之前检查输入的...
在初始的版本上加入新的验证功能。【初始版本:https://download.csdn.net/download/qq_38313548/10865693 】 该版本新增特殊的密码验证和再次输入的密码验证。验证密码必须由字母数组和特殊字符组成。当前版本为:V...
"js验证错误信息.rar" 包含的资源显然是一个封装了验证功能的JS类,适用于文本框、复选框和下拉列表等表单元素的验证。下面我们将深入探讨JS验证的重要性和实现方式。 一、JS验证的重要性 1. 用户体验:即时反馈...
本资源包“JS input正则验证大全”主要聚焦于使用JavaScript进行输入框(input)的各种类型的数据验证,包括英文、中文、邮箱、手机号、银行卡和身份证等常见字段的正则校验规则。以下是对这些知识点的详细说明: 1...
该资源可能包含一个或多个JavaScript函数,用于验证不同类型的数据,如数字、电子邮件、电话号码等。通用的表单验证函数通常包括以下几个核心功能: 1. **非空检查**:验证用户是否填写了必填字段,这是最基本也最...
- **字符串长度验证**:包括最大长度、最小长度等验证,通常可以通过字符串的`.length`属性结合条件语句来实现。 #### 4. 验证邮箱地址 - **邮箱地址验证**:`function ismail(mail)` 使用正则表达式验证一个字符...
而"checkone.js"则很可能是包含验证函数的JavaScript文件,它可能已经封装好了各种验证规则和方法。 在实际应用中,通用JavaScript验证代码可能包含以下关键知识点: 1. **正则表达式验证**:通过使用正则表达式...
该库提供了丰富的API,可以用于处理单元格内容、样式、公式等,甚至支持复杂的工作表结构和数据验证规则。 **二、二次封装的目的** 虽然js-xlsx库功能强大,但直接使用可能会显得较为复杂,尤其是对于不熟悉其内部...
这个“一行代码搞定整站的表单验证js代码”很可能通过封装这些验证方法,提供了一个简洁的接口,使得开发者在表单元素上简单调用即可实现多种验证。这种做法大大减少了开发时间和复杂度,对于快速开发和维护是极其...
首先,`tool.js`可能是一个实用工具函数集合,封装了一些常见的JavaScript操作。在JavaScript中,函数封装是将特定功能打包到一个函数内,以便重复使用或降低代码复杂性。例如,你可能会发现`tool.js`中有如数组处理...
"js验证大全"这个资源集合了开发者在项目开发过程中积累的各种验证示例和工具类,为学习和使用JavaScript进行数据验证提供了丰富的素材。以下将详细介绍其中涉及的一些关键知识点。 1. **正则表达式**:`js正则...
例如,异步验证可能需要框架与服务器端进行通信来校验数据,而这个过程框架可能已经封装好了相应的函数,开发者只需要简单调用即可。 该框架的实用性和便捷性在于其易用的API和丰富的功能。在当前的Web开发场景中,...
5. **数据验证**:在前端开发中,数据验证是必不可少的,可以封装一系列验证函数,如邮箱格式验证、手机号码验证、密码强度检查等。 6. **Ajax请求**:封装一个Ajax请求函数,可以简化与服务器的交互。通过设置参数...
封装的js表单验证 demo目录里有js库(jskey_core)中提供的部分功能例子 其中themes目录里jskey_core中用到的样式,与js文件同级存放。 如果想不想使用日历类,则去掉jskey_core里【if(true)】【应该是第8行】及...
JavaScript是Web开发中不可或缺的一部分,尤其在前端交互和数据验证方面扮演着重要角色。本项目主要探讨了如何使用JavaScript实现一种高效且用户友好的表单验证功能,同时结合了省市级联选择,使得用户在填写地址...