检测表单（一劳永逸型可扩展）

最新推荐文章于 2025-08-01 12:58:06 发布

原创最新推荐文章于 2025-08-01 12:58:06 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#扩展 #function #input #email #border #action

JAVASCRIPT 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种通过自定义规则实现表单验证的方法，该方法支持多种验证类型，包括文本输入验证、密码验证、邮箱格式验证及复选框选择验证等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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=utf-8" />
<title>检测表单（一劳永逸型可扩展）</title>
</head>

<body>
<script language="javascript">
/*******************************
* 检测表单（一劳永逸型可扩展）
* 作者: 多菜鸟
* 邮箱: kingerq AT msn DOT com
* 创建时间: 2008-03-07
* 来源：http://blog.youkuaiyun.com/kingerq/archive/2008/03/07/2156471.aspx
*
* formName 为表单FORM名
* 说明：以表单自定义的rule中提供的函数为检测条件，提示信息可放入title中，
* 形如：<input name="password" type="text" id="password" rule="checkPassword(obj,'password2')" title="请输入6-15位密码。">
* 调用实例：<form action="" method="post" name="reg" id="reg" onsubmit="return chkform(this)">
**/
function chkform(formName){
if( formName == null ) return false;
for( var i = 0; i < formName.length; i++ ) {
    if( formName[i].getAttribute("rule") == null ) continue;
    obj = formName[i];
    var flag = true;
    eval("var flag = "+obj.getAttribute("rule")+";");
    if( ! flag )
      return false;
}
return true;
}
/*
* 检测文本
* obj 为输入框名，pat 为限制规则
* 调用实例：checkText(obj,/^[a-zA-Z][/w/.]{1,13}[a-zA-Z0-9]$/)
**/
function checkText(obj, pat){
if( !pat ){
    //是否为空
    if( obj.value == "" ) {
      alert(obj.title ? obj.title : "此项目不能为空。");
      obj.focus();
      obj.select();
      return false;
    }
}else{
    //根据正则检测
    if( ! pat.test( obj.value) ) {
      alert(obj.title ? obj.title : "此项目填写有误，请根据提示填写。");
      obj.focus();
      obj.select();
      return false;
    }
}
return true;
}
/*
* 检测密码框
* obj 为输入框名，checkField 为确认密码框name名称
* 调用实例：checkPassword(obj,'password2')
**/
function checkPassword(obj, checkField){
var pat = /^.{6,15}$/;
if( !pat.test(obj.value) ){
    alert(obj.title ? obj.title : "密码输入不正确，请输入6-15位字符。");
    obj.focus();
    obj.select();
    return false;
}
if( checkField != null ) {
    var sf = document.getElementsByName(checkField);
    if( sf[0].value != obj.value ) {
      alert("两次输入的密码不一致，请重新输入。");
      sf[0].focus();
      sf[0].select();
      return false;
    }
}
return true;
}
/*
* 检测邮箱格式
* obj 为输入框名
* 调用实例：email(obj)
**/
function email(obj){
   var reg = /^[^/d/-_][/w/-/.]*[^/-_]@([a-zA-Z/d/-]+/.)+[a-zA-Z]{2,4}$/;
   if(!reg.test(obj.value)){
    alert(obj.title ? obj.title : "请输入正确的邮箱格式。");
    obj.focus();
    obj.select();
    return false;
   }
return true;
}
/*
* 检测CHECKBOX是否有一个被选中
* 参数 ename 为CHECKBOX名称
* 调用实例：checkbox(obj.name)
**/
function checkbox(ename){
n = document.getElementsByName(ename);
for(i = 0; i < n.length; i++){
   if(n[i].checked){
    return true;
   }
}
alert("请至少选择一个项目");
n[0].focus();
return false;
}
</script>
<br>
<table width="98%" border="1" align="center" cellpadding="5" cellspacing="2" bordercolor="#C5EAFC">
<tr>
    <td bordercolor="#0066CC" bgcolor="#0066CC"><strong style="color:#FFFFFF">用户注册</strong></td>
</tr>
</table>
<table width="98%" border="1" align="center" cellpadding="5" cellspacing="0" bordercolor="#C5EAFC" style="border-collapse:collapse;">
<tr>
    <td colspan="2" bgcolor="#5FD5FC">基本信息 ( * 为必填项)</td>
</tr>
<form action="" method="post" name="reg" id="reg" onsubmit="return chkform(this)">
<tr>
    <td width="16%">用户名 * </td>
    <td width="84%">
      <input name="username" type="text" id="username" rule="checkText(obj,/^(?=[a-zA-Z])[/w/.]{2,14}[a-zA-Z0-9]$/)" title="请输入3-15位英文字母、下划线(_)或者点号(.)，并以字母开头。"><br />请输入3-15位英文字母、下划线(_)或者点号(.)，并以字母开头。</td>
</tr>
<tr>
    <td>密码 * </td>
    <td><input name="password" type="text" id="password" rule="checkPassword(obj,'password2')" title="请输入6-15位密码。"><br />输入容易记忆，但又不易被人熟知的6-15位字符，优质的密码应同时包括标点、数字和字母。</td>
</tr>
<tr>
    <td>确认密码 * </td>
    <td><input name="password2" type="text" id="password2"><br />确认上面输入的密码。</td>
</tr>
<tr>
    <td>注册邮箱 * </td>
    <td><input name="email" type="text" id="email" rule="email(obj)"><br />请输入一个注册邮箱，以供密码重置或者忘记密码操作之用。</td>
</tr>
<tr>
    <td> </td>
    <td><label>
      <input name="att" type="checkbox" id="att" rule="checkbox(obj.name)" value="1" />
      发送确认信</label><label>
      <input name="att" type="checkbox" value="2" />
      订阅最新消息</label><label>
      <input name="att" type="checkbox" value="3" />
      热点提示</label>
    </td>
</tr>
<tr>
    <td> </td>
    <td><input type="submit" value="提交"></td>
</tr>
</form>
</table>
</body>
</html>