`
JavaCrazyer
  • 浏览: 3009022 次
  • 性别: 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  
很不错的，学习了，但是我一般使用正则表达来做这些事情!
发表评论

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

相关推荐

    JavaScript程序设计——页面设置与表单验证实验报告.docx

    实验报告的标题“JavaScript程序设计——页面设置与表单验证实验报告.docx”涉及的核心是JavaScript编程中的两个关键领域：页面设置和表单验证。在Web开发中，JavaScript是一种常用的客户端脚本语言，用于增强用户的...

    js常用的表单验证（自己收集的哦。很多的代码）

    JavaScript是Web开发中不可或缺的一部分，特别是在处理用户交互和表单验证时。表单验证是确保用户输入的数据符合预期格式和规则的关键步骤，可以减少服务器端的处理负担，提高用户体验。以下是一些关于JavaScript...

    js实时动态验证表单是否合法

    - 常用的表单验证库有jQuery Validation Plugin、Formik、Vuelidate等，它们提供丰富的验证规则和友好的API，简化表单验证的实现。 8. **错误提示** - 实时验证成功时应清除错误提示，失败时显示明确的错误信息，...

    jQuery用户注册表单验证代码.zip

    首先，jQuery中的`$(document).ready()`函数是初始化页面加载后执行的常用方法，确保在所有DOM元素加载完成后再进行表单验证的设置。在注册表单验证中，我们通常会在文档加载完成后绑定事件监听器，如`$("#myForm")....

    jQuery表单验证

    jQuery表单验证是一种在网页开发中常用的技术，用于在用户提交数据前检查输入的有效性，确保数据的质量和安全性。在Web应用中，表单验证是不可或缺的部分，它可以帮助减少服务器端的压力，提供更好的用户体验，及时...

    jquery实现的微信开放平台注册界面表单验证网站常用特效源码.zip

    【标题】中的“jquery实现的微信开放平台注册界面表单验证网站常用特效源码”表明这是一个使用jQuery库来实现的项目，主要用于微信开放平台的注册界面。在这个项目中，开发者可能利用了jQuery的强大功能来进行表单...

    基于JavaScript的表单验证.zip

    在网页开发中，表单验证是一项至关重要的任务，它确保用户输入的数据符合预期的格式和规则，从而提高用户体验并减少服务器端的压力。本资源"基于JavaScript的表单验证.zip"提供了一种使用JavaScript进行表单验证的...

    表单提交常用的验证

    在进行Web开发时，表单验证是必不可少的一环。良好的表单验证能够确保用户提交的数据满足预期的要求，从而提高数据的质量与系统的稳定性。本文将详细介绍表单提交中常用的几种验证方式及其应用场景。 #### 1. **...

    最简单的表单验证框架发布

    "Hello, World"是编程初学者常用的入门示例，通常包含最基本的用法，因此我们可以期待在`helloworld.html`文件中找到一个简单的表单验证应用实例。 标签“Java”可能表明这个框架与Java有关，尽管表单验证通常在...

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

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

    javascript常用的页面验证

    这些函数在网页表单验证中十分实用，它们可以帮助开发者创建更健壮、用户体验更好的网页应用程序。通过结合这些函数，你可以轻松地定制适合你项目需求的验证规则，确保用户提交的数据有效且符合规范。

    Vue+Element实现动态生成新表单并添加验证功能

    在Vue.js框架中与Element UI组件库结合实现动态表单生成以及表单验证是一个相当实用的技术应用场景。本文主要阐述了如何使用Vue.js和Element UI来实现表单的动态生成，并为这些动态生成的表单添加了验证功能。 知识...

    日历控件常用注册表单

    在这个注册表单中，JavaScript负责处理日历控件的逻辑，例如显示日历、处理用户的日期选择以及验证用户输入的有效性。常见的JavaScript日历库有jQuery UI的Datepicker、FullCalendar等，它们提供了丰富的选项和定制...

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

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

    精美的表单验证

    JavaScript作为客户端脚本语言，是实现表单验证的常用工具，它的优势在于： 1. 实时性：JavaScript验证可以在用户输入时立即执行，提供即时反馈。 2. 无刷新：验证过程无需页面刷新，保持用户操作流畅。 3. 自定义...

    功能强大的jquery.validate表单验证插件

    在实际的开发过程中，开发者可以参考诸如百度、网易邮箱、京东等知名互联网企业的注册页面来归纳表单验证所需的主要提示信息。例如，表单元素获取焦点后的提示信息帮助用户了解他们应该输入什么类型的数据；验证通过...

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

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

    jquery表单验证插件

    jQuery Validation Plugin是最常用的jQuery表单验证插件之一，由Jörn Zaefferer开发。该插件可以轻松地添加到任何HTML表单，实现对表单元素的实时验证。以下是该插件的核心特性： 1. **实时验证**：在用户输入时...

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