之前觉得在注册表单的时候,当填写表单失去焦点进行验证的效果很酷,自己也经历了很多的版本的改进,不过都是JS的代码,现在感觉已经成形了。所以发到网上让大家PK一下。
2 函数名:检验表单的函数
3 作者:xuwen 日期:2007-2-10
4 参数 _obj:验证的对象 type:验证的类型 errmsg:错误的提示信息 flag:焦点的状态
5 表单失去焦点时调用:οnblur=checkInput(this,'isUserName','用户名为数字,下划线组成',1)
6 表单提交时调用:f1 = checkInput(frm.UserName,'isUserName','用户名为数字,下划线组成',1)
7 */
8 function checkInput(_obj,type,errmsg,flag) {
9 var reg;
10 var obj = $(_obj.id);
11 var info = $(_obj.id + " Info " );
12 switch (type) {
13 case 'isEmpty':
14 reg = /^ /S + $ / ;
15 break ;
16 case 'isEmail':
17 reg = /^ [/w - ] + (/.[/w - ] + ) * @[/w - ] + (/.[/w - ] + ) + $ / ;
18 break ;
19 case 'isPostCode':
20 reg = /^ /d { 6 } $ / ; // 国内的六位邮编格式
21 break ;
22 case 'isTell':
23 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 } $) / ; // 手机号码或区号-电话;
24 break ;
25 case " isUserName " :
26 reg = /^ /w + $ / ; // 字母开头,允许数字,字母和下划线
27 break ;
28 case " isEnglish " :
29 reg = /^ [a - z] { 3 , 20 } $ / ;
30 break ;
31 case " isNumber " :
32 reg =/^ [ 1 - 9 ]/d * $ / ;
33 break ;
34 case " indexChar " :
35 reg =/^ [A - Z]$ /
36 break ;
37 case " isUrl " :
38 reg =/^ /S + $ / ;
39 break ;
40 }
41 // 提交表单或失去焦点进行验证
42 if (flag) {
43 if (reg.test(trim(obj.value)) == false ) {
44 info.innerHTML = " <font color='red'>× " + errmsg + " </font> " ;
45 return false ;}
46 else {
47 info.innerHTML = " <font color='green'>√</font> " ;
48 return true ;}
49 }
50 // 获得焦点时进行提示
51 else {
52 info.innerHTML = " <font color='blue'> " + errmsg + " </font> " ;
53 }
54 }
55 function $(_id) {
56 return document.getElementById(_id);
57 }
58
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
59 function trim(string) { return string.replace( / ( ^ /s * ) | (/s * $) / g, "" );}
调用的方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表单验证示例</title>
<script language="javascript" src="checkform.js"></script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="361" border="1">
<tr><td width="76">验证用户名</td>
<td width="269"><input type="text" name="UserName" id="UserName" οnblur=" checkInput(this,'isUserName','用户名为字母开头,由字母数字和下划线组成',1)" /><span id="UserNameInfo"></span></td></tr>
<tr><td width="76">密码</td>
<td width="269"><input type="text" name="Pwd" id="Pwd" οnblur=" checkInput(this,'isUserName','密码为数字,下划线组成',1)"/><span id="PwdInfo"></span></td></tr>
<tr><td width="76">电子邮件</td>
<td width="269"><input type="text" name="Email" id="Email" /><span id="EmailInfo"></span></td></tr>
<tr><td width="76">邮编</td>
<td width="269"><input type="text" name="PostCode" id="PostCode" /><span id="PostCodeInfo"></span></td></tr>
<tr><td width="76">非空验证</td>
<td width="269"><input type="text" name="isEmapty" id="isEmapty" /><span id="isEmaptyInfo"></span></td></tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><label>
<input type="submit" name="Submit" value="开始验证" />
</label></td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>