前端开发必备：28个常用JavaScript表单验证函数与正则表达式

表单提交与事件触发机制

在表单中设置 onsubmit="return test()"，并配合 <input type="submit" name="Submit" value="check"> 按钮进行提交操作。

在文本框中添加 onkeydown="test();" 属性，当用户按下键盘按键时直接调用验证函数。

在文本框中使用 onblur="testl(this.value)" 传入当前值进行验证，或者使用 test(this) 传入整个对象进行验证。

为按钮添加 onClick="test()" 属性，点击按钮时执行验证；若验证通过，则使用 document.forms[0].submit(); 提交表单。

在提交按钮上添加 onClick="return test();" 属性，使用 submit 类型进行提交验证。如果 test 函数返回 false，则阻止提交；返回 true 则允许提交。

在 <script type="javascript"> 标签中定义函数，例如 function test(){...return false;...}，用于封装验证逻辑。

掌握基础逻辑运算符：|| 表示逻辑或，&& 表示逻辑与，! 表示逻辑非。

常用事件包括：onblur（失去焦点）、onchange（失去焦点且内容改变）、onfocus（获得焦点）、onreset（重置按钮被激发时）、onsubmit（表单提交时触发）。

使用正则表达式验证：if(/^[1-9]\d*$/.test(str))，若返回真则验证通过，否则不通过。

获取元素值的方法：document.getElementById("ip").value 通过ID访问，document.form1.text1.value 通过name访问。

示例：在输入框中使用 onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')" 执行单条正则验证。

以下是具体的验证函数实现：

<input type="text" name="text1" id="text1" onblur="test();" value="" />

基础输入验证：长度、字符与数字限制

1. 字符长度限制

function test()

if(document.form1.text1.value.length>50)

alert("不能超过50个字符！");

document.form1.text1.focus();

return false;

2. 限制只能输入英文字母或数字

function test()

if(!(event.keyCode>=65&&event.keyCode<=90))

alert("只能是英文！");

document.form1.text1.focus();

<input onblur="if(/[^0-9a-zA-Z]/g.test(this.value))alert('有错')"> // 验证字母或数字

3. 限制只能输入数字

function test()

if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105))) // 考虑小键盘上的数字键

alert("只能是数字！");

document.form1.text1.focus();

或者

function test(NUM)

var i,j,strTemp;

strTemp="0123456789";

if ( NUM.length== 0)

return 0

for (i=0;i<NUM.length;i++)

j=strTemp.indexOf(NUM.charAt(i));

if (j==-1)

alert("只能是数字！");

return false;

// 说明是数字

return true;

特定格式验证：邮箱、电话与关键字

5. 验证邮箱（正则与函数实现）

function isEmail(strEmail) {

if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)

return true;

else

alert("格式错误!");

function isEmail() {

if (document.userinfo.useremail.value.charAt(0)=="." ||

document.userinfo.useremail.value.charAt(0)=="@"||

document.userinfo.useremail.value.indexOf('@', 0) == -1 ||

document.userinfo.useremail.value.indexOf('.', 0) == -1 ||

document.userinfo.useremail.value.lastIndexOf("@")==document.userinfo.useremail.value.length-1 ||

document.userinfo.useremail.value.lastIndexOf(".")==document.userinfo.useremail.value.length-1)

alert("Email地址格式不正确！");

document.userinfo.useremail.focus();

return false;

<input type="text" onblur="isEmail(this.value);" name="text1" />

6. 屏蔽关键字（此处示例屏蔽***和****）

function test() {

if((document.form1.text1.value.indexOf ("***") == 0)||(document.form1.text1.value.indexOf ("****") == 0)){

alert("存在关键字");

document.form1.text1.focus();

return false;

7. 比较两次输入是否相同

if(document.userinfo.userpassword.value != document.userinfo.userpassword1.value) {

document.userinfo.userpassword.focus();

document.userinfo.userpassword.value = '';

document.userinfo.userpassword1.value = '';

alert("两次输入的密码不同，请重新输入！");

return false;

8. 判断是否为空或仅由空格组成

function test(){

if(checkspace(document.form1.text1.value)) {

document.form1.text1.focus();

alert("为空或包含空格组成！");

return false;

function checkspace(checkstr) {

var str = '';

for(i = 0; i < checkstr.length; i++) {

str = str + ' ';

return (str == checkstr);

或者:

<input onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')"> // 执行单条正则验证例

9. 验证电话号码，仅允许数字和减号

正则表达式：\d{3}-\d{8}|\d{4}-\d{7}

function istel(elem) {

var str=elem.value;

var oneDecimal=false;

var oneChar=0;

str=str.toString( );

for (var i=0; i<str.length; i++) {

oneChar=str.charAt(i).charCodeAt(0);

if(oneChar==45){ continue; }

if(oneChar<48 || oneChar > 57) {

alert("此项只能输入数字和'-'号.");

return false;

return true;

或者

function fucCheckTEL(TEL)

var i,j,strTemp;

strTemp="0123456789-()# ";

for (i=0;i<TEL.length;i++)

j=strTemp.indexOf(TEL.charAt(i));

if (j==-1)

alert("此项只能输入数字和'-'号.");

return false;

// 说明合法

return true;

或者

// 校验普通电话、传真号码：可以“+”开头，除数字外，可含有“-”

function isTel(s)

//var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?(\d){1,12})+$/;

var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;

if (!patrn.exec(s)) return false

return true

或者

要求：

(1) 电话号码由数字、"("、")"和"-"构成

(2) 电话号码为3到8位

(3) 如果电话号码中包含有区号，那么区号为三位或四位

(4) 区号用"("、")"或"-"和其他部分隔开

(5) 移动电话号码为11或12位，如果为12位,那么第一位为0

(6) 11位移动电话号码的第一位和第二位为"13"

(7) 12位移动电话号码的第二位和第三位为"13"

根据这几条规则，可以得出以下正则表达式：

(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)

function PhoneCheck(s) {

var str=s;

var reg=/(^[0-9]{3,4}\-[0-9]{3,8}$)|(^[0-9]{3,8}$)|(^\([0-9]{3,4}\)[0-9]{3,8}$)|(^0{0,1}13[0-9]{9}$)/

alert(reg.test(str));

<input type="text" name="text1" onblur="istel(this);" />

数值与字符串类型校验

10. // 当opt2为1时检查num是否是负数// 当opt1为1时检查num是否是小数// 返回1是正确的，0是错误的

function chknbr(num,opt1,opt2)

var i=num.length;

var staus;

//staus用于记录.的个数

status=0;

if ((opt2!=1) && (num.charAt(0)=='-'))

alert("You have enter a invalid number.");

return 0;

// 当最后一位为.时出错

if (num.charAt(i-1)=='.')

alert("You have enter a invalid number.");

return 0;

for (j=0;j<i;j++)

if (num.charAt(j)=='.')

status++;

if (status>1)

alert("You have enter a invalid number.");

return 0;

if (num.charAt(j)<'0' || num.charAt(j)>'9' )

if (((opt1==0) || (num.charAt(j)!='.')) && (j!=0))

alert("You have enter a invalid number.");

return 0;

return 1;

11. 检查是否由数字或字母组成的字符串

function test(str)

var strSource ="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";

var ch;

var i;

var temp;

for (i=0;i<=(str.length-1);i++)

ch = str.charAt(i);

temp = strSource.indexOf(ch);

if (temp==-1)

alert("格式不正确!");

return false;

if (strSource.indexOf(ch)==-1)

alert("格式不正确!");

return false;

else

return true;

常见标识符验证：身份证、IP与邮编

12. 数字验证

正整数验证^[1-9]\d*$,负整数验证^-[1-9]\d*$ ,整数^-?[1-9]\d*$,非负整数^[1-9]\d*|0$,非正正数^-[1-9]\d*|0$,浮点数^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$

function test(str){

if(/^[1-9]\d*$/.test(str))

alert("格式不能!");

return false;

else

return true;

13. 身份证验证

正则表达式：\d{15}|\d{18}

14. IP地址验证

正则表达式：\d+\.\d+\.\d+\.\d+

15. 邮政编码验证

正则表达式：[1-9]\d{5}(?!\d)

function isPostalCode(s)

//var patrn=/^[a-zA-Z0-9]{3,12}$/;

var patrn=/^[a-zA-Z0-9 ]{3,12}$/;

if (!patrn.exec(s)) return false

return true

高级验证：颜色、链接与手机号

16. QQ号验证

正则表达式：[1-9][0-9]{4,}

17. HTML标记验证

正则表达式：\d{3}-\d{8}|\d{4}-\d{7}

18. 是否有效的颜色值

function IsColor(color){

var temp=color;

if (temp=="") return true;

if (temp.length!=7) return false;

return (temp.search(/\\#[a-fA-F0-9]{6}/) != -1);

19. 是否有效的链接

function IsURL(url){

var sTemp;

var b=true;

sTemp=url.substring(0,7);

sTemp=sTemp.toUpperCase();

if ((sTemp!="HTTP://")||(url.length<10)){

b=false;

return b;

20. 是否有效的手机号码

function IsMobile(_str){

var tmp_str = trim(_str);

var pattern = /13\\d{9}/;

return pattern.test(tmp_str);

或者

// 校验手机号码：必须以数字开头，除数字外，可含有“-”

function IsMobile(s)

var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;

if (!patrn.exec(s)) return false

return true

用户信息验证：登录名、姓名与密码

21. IP地址和身份证号验证（正则）

function checkIP()

obj=document.getElementById("ip").value

//ip地址

//var exp=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;

//身份证

//var exp=/\b(((?!\d\d\d)\d+|1\d\d|2[0-4]\d|25[0-5])(\b|\.)){4}/

//var exp=/^(\d{15}|\d{17}[x0-9])/

//var exp=/^([\d]{15}|[\d]{18}|[\d]{17}[x|X])$/

var reg = obj.match(exp);

if(reg==null)

alert("IP地址不合法！");

else

alert("IP地址合法！");

22. 校验登录名：只能输入5-20个以字母开头、可带数字、“_”、“.”的字串

function isRegisterUserName(s)

var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;

if (!patrn.exec(s)) return false

return true

23. 校验用户姓名：只能输入1-30个以字母开头的字串

function isTrueName(s)

var patrn=/^[a-zA-Z]{1,30}$/;

if (!patrn.exec(s)) return false

return true

24. 校验密码：只能输入6-20个字母、数字、下划线

function isPasswd(s)

var patrn=/^(\w){6,20}$/;

if (!patrn.exec(s)) return false

return true

日期时间格式验证

25. 日期时间类验证

短时间，形如 (13:04:06)

function isTime(str)

var a = str.match(/^(\d{1,2})(:)?(\d{1,2})\2(\d{1,2})$/);

if (a == null) {alert('输入的参数不是时间格式'); return false;}

if (a[1]>24 || a[3]>60 || a[4]>60)

alert("时间格式不对");

return false

return true;

短日期，形如 (2003-12-05)

function strDateTime(str)

var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);

if(r==null)return false;

var d= new Date(r[1], r[3]-1, r[4]);

return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);

长时间，形如 (2003-12-05 13:04:06)

function strDateTime(str)

var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;

var r = str.match(reg);

if(r==null)return false;

var d= new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]);

return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()==r[7]);

字符组成与特殊内容判断

26. 判断字符全部由a-Z或者是A-Z的字字母组成

<input onblur="if(/[^a-zA-Z]/g.test(this.value))alert('有错')">

27. 判断字符由字母和数字，下划线,点号组成.且开头的只能是下划线和字母

<input onblur="if(/^([a-zA-z_]{1})([\w]*)$/g.test(this.value))alert('有错')">

综合表单校验：空值、长度与中文检测

28. 表单的值不能为空,不能超过imax字符,不能少于imix字符,输入为中文判断

function isNull(elem){

//var pattern=/^\s+|\s+$/;

if(elem.replace(/(^\s+|\s$)/g, "")==""){

return false;

}else{

return true;

function imax(elem){

if(elem.length>imax){

return false;

}else{

return true;

function imix(elem){

if(elem.lengthreturn false;

}else{

return true;

function isChinese(elem){

var pattern=/[^\x00-\xff]/g;

if(pattern.test(elem)){

//包含中文

return false;

}else{

//不包含中文

return true;