JavaScript 常见数据验证正则表达式与实用函数
本文整理了 JavaScript 前端开发中高频使用的数据验证方案,包括 IP 地址、手机号码、电子邮箱、日期格式及数字类型等场景的校验逻辑。通过解析正则表达式规则并结合辅助函数,提供了一套可直接嵌入项目的验证代码片段,帮助开发者快速实现表单输入的合法性检查。
基础类型与特殊字符验证
在处理用户输入时,首先需要对基本的数据形态进行过滤。以下函数用于判断字符串是否为空白、纯整数、正整数或包含小数点的负数/正数,同时支持检查由英文字母、数字及下划线组成的混合字符串。
// 检查输入字符串是否为空或者全部都是空格
function isNull(str) {
if (str == "") return true;
var regu = "^[ ]+$";
var re = new RegExp(regu);
return re.test(str);
}
// 检查输入对象的值是否符合整数格式(允许负号)
function isInteger(str) {
var regu = /^[-]{0,1}[0-9]{1,}$/;
return regu.test(str);
}
// 检查输入字符串是否是带小数的数字格式,可以是负数
function isDecimal(str) {
if (isInteger(str)) return true;
var re = /^[-]{0,1}(\d+)[\.]+(\d+)$/;
if (re.test(str)) {
if (RegExp.$1 == 0 && RegExp.$2 == 0) return false;
return true;
} else {
return false;
}
}
// 检查输入字符串是否只由英文字母和数字组成
function isNumberOrLetter(s) {
var regu = "^[0-9a-zA-Z]+$";
var re = new RegExp(regu);
if (re.test(s)) {
return true;
} else {
return false;
}
}
// 检查输入字符串是否只由汉字、字母、数字组成
function isChinaOrNumbOrLett(s) {
var regu = "^[0-9a-zA-Z\u4e00-\u9fa5]+$";
var re = new RegExp(regu);
if (re.test(s)) {
return true;
} else {
return false;
}
}
网络标识与联系方式验证
针对网络连接和用户通讯信息,通常采用特定的格式约束。IP 地址需要确保四个段落均小于 256;手机号码目前主要校验中国大陆的 13x 号段;邮箱地址则遵循用户名@域名.tld 的标准结构。
// 用途:校验ip地址的格式
function isIP(strIP) {
if (isNull(strIP)) return false;
var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g; //匹配IP地址的正则表达式
if (re.test(strIP)) {
if (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256) return true;
}
return false;
}
// 用途:检查输入手机号码是否正确 (中国大陆13x号段)
function checkMobile(s) {
var regu = /^[1][3][0-9]{9}$/;
var re = new RegExp(regu);
if (re.test(s)) {
return true;
} else {
return false;
}
}
// 用途:检查输入对象的值是否符合E-Mail格式
function isEmail(str) {
var myReg = /^[-_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;
if (myReg.test(str)) return true;
return false;
}
// 改进版:更通用的邮箱验证
function checkEmail(strEmail) {
var emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
if (emailReg.test(strEmail)) {
return true;
} else {
alert("您输入的Email地址格式不正确!");
return false;
}
}
金融数值与端口号验证
- 金额校验:定义为带小数的正数,小数点后最多三位。
- 端口号校验:必须是数字且范围在 0-65535 之间。
// 用途:检查输入字符串是否符合金额格式
function isMoney(s) {
var regu = "^[0-9]+[\.][0-9]{0,3}$";
var re = new RegExp(regu);
if (re.test(s)) {
return true;
} else {
return false;
}
}
// 用途:检查输入对象的值是否符合端口号格式
function isPort(str) {
return (isNumber(str) && str < 65536);
}
// 辅助:检查输入字符串是否符合正整数格式
function isNumber(s) {
var regu = "^[0-9]+$";
var re = new RegExp(regu);
if (s.search(re) != -1) {
return true;
} else {
return false;
}
}
日期与时间范围验证
日期验证不仅检查格式,还涉及日历逻辑(如闰年2月天数、月份上限)。以下函数支持指定格式的日期解析,以及起止日期的比较逻辑。
// 辅助:获取某年某月的最大天数
function getMaxDay(year, month) {
if (month == 4 || month == 6 || month == 9 || month == 11) return "30";
if (month == 2) {
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) return "29";
else return "28";
}
return "31";
}
// 用途:判断是否是日期 (默认格式 yyyyMMdd)
function isDate(date, fmt) {
if (fmt == null) fmt = "yyyyMMdd";
var yIndex = fmt.indexOf("yyyy");
if (yIndex == -1) return false;
var year = date.substring(yIndex, yIndex + 4);
var mIndex = fmt.indexOf("MM");
if (mIndex == -1) return false;
var month = date.substring(mIndex, mIndex + 2);
var dIndex = fmt.indexOf("dd");
if (dIndex == -1) return false;
var day = date.substring(dIndex, dIndex + 2);
if (!isNumber(year) || year > "2100" || year < "1900") return false;
if (!isNumber(month) || month > "12" || month < "01") return false;
if (day > getMaxDay(year, month) || day < "01") return false;
return true;
}
// 用途:检查输入的起止日期是否正确
function checkTwoDate(startDate, endDate) {
if (!isDate(startDate)) {
alert("起始日期不正确!");
return false;
} else if (!isDate(endDate)) {
alert("终止日期不正确!");
return false;
} else if (startDate > endDate) {
alert("起始日期不能大于终止日期!");
return false;
}
return true;
}
UI 交互与辅助工具函数
除了数据校验,前端开发常需处理复选框状态、字符串修剪及子串匹配等操作。以下函数提供了批量操作复选框、去除首尾空格及判断字符串前缀后缀的能力。
// 用途:检查复选框被选中的数目
function checkSelect(checkboxID) {
var check = 0;
var i = 0;
if (document.all(checkboxID).length > 0) {
for (i = 0; i < document.all(checkboxID).length; i++) {
if (document.all(checkboxID).item(i).checked) {
check += 1;
}
}
} else {
if (document.all(checkboxID).checked) check = 1;
}
return check;
}
// function: cTrim(sInputString,iType) - 字符串去空格
// iType: 1=左空格, 2=右空格, 0=左右空格
function cTrim(sInputString, iType) {
var sTmpStr = ' ';
var i = -1;
if (iType == 0 || iType == 1) {
while (sTmpStr == ' ') {
++i;
sTmpStr = sInputString.substr(i, 1);
}
sInputString = sInputString.substring(i);
}
if (iType == 0 || iType == 2) {
sTmpStr = ' ';
i = sInputString.length;
while (sTmpStr == ' ') {
--i;
sTmpStr = sInputString.substr(i, 1);
}
sInputString = sInputString.substring(0, i + 1);
}
return sInputString;
}
// 用途:字符1是否以字符串2开始
function isFirstMatch(str1, str2) {
var index = str1.indexOf(str2);
if (index == 0) return true;
return false;
}
// 用途:字符1是否以字符串2结束
function isLastMatch(str1, str2) {
var index = str1.lastIndexOf(str2);
if (str1.length == index + str2.length) return true;
return false;
}
特定业务场景校验
在证券或特定行业应用中,可能需要校验固定长度的代码(如6位证券代码)或电话号码格式(区号-号码)。
// 用途:检查证券代码是否正确 (6位数字)
function checkSecCode(secCode) {
if (secCode.length != 6) {
alert("证券代码长度应该为6位");
return false;
}
if (!isNumber(secCode)) {
alert("证券代码只能包含数字");
return false;
}
return true;
}
// 用途:检查输入的电话号码格式是否正确
function checkPhone(strPhone) {
var phoneRegWithArea = /^[0][1-9]{2,3}-[0-9]{5,10}$/;
var phoneRegNoArea = /^[1-9]{1}[0-9]{5,8}$/;
var prompt = "您输入的电话号码不正确!";
if (strPhone.length > 9) {
if (phoneRegWithArea.test(strPhone)) {
return true;
} else {
alert(prompt);
return false;
}
} else {
if (phoneRegNoArea.test(strPhone)) {
return true;
} else {
alert(prompt);
return false;
}
}
}
以上就是 JavaScript 中常用的验证正则表达式的详细内容,更多关于 JavaScript 前端验证技巧的资料请关注本站其它相关文章!免责声明:本文内容仅供参考,不代表本站观点。转载或引用请注明出处。









