`
JavaCrazyer
  • 浏览: 2989921 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类

各种常用注册页面表单验证

MobileQQjQueryJavaScript正则表达式 
阅读更多

这里介绍的第一个是最原始的表单验证方式，即没有使用即时验证，需要点击提交按钮才进行验证，也没有使用正则表达式或者AJAX验证，也或者是JQuery的验证，不过这么多验证方式接着第一个后面都会写出来的

 

1、最原始的注册验证方式，需要通过点击提交按钮才验证

先上图



 具体代码

 

<!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>
<div id="content">
    <!--首页的中间部分-->
<SCRIPT language="javascript" type="text/javascript">
//checkUserName() && sNameCheck() && passCheck() && bdaycheck() && genderCheck() && emailcheck() &&
function validateform(){
	if(checkUserName() && sNameCheck() && passCheck()&& emailcheck() && bdaycheck() && genderCheck()  && agree( )) 
	   return true;
	 else
	   return false;
	 
	
}
 //validate Name
function checkUserName(){  
var fname = document.userfrm.fname.value;
var lname = document.userfrm.lname.value;
// validate first Name
if(fname.length != 0){
	for(i=0;i<fname.length;i++){
	var ftext = fname.substring(i,i+1);
		if(ftext < 9 || ftext > 0){
			alert("名字中包含数字 \n"+"请删除名字中的数字和特殊字符");
			document.userfrm.fname.focus();
			document.userfrm.fname.select();
			return false
		}
	}
}
else{
	alert("请输入“名字”文本框");
	document.userfrm.fname.focus();
	return false
}
// Validate last name
if(fname.length != 0){
	for(i=0;i<fname.length;i++){
	var ftext = fname.substring(i,i+1);
		if(ftext < 9 || ftext > 0){
			alert("名字中包含数字 \n"+"请删除名字中的数字和特殊字符");
			document.userfrm.fname.focus();
			document.userfrm.fname.select();
			return false
		}
	}
}
else{
	alert("请输入“名字”文本框");
	document.userfrm.fname.focus();
	return false
}
// Validate last name
if(lname.length != 0){
	for(j=0;j<lname.length;j++){
	var ltext = lname.substring(j,j+1);
		if(ltext < 9 || ltext > 0){
			alert("姓氏中包含数字 \n"+"请删除姓氏中的数字和特殊字符");
			document.userfrm.lname.focus();
			document.userfrm.lname.select();
			return false
		}
	}
}
else{
	alert("“姓氏”文本框为空");
	document.userfrm.lname.focus();
	return false;
	}
return true;
} 
// Login Name Validation
function sNameCheck(){
var sname = document.userfrm.sname.value;
var illegalChars = /\W/;
	if(sname.length != 0){
		if(illegalChars.test(sname)){
		alert("登录名无效");
		document.userfrm.sname.select();
		return false;
		}
	}
	else{
	alert("是否忘记输入登录名？");
	document.userfrm.sname.focus();
	return false
	}
	return true;
}
//Validate password
function passCheck(){
var userpass = document.userfrm.pass.value;
var ruserpass = document.userfrm.rpass.value;
var illegalChars = /[\W_]/;// allow only charactors and numbers
	// Check if Password field is blank.
	if(userpass == "" || ruserpass == ""){
		alert("未输入密码 \n" + "请输入密码");
		document.userfrm.pass.focus();
	return false;
	}
	// Check if password length is less than 6 charactor.
	if(userpass.length < 6){
		alert("密码必须多于或等于 6 个字符。\n");
		document.userfrm.pass.focus();
	return false;
	}
	//check if password contain illigal charactors.
	else if(illegalChars.test(userpass)){
		alert("密码包含非法字符");
		document.userfrm.pass.select();
		return false;
	}
	
	else if(userpass != ruserpass){
		alert("密码不符");
		document.userfrm.rpass.select();
		return false;
	}
	return true;
}

// Email Validation
function emailcheck(){
var usermail = document.userfrm.email.value;

	if(usermail.length == "0"){
	alert("Email 文本框为空")
	document.userfrm.email.focus();
	return false;
	}
	if(	usermail.indexOf("@") < 0 || usermail.indexOf(".") < 0 || usermail.indexOf("@") > usermail.indexOf(".")){
	
	  alert("Email 地址无效");
	  return false;
	}
	return true;
}

function bdaycheck(){
var bmonth = document.userfrm.bmon.value;
var bday = document.userfrm.bday.value;
var byear = document.userfrm.byear.value;
//alert(bmonth + "/" +  bday + "/" + byear);
	if(bmonth == "" || bday == "" || byear == "" || bday=="dd" || byear == "yyyy"){
		alert("请输入您的生日");
		document.userfrm.bmon.focus();
		return false;
	}
	
	for(i=0; i<bday.length; i++){
	var bnum = bday.substring(i,i+1)
		if(!(bnum < 9 || bnum > 0)){
		alert("生日无效");
		document.userfrm.bday.focus();
		return false;
		}
	}

	for(j=0; j<byear.length; j++){
	var bynum = byear.substring(j,j+1)
		if(!(bynum < 9 || bynum > 0)){
		alert("生日无效");
		document.userfrm.byear.focus();
		return false;
		}
	}
	 //验证出生年月日是否在指定的范围内
   if (byear<1900||byear>2120){  
		alert("您输入的出生年份超出范围！\n请重新输入！");
		document.userfrm.byear.focus();
		return(false);
			}
		else 
			if(bmonth<0||bmonth>12){
			 alert("您输入的月份超出范围！\n请重新输入！");
			 document.userfrm.bmon.focus();
			 return(false);
			}
			else 
				if(bday<0||bday>31){
				 alert("您输入的日期超出范围!\n请重新输入！");
				 return(false);
				}
			
	     return true;
}
//check sex
function genderCheck(){
var usergen = document.userfrm.gen.length;
	for(i=0;i<usergen;i++){
		if(document.userfrm.gen[i].checked){
		return true;
		}
		if (i==usergen-1){
		alert("请选择性别");
		return false;
		}
	}
	return true;
}
function agree( )
{
   if (document.userfrm.okradio[0].checked==false)
   {
      alert("您必须同意淘宝网的协议！才能加入会员");
	  return false;
   }
   else
      return true;
}
</SCRIPT>

<TABLE width="950" border="0" align="center">
  <TR>
    <TD height="75"><h4>注册步骤： 1.填写信息　&gt;　 2.收电子邮件　&gt;　3.注册成功 </h4></TD>
    </TR>
</TABLE>

<TABLE width="950" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#99CCFF">
 <FORM name="userfrm" method="post" action="register_success.htm" onSubmit="return validateform( )">
  <TR class="register_table_line">
    <TD width="160" align="right" bgcolor="#E7FBFF">名字：</TD>
    <TD width="507" align="left" bordercolor="#E7E3E7"><INPUT name="fname" type="text" class="register_textBroader"  

 id="fname" size="24"></TD>
  </TR>
  <TR class="register_table_line">
    <TD width="160" align="right" bgcolor="#E7FBFF">姓氏：</TD>
    <TD align="left" bordercolor="#E7E3E7"><INPUT name="lname" type="text" class="register_textBroader"  id="lname" 

size="24"></TD>
  </TR>
  <TR class="register_table_line">
    <TD width="160"  align="right" bgcolor="#E7FBFF">登录名：</TD>
    <TD align="left" bordercolor="#E7E3E7"> <INPUT name="sname" type="text" class="register_textBroader"  id="sname" 

size="24">
（可包含 a-z、0-9 和下划线）</TD>
  </TR>
  <TR class="register_table_line">
    <TD width="160" align="right" bgcolor="#E7FBFF">密码：</TD>
    <TD align="left" bordercolor="#E7E3E7"> <INPUT name="pass" type="password" class="register_textBroader"  

id="pass" size="26">
（至少包含 6 个字符） </TD>
  </TR>
  <TR class="register_table_line">
    <TD width="160" height="0" align="right" bgcolor="#E7FBFF">再次输入密码：</TD>
    <TD height="0" align="left" bordercolor="#E7E3E7"><INPUT name="rpass" type="password" 

class="register_textBroader"  id="rpass" size="26"></TD>
  </TR>
  <TR class="register_table_line">
    <TD width="160" height="0" align="right" bgcolor="#E7FBFF">电子邮箱：</TD>
    <TD height="0" align="left" bordercolor="#E7E3E7"><INPUT name="email" type="text" class="register_textBroader"  

id="email" size="24">（必须包含 @  字符）</TD>
  </TR>
  <TR class="register_table_line">
    <TD width="160" align="right" bgcolor="#E7FBFF">性别：</TD>
    <TD align="left" bordercolor="#E7E3E7">
		<INPUT name="gen" type="radio"   value="男" checked>
	     男&nbsp; 
	    <INPUT name="gen" type="radio" value="女" class="input">	    女
    </TD>
  </TR>
  <TR class="register_table_line">
    <TD width="160" align="right" bgcolor="#E7FBFF">爱好：</TD>
    <TD align="left" bordercolor="#E7E3E7">
	  <LABEL>
	  	<INPUT type="checkbox" name="checkbox" value="checkbox">
	  </LABEL>
		  运动&nbsp;&nbsp;
	  <LABEL>
	  <INPUT type="checkbox" name="checkbox2" value="checkbox">
	  </LABEL>
		聊天&nbsp;&nbsp;
	  <LABEL>
		<INPUT type="checkbox" name="checkbox22" value="checkbox">
	  </LABEL>
		玩游戏
	</TD>
  </TR>
  <TR class="register_table_line">
    <TD width="160" align="right" bgcolor="#E7FBFF">出生日期：</TD>
    <TD align="left" bordercolor="#E7E3E7">
		<INPUT name="byear" class="register_textBroader"   id="byear" onFocus="this.value=''" value="yyyy" 

size=4 maxLength=4 >&nbsp;年&nbsp&nbsp
		   <SELECT name="bmon"  >
			<OPTION value="" selected>[选择月份]
		     <OPTION value=0>一月
		     <OPTION value=1>二月
		     <OPTION value=2>三月
		     <OPTION value=3>四月
		     <OPTION value=4>五月
		     <OPTION value=5>六月
		     <OPTION value=6>七月
		     <OPTION value=7>八月
		     <OPTION value=8>九月
		     <OPTION value=9>十月
		     <OPTION value=10>十一月
		     <OPTION value=11>十二月 
		  </SELECT>&nbsp月&nbsp&nbsp;
		  <INPUT name="bday" class="register_textBroader" id="bday" onFocus="this.value=''" value="dd" 

size=2 maxLength=2 >日 
	</TD>
  </TR>
  <TR class="register_table_line">
    <TD width="160" height="35" align="right" bgcolor="#E7FBFF">
        <INPUT type="reset" name="Reset" value=" 重   填 "></TD>
    <TD height="35" align="left" bordercolor="#E7E3E7">
		<INPUT type="submit" name="Button" value="同意以下服务条款，提交注册信息">
	</TD>
  </TR>
  <TR>
    <TD colspan="2"><TABLE width="760" border="0">
      <TR>
        <TD height="36">
			<H4>阅读淘宝网服务协议 </H4>
	    </TD>
      </TR>
      <TR>
        <TD height="120">
			<TEXTAREA name="textarea" cols="80" rows="6">
欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Taobao.com网站的各种工具和服务。
本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。 
淘宝的权利和义务
1.淘宝有义务在现有技术上维护整个网上交易平台的正常运行，并努力提升和改进技术，使用户网上交易活动的顺利。 
2.对用户在注册使用淘宝网上交易平台中所遇到的与交易或注册有关的问题及反映的情况，淘宝应及时作出回复。 
3.对于在淘宝网网上交易平台上的不当行为或其它任何淘宝认为应当终止服务的情况，淘宝有权随时作出删除相关信息、终止服务提

供等处理，而无须征得用户的同意。 
4.因网上交易平台的特殊性，淘宝没有义务对所有用户的注册资料、所有的交易行为以及与交易有关的其他事项进行事先审查。 	
		  </TEXTAREA>
		</TD>
      </TR>
    </TABLE></TD>
  </TR>
  </FORM>
</TABLE>
</div>
</body>
</html>

 

2、正则表达式方式的验证方式【这个验证比较标准而且比较全面，不过也是通过点击提交按钮才进行验证】

本实例可以这样验证



 也可以这样验证



 

具体代码

<!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>表单验证类Validator v1</title>
<style>
 body,td{font:normal 12px Verdana;color:#333333}
 input,textarea,select,td{font:normal 12px Verdana;color:#333333;border:1px solid #999999;background:#ffffff}
 table{border-collapse:collapse;}
 td{padding:3px}
 input{height:20;}
 textarea{width:80%;height:50px;overflow:auto;}
 form{display:inline}
 </style>
</head>
<body>
<table align="center">
		<form name="theForm" id="demo" method="get" onSubmit="return Validator.Validate(this,2)">
				<tr>
						<td>身份证号：</td>
						<td><input name="Card" dataType="IdCard" msg="身份证号错误"></td>
				</tr>
				<tr>
						<td>真实姓名：</td>
						<td><input name="Name" dataType="Chinese" msg="真实姓名只允许中文"></td>
				</tr>
				<tr>
						<td>ID：</td>
						<td><input name="username" dataType="Username" msg="ID名不符合规定"></td>
				</tr>
				<tr>
						<td>英文名：</td>
						<td><input name="Nick" dataType="English" require="false" msg="英文名只允许英文字母"></td>
				</tr>
				<tr>
						<td>主页：</td>
						<td><input name="Homepage" require="false" dataType="Url"   msg="非法的Url"></td>
				</tr>
				<tr>
						<td>密码：</td>
						<td><input name="Password" dataType="SafeString"   msg="密码不符合安全规则" type="password"></td>
				</tr>
				<tr>
						<td>重复：</td>
						<td><input name="Repeat" dataType="Repeat" to="Password" msg="两次输入的密码不一致" type="password"></td>
				</tr>
				<tr>
						<td>信箱：</td>
						<td><input name="Email" dataType="Email" msg="信箱格式不正确"></td>
				</tr>
				<tr>
						<td>信箱：</td>
						<td><input name="Email" dataType="Repeat" to="Email" msg="两次输入的信箱不一致"></td>
				</tr>
				<tr>
						<td>QQ：</td>
						<td><input name="QQ" require="false" dataType="QQ" msg="QQ号码不存在"></td>
				</tr>
				<tr>
						<td>身份证：</td>
						<td><input name="Card" dataType="IdCard" msg="身份证号码不正确"></td>
				</tr>
				<tr>
						<td>年龄：</td>
						<td><input name="Year" dataType="Range" msg="年龄必须在18~28之间" min="18" max="28"></td>
				</tr>
				<tr>
						<td>年龄1：</td>
						<td><input name="Year1" require="false" dataType="Compare" msg="年龄必须在18以上" to="18" operator="GreaterThanEqual"></td>
				</tr>
				<tr>
						<td>电话：</td>
						<td><input name="Phone" require="false" dataType="Phone" msg="电话号码不正确"></td>
				</tr>
				<tr>
						<td>手机：</td>
						<td><input name="Mobile" require="false" dataType="Mobile" msg="手机号码不正确"></td>
				</tr>
				<tr>
						<td>生日：</td>
						<td><input name="Birthday" dataType="Date" format="ymd" msg="生日日期不存在"></td>
				</tr>
				<tr>
						<td>邮政编码：</td>
						<td><input name="Zip" dataType="Custom" regexp="^[1-9]\d{5}$" msg="邮政编码不存在"></td>
				</tr>
				<tr>
						<td>邮政编码：</td>
						<td><input name="Zip1" dataType="Zip" msg="邮政编码不存在"></td>
				</tr>
				<tr>
						<td>操作系统：</td>
						<td><select name="Operation" dataType="Require"  msg="未选择所用操作系统" >
										<option value="">选择您所用的操作系统</option>
										<option value="Win98">Win98</option>
										<option value="Win2k">Win2k</option>
										<option value="WinXP">WinXP</option>
								</select></td>
				</tr>
				<tr>
						<td>所在省份：</td>
						<td>广东
								<input name="Province" value="1" type="radio">
								陕西
								<input name="Province" value="2" type="radio">
								浙江
								<input name="Province" value="3" type="radio">
								江西
								<input name="Province" value="4" type="radio" dataType="Group"  msg="必须选定一个省份" ></td>
				</tr>
				<tr>
						<td>爱好：</td>
						<td>运动
								<input name="Favorite" value="1" type="checkbox">
								上网
								<input name="Favorite" value="2" type="checkbox">
								听音乐
								<input name="Favorite" value="3" type="checkbox">
								看书
								<input name="Favorite" value="4" type="checkbox"" dataType="Group" min="2" max="3"  msg="必须选择2~3种爱好"></td>
				</tr>
				<td>自我介绍：</td>
				<td><textarea name="Description" dataType="Limit" max="10"  msg="自我介绍内容必须在10个字之内">中文是一个字</textarea></td>
				</tr>
				
				<td>自传：</td>
				<td><textarea name="History" dataType="LimitB" min="3" max="10"  msg="自传内容必须在[3,10]个字节之内">中文是两个字节t</textarea></td>
				</tr>
				
				<tr>
						<td>相片上传：</td>
						<td><input name="up" dataType="Filter" msg="非法的文件格式" type="file" accept="jpg, gif, png"></td>
				</tr>
				<tr>
						<td colspan="2"><input name="Submit" type="submit" value="确定提交">
								<input onClick="Validator.Validate(document.getElementById('demo'))" value="检验模式1" type="button">
								<input onClick="Validator.Validate(document.getElementById('demo'),2)" value="检验模式2" type="button">
								<input onClick="Validator.Validate(document.getElementById('demo'),3)" value="检验模式3" type="button"></td>
				</tr>
		</form>
</table>
<script>
 Validator = {
	Require : /.+/,
	Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
	Phone : /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,
	Mobile : /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/,
	Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,
	IdCard : "this.IsIdCard(value)",
	Currency : /^\d+(\.\d+)?$/,
	Number : /^\d+$/,
	Zip : /^[1-9]\d{5}$/,
	QQ : /^[1-9]\d{4,8}$/,
	Integer : /^[-\+]?\d+$/,
	Double : /^[-\+]?\d+(\.\d+)?$/,
	English : /^[A-Za-z]+$/,
	Chinese :  /^[\u0391-\uFFE5]+$/,
	Username : /^[a-z]\w{3,}$/i,
	UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/,
	IsSafe : function(str){return !this.UnSafe.test(str);},
	SafeString : "this.IsSafe(value)",
	Filter : "this.DoFilter(value, getAttribute('accept'))",
	Limit : "this.limit(value.length,getAttribute('min'),  getAttribute('max'))",
	LimitB : "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))",
	Date : "this.IsDate(value, getAttribute('min'), getAttribute('format'))",
	Repeat : "value == document.getElementsByName(getAttribute('to'))[0].value",
	Range : "getAttribute('min') < (value|0) && (value|0) < getAttribute('max')",
	Compare : "this.compare(value,getAttribute('operator'),getAttribute('to'))",
	Custom : "this.Exec(value, getAttribute('regexp'))",
	Group : "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))",
	ErrorItem : [document.forms[0]],
	ErrorMessage : ["以下原因导致提交失败：\t\t\t\t"],
	Validate : function(theForm, mode){
		var obj = theForm || event.srcElement;
		var count = obj.elements.length;
		this.ErrorMessage.length = 1;
		this.ErrorItem.length = 1;
		this.ErrorItem[0] = obj;
		for(var i=0;i<count;i++){
			with(obj.elements[i]){
				var _dataType = getAttribute("dataType");
				if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined")  continue;
				this.ClearState(obj.elements[i]);
				if(getAttribute("require") == "false" && value == "") continue;
				switch(_dataType){
					case "IdCard" :
					case "Date" :
					case "Repeat" :
					case "Range" :
					case "Compare" :
					case "Custom" :
					case "Group" : 
					case "Limit" :
					case "LimitB" :
					case "SafeString" :
					case "Filter" :
						if(!eval(this[_dataType]))	{
							this.AddError(i, getAttribute("msg"));
						}
						break;
					default :
						if(!this[_dataType].test(value)){
							this.AddError(i, getAttribute("msg"));
						}
						break;
				}
			}
		}
		if(this.ErrorMessage.length > 1){
			mode = mode || 1;
			var errCount = this.ErrorItem.length;
			switch(mode){
			case 2 :
				for(var i=1;i<errCount;i++)
					this.ErrorItem[i].style.color = "red";
			case 1 :
				alert(this.ErrorMessage.join("\n"));
				this.ErrorItem[1].focus();
				break;
			case 3 :
				for(var i=1;i<errCount;i++){
				try{
					var span = document.createElement("SPAN");
					span.id = "__ErrorMessagePanel";
					span.style.color = "red";
					this.ErrorItem[i].parentNode.appendChild(span);
					span.innerHTML = this.ErrorMessage[i].replace(/\d+:/,"*");
					}
					catch(e){alert(e.description);}
				}
				this.ErrorItem[1].focus();
				break;
			default :
				alert(this.ErrorMessage.join("\n"));
				break;
			}
			return false;
		}
		return true;
	},
	limit : function(len,min, max){
		min = min || 0;
		max = max || Number.MAX_VALUE;
		return min <= len && len <= max;
	},
	LenB : function(str){
		return str.replace(/[^\x00-\xff]/g,"**").length;
	},
	ClearState : function(elem){
		with(elem){
			if(style.color == "red")
				style.color = "";
			var lastNode = parentNode.childNodes[parentNode.childNodes.length-1];
			if(lastNode.id == "__ErrorMessagePanel")
				parentNode.removeChild(lastNode);
		}
	},
	AddError : function(index, str){
		this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index];
		this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str;
	},
	Exec : function(op, reg){
		return new RegExp(reg,"g").test(op);
	},
	compare : function(op1,operator,op2){
		switch (operator) {
			case "NotEqual":
				return (op1 != op2);
			case "GreaterThan":
				return (op1 > op2);
			case "GreaterThanEqual":
				return (op1 >= op2);
			case "LessThan":
				return (op1 < op2);
			case "LessThanEqual":
				return (op1 <= op2);
			default:
				return (op1 == op2);            
		}
	},
	MustChecked : function(name, min, max){
		var groups = document.getElementsByName(name);
		var hasChecked = 0;
		min = min || 1;
		max = max || groups.length;
		for(var i=groups.length-1;i>=0;i--)
			if(groups[i].checked) hasChecked++;
		return min <= hasChecked && hasChecked <= max;
	},
	DoFilter : function(input, filter){
return new RegExp("^.+\.(?=EXT)(EXT)$".replace(/EXT/g, filter.split(/\s*,\s*/).join("|")), "gi").test(input);
	},
	IsIdCard : function(number){
		var date, Ai;
		var verify = "10x98765432";
		var Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
		var area = ['','','','','','','','','','','','北京','天津','河北','山西','内蒙古','','','','','','辽宁','吉林','黑龙江','','','','','','','','上海','江苏','浙江','安微','福建','江西','山东','','','','河南','湖北','湖南','广东','广西','海南','','','','重庆','四川','贵州','云南','西藏','','','','','','','陕西','甘肃','青海','宁夏','新疆','','','','','','台湾','','','','','','','','','','香港','澳门','','','','','','','','','国外'];
		var re = number.match(/^(\d{2})\d{4}(((\d{2})(\d{2})(\d{2})(\d{3}))|((\d{4})(\d{2})(\d{2})(\d{3}[x\d])))$/i);
		if(re == null) return false;
		if(re[1] >= area.length || area[re[1]] == "") return false;
		if(re[2].length == 12){
			Ai = number.substr(0, 17);
			date = [re[9], re[10], re[11]].join("-");
		}
		else{
			Ai = number.substr(0, 6) + "19" + number.substr(6);
			date = ["19" + re[4], re[5], re[6]].join("-");
		}
		if(!this.IsDate(date, "ymd")) return false;
		var sum = 0;
		for(var i = 0;i<=16;i++){
			sum += Ai.charAt(i) * Wi[i];
		}
		Ai +=  verify.charAt(sum%11);
		return (number.length ==15 || number.length == 18 && number == Ai);
	},
	IsDate : function(op, formatString){
		formatString = formatString || "ymd";
		var m, year, month, day;
		switch(formatString){
			case "ymd" :
				m = op.match(new RegExp("^((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})$"));
				if(m == null ) return false;
				day = m[6];
				month = m[5]*1;
				year =  (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10));
				break;
			case "dmy" :
				m = op.match(new RegExp("^(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))$"));
				if(m == null ) return false;
				day = m[1];
				month = m[3]*1;
				year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10));
				break;
			default :
				break;
		}
		if(!parseInt(month)) return false;
		month = month==0 ?12:month;
		var date = new Date(year, month-1, day);
        return (typeof(date) == "object" && year == date.getFullYear() && month == (date.getMonth()+1) && day == date.getDate());
		function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;}
	}
 }
</script>
</body>
</html>

 


第三种验证，实际项目中比较常用的(JQuery+AJAX+MD5)，属于即时验证，亮点是验证用户是否存在的那一项




 具体示例

registe.jsp

<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!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>
<title>注册验证</title>
<script type="text/javascript" src="md5.js"></script>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<link type="text/css" rel="stylesheet" href="validator.css"></link>
<script src="formValidator.js" type="text/javascript" charset="UTF-8"></script>

<script type="text/javascript">
$(document).ready(function(){
  $.formValidator.initConfig({formid:"myform",onerror:function(msg){alert(msg)},onsuccess:function(){
		$('#pwd').val(MD5($('#pwd').val()));
	  return true;
	}});
  
  $("#loginname").formValidator({onshow:"请输入用户名",onfocus:"用户名至少3个字符,最多10个字符",oncorrect:"该用户名可以注册"}).inputValidator({min:3,max:10,onerror:"你输入的用户名非法,请确认"})
   .ajaxValidator({
	   type : "post",
		url : "account.do?"+Math.random(),
		datatype : "text",
		success : function(data){	
            if(data==1){
                return false;
            } else{
                return true;
			 }
		},
		buttons: $("#lnbtn"),
		error: function(){alert("服务器没有返回数据，可能服务器忙，请重试");},
		onerror : "该用户名存在，请更换用户名",
		oncorrect:"恭喜你,该用户名可用",
		onwait : "正在对用户名进行合法性校验，请稍候..."
	});
  $("#pwd").formValidator({onshow:"请输入密码",onfocus:"密码不能为空",oncorrect:"密码合法"}).inputValidator({min:3,empty:{leftempty:false,rightempty:false,emptyerror:"密码两边不能有空符号"},onerror:"密码不能为空,请确认"});
	$("#confirm_pwd").formValidator({onshow:"请输入重复密码",onfocus:"两次密码必须一致哦",oncorrect:"密码一致"}).inputValidator({min:1,empty:{leftempty:false,rightempty:false,emptyerror:"重复密码两边不能有空符号"},onerror:"重复密码不能为空,请确认"}).compareValidator({desid:"pwd",operateor:"=",onerror:"2次密码不一致,请确认"});
	$("#email").formValidator({onshow:"请输入邮箱",onfocus:"邮箱6-100个字符,输入正确了才能离开焦点",oncorrect:"恭喜你,你输对了",defaultvalue:"@"}).inputValidator({min:6,max:100,onerror:"你输入的邮箱长度非法,请确认"}).regexValidator({regexp:"^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onerror:"你输入的邮箱格式不正确"});
});

function submitForm(){
	var pwd = document.getElementById('pwd');
	pwd.value = MD5(pwd.value);
	return true;
}
</script>
</head>
<body>
<!-- 页头结束 -->
<!--　广告栏开始 -->
<!--　广告栏结束 -->
<!-- 主内容开始 -->
<div id="content">
	<!-- 注册栏开始 -->
  <div class="longBar">
  	<div class="longTitle">注册新会员</div>
    <div class="longBody">
      <form id="myform" action="account.do?method=registe" method="post">
 			<table width="100%" border="0" cellspacing="5" cellpadding="5">
        <tr>
          <td width="23%" align="right"><span class="redStar">*</span>会员名：</td>
          <td width="19%">
            <input name="loginname" class="text" type="text" id="loginname" tabindex="1" size="30" maxlength="20" />
            <input type="button" value="用户名是否可用" id="lnbtn"/>
            </td>
          <td width="58%"><div id="loginnameTip"></div></td>
        </tr>
        <tr>
          <td align="right"><span class="redStar">*</span>密码：</td>
          <td><input name="pwd" class="text" type="password" id="pwd" tabindex="2" size="30" maxlength="20" /></td>
          <td><div id="pwdTip"></div></td>
        </tr>
        <tr>
          <td align="right"><span class="redStar">*</span>重复密码：</td>
          <td><input name="confirm_pwd" class="text" type="password" id="confirm_pwd" tabindex="3" size="30" maxlength="20" /></td>
          <td><div id="confirm_pwdTip"></div></td>
        </tr>
        <tr>
          <td align="right"><span class="redStar">*</span>邮件地址：</td>
          <td><input id="email" class="text" tabindex="4" name="email" size="30" type="text" /></td>
          <td><div id="emailTip"></div></td>
        </tr>
        <tr>
          <td colspan="3" align="right"><div align="center">-------------------------------- 以 下 为 选 填 项 目 ----------------------------------</div></td>
          </tr>
        <tr>
          <td align="right">真实姓名：</td>
          <td><input id="username" class="text" name="username" tabindex="5" size="30" type="text" /> </td>
          <td><div id="usernameTip"></div></td>
        </tr>
        <tr>
          <td align="right">联系电话：</td>
          <td><input id="phone" class="text" name="phone" tabindex="6" size="30" type="text" /> </td>
          <td><div id="phoneTip"></div></td>
        </tr>
        <tr>
          <td align="right">手机号码：</td>
          <td><input id="mobile" class="text" name="mobile" tabindex="7" size="30" type="text" /> </td>
          <td><div id="mobileTip"></div></td>
        </tr>
        <tr>
          <td align="right">通讯地址：</td>
          <td><input id="address" class="text" name="address" tabindex="9" size="35" type="text" /> </td>
          <td><div id="addressTip"></div></td>
        </tr>
        <tr>
          <td align="right">邮政编码：</td>
          <td><input id="zipCode" class="text" name="zipCode" tabindex="10" size="30" type="text" /> </td>
          <td><div id="zipCodeTip"></div></td>
        </tr>
        <tr>
          <td align="right"></td>
          <td colspan="2"><input type="submit" class="submit" tabindex="11" value="提交注册"/></td>
        </tr>
      </table>
      </form>
    </div>
  </div>
  <!-- 注册栏结束 -->
</div>
<!-- 主内容结束 -->
<div class="hackBox"></div>

</body>
</html>
 

 AccountServlet.java

package com.validator.test;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AccountServlet extends HttpServlet {


	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);

	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String loginname=request.getParameter("loginname");
		PrintWriter out = response.getWriter();
		if(loginname.equals("abc123")){
			out.println("1");
		}else{
			out.println("0");
		}
		out.flush();
		
	}

}
 示例中用到的JS和CS文件打包在下面提供下载

 

  • 大小: 23.4 KB
  • 大小: 14.5 KB
  • 大小: 23.5 KB
  • 大小: 6.3 KB
10
顶
1
踩
分享到：
| JS中关于checkbox全选或全不选
评论
3 楼 另一花生 2013-10-31  
楼主写的很详细，谢谢，我好好研究研究？我刚开始接触jquery和ajax，请问可以用你的代码速成么？就是实现那个不用刷新的验证，，，
2 楼 linyi271 2012-06-14  
怎么没有详细注释了，有详细的注释可以更好的理解代码， 以及实现的功能。
1 楼 jacking124 2011-07-08  
很不错的，学习了，但是我一般使用正则表达来做这些事情!
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    常用表单数据验证JS

    里面包含了一些对于页面表单常用的数据验证

    jQ表单万能验证插件 vf-validate.js

    插件简介：使用HTML标签属性，快速实现常用表单验证功能 JQ表单验证插件 使用方法：$.formValidate(options); version：1.6.0 @param {Object} options @param options.area 验证的区域父级元素，默认 body @param ...

    表单提交常用的验证

    提交表单常用的验证 readOnly：字段是否只读，默认为false maxLength：字段允许输入的最大长度 minLength：字段允许输入的最小长度 vtype：验证类型的名字 alpha：限制只能输入字母 alphanum：限制只能输入字母...

    jsvalidation 强大而灵活的表单客户端验证框架

    简便的XML配置，易于扩充的验证方式（目前支持13种验证，囊括了大部分常用表单验证），使得JSValidation成为验证框架的首选。 1. JSValidation是什么？ 如首页所说，JSValidation是客户端表单验证框架，用在...

    web前端开发教程之编写简洁的页面表单验证程序

    看了山人表单验证，又看了其他一些验证程序和相关的一些参考资料，写出了一个比较简洁的js表单验证程序。 功能简述： 验证： http地址 时间日期 e-mail 数字 字符长度检查 一项输入与另一项输入比较（例如：...

    HTML5 Ajax验证的用户注册表单.rar

    HTML5 Ajax验证的用户注册表单，无刷新输入判断的HTML5表单特效，界面风格漂亮，功能简洁实用，表单验证方面包括：用户名、邮箱地址判断、密码字符验证、两次密码是否一致判断、是否同意注册协议等，几个常用的判断...

    [示例][PHP]常用表单的PHP验证类.zip

    页面作用： 常用表单验证类， 验证是否为指定长度的字母/数字组合， 是否为指定长度数字， 是否为指定长度汉字， 验证身份证号码， 验证邮件地址， 验证电话号码

    常用表单的PHP验证类.zip

    &lt;?... class class_post {  function fun_text1($num... }页面作用：常用表单验证类，验证是否为指定长度的字母/数字组合，是否为指定长度数字，是否为指定长度汉字，验证身份证号码，验证邮件地址，验证电话号码

    js验证表单大全.doc

    在页面提交前做相关的数据验证，此文档提供常用的表单验证示例

    JSValidation-----强大而灵活的表单客户端验证框架

    简便的XML配置，易于扩充的验证方式（目前支持13种验证，囊括了大部分常用表单验证），使得JSValidation成为验证框架的首选。 1. JSValidation是什么？ 如首页所说，JSValidation是客户端表单验证框架，用在...

    js 常用正则表达式表单验证代码

    这称为数据有效性验证。替换文本。可以在文档中使用一个正则表达式来标识特定文字，然后可以全部将其删除，或者替换为别的文字。根据模式匹配从字符串中提取一个子字符串。可以用来在文本或输入字段中查找特定文字。...

    超酷的jQuery带验证登录表单 注册登录可自由切换

    今天我们要给大家带来一款非常实用的jQuery登录表单插件，这款jQuery登录表单的特点是可以对一些注册登录时常用的字段类型进行简单的验证，比如电子邮件格式和必填检查。另外还有一个特点是我们可以在同一个页面完整...

    php常用表单验证类用法实例

    * 页面作用：常用表单验证类 * 作 者：欣然随风 * QQ：276624915 */ class class_post { //验证是否为指定长度的字母/数字组合 function fun_text1($num1,$num2,$str) { Return (preg_match("/^[a-zA-Z0-9]{".$num1...

    Jquery表单验证

    很好用的验证，页面中要验证的标签（做一些常用的演示）

    常用表单验证类，有了这个，一般的验证就都齐了。

    php /** * 页面作用：常用表单验证类 * 作 者：欣然随风 * 建立时间：2006-3-6 * QQ：276624915 */ class class_post { //验证是否为指定长度的字母/数字组合 function fun_text1($num1,$num2,$str...

    基于PHP+Ajax实现表单验证的详解

    一，利用键盘响应，在不刷新本页面的情况下验证表单输入是否合法用户通过onkeydown和onkeyup事件来触发响应事件。使用方法和onclick事件类似。onkeydown表示当键盘上的键被按下时触发，onkeyup和它正好相反，当键盘...

    js常用实例

    js常用页面效果 包含表单验证 微博分享 饼状图 统计

    客户端统一验证JavaScript函数库及示例源码

    参数myform指代验证的表单，可以比作验证树DOM的根，之后的JavaScript会遍历所有元素(elements)，逐个检验，若没有设置验证则直接跳过，若有一个验证不通过，都不会将表单提交，并将光标定位到该处(focus())，若有...

    【Flask】学习——Web表单（普通表单和Flask-WTF）

    文章目录一、概述二、普通表单示例2.1 普通的表单2.2 flash消息优化普通表单三、WTForms支持3.1 HTML标准字段3.2 常用验证函数四、WTForm示例五、WTForm逻辑验证 一、概述 Web表单是Web应用程序的基本功能。 它是...

Magicbox
Global site tag (gtag.js) - Google Analytics