JavaScript 表单验证工具函数集:包含长度计算、字符过滤与格式校验

作者:纸飞机

时间:2026-10-23

浏览:249

本文提供了一套完整的 JavaScript 表单验证函数库,涵盖中英文混合字符串长度计算、多类型空格过滤、非法字符检测以及 URL、邮箱、数字和特定格式字符串的校验。通过统一的异常处理机制,实现错误提示与焦点定位,适用于需要严格输入控制的 Web 表单场景。

文章目录

JavaScript 表单验证函数集:包含长度计算、字符过滤与格式校验

以下是实现表单验证功能的完整代码示例:

/** 
获取包含中英文字符的字符串字节长度
@param str
@return 字符串的字节长度
*/ 
function LengthB(str){
var p1 = new RegExp('%u..', 'g')
var p2 = new RegExp('%.', 'g')
return escape(str).replace(p1, '').replace(p2, '').length
} 
/** 
去除字符串首尾的所有空格字符
@param str
*/ 
function jsTrim(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 inputString
*/ 
function trim(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 str
@param filterStr
* 
@return 若包含过滤内容返回True,否则返回false;
*/ 
function FilterStr(str, filterStr){
filterStr = filterStr == "" ? "'~!@#$%^&*()-+.\"" : filterStr
var ch;
var i;
var temp;
var error = false;//当包含非法字符时,返回True
for (i = 0; i <= (filterStr.length - 1); i++) {
ch = filterStr.charAt(i);
temp = str.indexOf(ch);
if (temp != -1) {
error = true;
break;
} 
} 
return error;
} 
/** 
检查字符串是否包含指定非法字符,若包含则弹出提示并返回错误
@param str 检查字符串
@param filterStr 过滤字符串,内容为空,则默认过滤 '~!@#$%^&*()-+."
@param alertStr 弹出对话内容
@param idStr 出错返回出错字段ID
*/ 
function ISFilterStr(str, filterStr, alertStr, idStr){
alertStr = "对不起,您输入的 " + alertStr + " 不允包含 " + filterStr + " 非法字符";
if (FilterStr(str, filterStr))
this.AlertAndRFalse(alertStr, idStr);
} 
/** 
验证输入是否为有效的网址格式
@param str_url
@param alertStr 弹出字段内容
@param idStr 光标定位的字段ID<b>只能接收ID</b>
@return {Boolean} <b>不是</b>网址返回false;
*/ 
function IsURL(str_url, alertStr, idStr){// 验证url
alertStr = alertStr + " 格式不正确!";
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);
if (!re.test(str_url))
this.AlertAndRFalse(alertStr, idStr);
} 
/** 
验证输入是否为有效的电子邮件地址
@param str
@param alertStr 弹出字段内容
@param idStr 光标定位的字段ID<b>只能接收ID</b>
@return {Boolean} <b>不是</b>电子邮件返回false;
*/ 
function IsEmail(str, alertStr, idStr){
alertStr = alertStr + " 格式不正确!";
var re = /^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
if (!re.test(str))
this.AlertAndRFalse(alertStr, idStr);
} 
/** 
验证输入是否为纯数字字符串
@param str
@param alertStr 弹出字段内容
@param idStr 光标定位的字段ID<b>只能接收ID</b>
@return {Boolean} <b>不是</b>数字返回false;
*/ 
function IsNum(str, alertStr, idStr){
alertStr = alertStr + " 应该由数字组成!";
var re = /^[\d]+$/
if (!re.test(str))
this.AlertAndRFalse(alertStr, idStr);
} 
/** 
检查数值是否在指定的最小值和最大值范围内<br>
@param str_num
@param moreLen 应该大于或者等于的数值
@param lessLen 应该小于或者等于的数值
@param alertStr 弹出字段内容
@param idStr 光标定位的字段ID<b>只能接收ID</b>
@return {Boolean} <b>小于最小数值或者大于最大数值</b>数字返回false;
*/ 
function IsRangeNum(str_num, moreLen, lessLen, alertStr, idStr){
IsNum(str_num, alertStr, idStr);
if (moreLen != "") {
alertStr = alertStr + " 数值不能小于 " + moreLen;
if (str_num < moreLen)
this.AlertAndRFalse(alertStr, idStr);
} 
if (lessLen != "") {
alertStr = alertStr + " 数值不能大于 " + lessLen;
if (str_num > lessLen)
this.AlertAndRFalse(alertStr, idStr);
} 
if (moreLen == "" && lessLen == "")
this.AlertAndRFalse("没有定义最大最小长度!", idStr);
} 
/** 
验证字符串是否符合特定格式要求(不区分大小写)<br>
长度限制在6至20位,且仅由a-z、0-9和下划线组成
@param str 检查的字符串
@param alertStr 弹出字段内容
@param idStr 光标定位的字段ID<b>只能接收ID</b>
@return {Boolean} <b>不是</b>"长度在6至20位且由a-z0-9_"组成返回false;
*/ 
function IsLicit(str, alertStr, idStr){
alertStr = "对不起," + alertStr + " 不能为空并且只能由 0到9 a到z 下划线 的6到20位组成! ";
var re = /^[_0-9a-zA-Z]{6,20}$/
if (!re.test(str))
this.AlertAndRFalse(alertStr, idStr);
} 
/** 
比较两个字符串是否完全相等
@param str1 第一个字符串
@param str2 第二个字符串
@param alertStr 弹出字段内容
@param idStr 光标定位的字段ID<b>只能接收ID</b>
@return {Boolean} 字符串不相等返回false;
*/ 
function IsStrEquals(str1, str2, alertStr, idStr){
alertStr = "二次 " + alertStr + " 不一致!";
if (str1 != str2)
this.AlertAndRFalse(alertStr, idStr);
} 
/** 
检查字符串长度是否在指定范围内(中文字符按2个字节计算)<br>
* 
@param str 检查的字符
@param moreLen 应该大于或者等于的长度
@param lessLen 应该小于或者等于的长度
@param alertStr 弹出字段内容
@param idStr 光标定位的字段ID<b>只能接收ID</b>
@return {Boolean} <b>小于最小长度或者大于最大长度</b>数字返回false;
*/ 
function IsRange(str, moreLen, lessLen, alertStr, idStr){
var strLen = LengthB(str);
if (moreLen != "") {
alertStr = alertStr + " 应该大于或等于 " + moreLen + " 个字节长度!";
if (strLen < moreLen)
this.AlertAndRFalse(alertStr, idStr);
} 
if (lessLen != "") {
alertStr = alertStr + " 应该小于或等于 " + lessLen + " 个字节长度!";
if (strLen > lessLen)
this.AlertAndRFalse(alertStr, idStr);
} 
if (moreLen == "" && lessLen == "")
this.AlertAndRFalse("没有定义最大最小长度!", idStr);
} 
/** 
检查字符串长度是否不超过给定上限(中文字符按2个字节计算)<br>
@param str 字符串
@param lessLen 小于或等于长度
@param alertStr 弹出字段内容
@param idStr 光标定位的字段ID<b>只能接收ID</b>
@return {Boolean} <b>大于给定长度</b>数字返回false;
*/ 
function IsLess(str, lessLen, alertStr, idStr){
IsRange(str, "", lessLen, alertStr, idStr);
} 
/** 
检查字符串是否为空
@param str
@param alertStr 弹出字段内容
@param idStr 光标定位的字段ID<b>只能接收ID</b>
@return {Boolean} <b>字符为空</b>返回false;
*/ 
function IsEmpty(str, alertStr, idStr){
alertStr = alertStr + " 不能为空!";
if (str == "")
this.AlertAndRFalse(alertStr, idStr);
} 
/** 
弹出警示框,并将焦点定位到出错的输入字段上
@param alertStr 弹出警告框内容
@param idStr 返回字段焦点
@return {Boolean} 返回false
*/ 
function AlertAndRFalse(alertStr, idStr){
alert(alertStr);
document.getElementById(idStr).focus();
throw "valueErr";
} 
// JavaScript Document
调用示例
function checkForm() {
try {
var title = trim(document.getElementById('title')); //文章标题
IsEmpty(title,"文章标题","title");//不可为空
IsLess(title,100,"文章标题","title");//标题应少于100个字符长
ISFilterStr(title, "~`!@#$%^&*()-=_+[]{}|\\;':\",./<>?", "文章标题","title")//标题不允许包含这些非法字符
} catch(err) {
if(err == "valueErr")
return false;
} 
}

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章