一个网站上通用的验证效果的函数

本文链接：https://blog.csdn.net/pclook/article/details/5953162

之前觉得在注册表单的时候，当填写表单失去焦点进行验证的效果很酷，自己也经历了很多的版本的改进，不过都是JS的代码，现在感觉已经成形了。所以发到网上让大家PK一下。

1 /*
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

// 去掉开始和结束的空格
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>