<!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.csdn.net/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" οnsubmit="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" οnsubmit="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>