本博主要是運用正則表達式，登陸界面進行出生日期選擇，用到年月日的三級聯動，第一種驗證方式用到的innerHTML的的動態驗證輸入信息，第二種驗證方式利用數組彈窗驗證。
效果：
圖1.1
圖1.2
圖1.3
圖1.4
代碼：
登錄頁面的login.html的，主要是年月日三級聯動
<！DOCTYPE html>
<HTML>
<HEAD>
<meta charset =“utf-8”>
<TITLE> </ TITLE>
<style type =“text / css”>
身體{
font-size：12px;
}
DIV {
餘量：0像素;
填充頂：30PX;
寬度：800像素;
}
字段集{
border：1px solid #ccc;
寬度：400px;
填充：20像素;
}
傳說{
margin-left：50px;
}
標籤{
寬度：70像素;
顯示：塊;
向左飄浮;
文本對齊：權利;
}
。文本{
邊框：1px純黑色;
}
跨度{
顏色：灰色;
}
</ style>
<script type =“text / javascript”>
window.onload = function（）{
strYYYY = document.form1.YYYY.outerHTML;
strMM = document.form1.MM.outerHTML;
strDD = document.form1.DD.outerHTML;
MonHead = [31,28,31,30,31,30,31,31,30,31,30,31];
//先給年下拉框賦內容
var y = new Date（）。getFullYear（）;
var str = strYYYY.substring（0，strYYYY.length - 9）;
for（var i =（y-30）; 我<（y + 30）; i ++）//以今年爲準，前30年，後30年
{
str + =“<option value ='”+ i +“'>”+ i +“</ option> \ r \ n”;
}
document.form1.YYYY.outerHTML = str +“</ select>”;
//賦月份的下拉框
var str = strMM.substring（0，strMM.length - 9）;
for（var i = 1; 我<13; i ++）{
str + =“<option value ='”+ i +“'>”+ i +“</ option> \ r \ n”;
}
document.form1.MM.outerHTML = str +“</ select>”;
document.form1.YYYY.value = y;
document.form1.MM.value = new Date（）。getMonth（）+ 1;
var n = MonHead [new Date（）。getMonth（）];
if（new Date（）。getMonth（）== 1 && IsPinYear（YYYYvalue））n ++;
writeDay（N）; //賦予日期下拉框
document.form1.DD.value = new Date（）。getDate（）;
}
//年發生變化時日期發生變化（主要是判斷閏年）
函數YYYYMM（str）{
var MMvalue = document.form1.MM.options [document.form1.MM.selectedIndex] .value;
if（MMvalue ==“”）{DD.outerHTML = strDD; 返回;}
var n = MonHead [MMvalue - 1];
if（MMvalue == 2 && IsPinYear（str））n ++;
writeDay（n）的
}
//月發生變化時日期聯動
函數MMDD （str）{
var YYYYvalue = document.form1.YYYY.options [document.form1.YYYY.selectedIndex] .value;
if（str ==“”）{DD.outerHTML = strDD; 返回;}
var n = MonHead [str - 1];
if（str == 2 && IsPinYear（YYYYvalue））n ++;
writeDay（n）的
}
//據條件寫日期的下拉框
函數writeDay（n）{
var s = strDD.substring（0，strDD.length - 9）;
for（var i = 1; 我<（n + 1）; i ++）
s + =“<option value ='”+ i +“'>”+ i +“</ option> \ r \ n”;
document.form1.DD.outerHTML = s +“</ select>”;
}
//判斷是否閏平年
函數IsPinYear（year）{
return（0 == year％4 &&（year％100！= 0 || 年）％400 == 0））}
函數init（）{
的document.getElementById（'txtName的'）值= NULL;
}
函數$（id）{
return document.getElementById（id）;
}
函數checkName（）{
var name = $（“txtName”）.value;
var nameReg = / ^ [\ u4e00- \ u9fa5] {1，} $ /;
如果（！nameReg.test（名稱））{
name_prompt.innerHTML =“錯誤，由中文組成”;
返回false;
}
name_prompt.innerHTML =“格式正確”;
返回true;
}
函數checkPwd（）{
var name = $（“txtPwd”）.value;
var name_prompt = $（“span_pwd”）;
var nameReg = / ^ [a-zA-Z0-9] {4,10} $ /;
如果（！nameReg.test（名稱））{
name_prompt.innerHTML =“錯誤，由英文字母和數字組成的4-10位字符”;
返回FALSE;
}
name_prompt.innerHTML =“格式正確”;
返回true;
}
函數check（）{
如果（檢查名（）&& checkPwd（））{
返回true;
}
返回FALSE;
}
</ SCRIPT>
</ HEAD>
<BODY>
<DIV>
<形成的onsubmit =“返回校驗（）”動作=“Home.html中”名稱=“form1的” />
<字段集>
<圖例>信息查詢</圖例>
<P>
<標籤>用戶名：</標籤>
<INPUT TYPE =“文本” ID =“txtName的”類=“TXT”的onmouseover =“this.style.border = '固體1px的＃FF0000'”的onmouseout = “this.style.border ='solid 1px black'
<span id =“span_name”> </ span>
</ p>
<p>
<label>密碼：</ label>
<input type =“password”id =“txtPwd”class =“txt”onmouseover =“this。 style.border ='solid 1px＃FF0000'“onmouseout =”this.style.border ='solid 1px black'“onblur =”checkPwd（）“/>
<span id =”span_pwd“> </ span>
</ p >
<P>
<標籤>出生日期：</標籤>
<選擇name = YYYY平變化=“YYYYMM（THIS.VALUE）”>
<選項值=“”>年</選項>
</選擇>
<選擇name = MM onchange =“MMDD（this.value）”>
<option value =“”>月</ option>
</ choice>
<select name = DD>
<option value =“”>日</ option>
</ choose>
</ p>
<p>
<input type =“reset”value =“重置”/>
<input type =“submit”value =“提交查詢內容”/>
</ p>
</字段集>
</ FORM >
</ DIV>
</ BODY>
</ HTML>登陸成功主頁面：Home.html中的
<！DOCTYPE html>
<HTML>
<HEAD>
<meta charset =“utf-8”>
<TITLE>用戶信息表</ TITLE>
<link rel =“stylesheet”type =“text / css”href =“CssInport。 css“>
</ HEAD>
<BODY>
<script src =”JsInport.js“type =”text / javascript“> </ script>
<form οnsubmit="return check()" action="succe.html" name="form2"/>
<div id="register">
<fieldset>
<legend>請填寫註冊信息</legend>
<p>
<label>真實姓名：</label>
<input type="text" name="" id="txtName" class="txt" />
<span id="span_name"></span>
</p>
<p>
<label>英文名：</label>
<input type="text" name="" id="txtEName" class="txt" />
<span id="span_EName"></span>
</p>
<p>
<label>主頁：</label>
<input type="text" name="" id="txtHome" class="txt" />
<span id="span_home"></span>
</p>
<p>
<label>密碼：</label>
<input type="password" name="" id="txtPwd" class="txt" />
<span id="span_pwd"></span>
</p>
<p>
<label>驗證密碼：</label>
<input type="password" name="" id="txtPwdC" class="txt" />
<span id="span_pwdC"></span>
</p>
<p>
<label>郵箱：</label>
<input type="text" name="" id="txtEmail" class="txt" />
<span id="span_email"></span>
</p>
<p>
<label>QQ：</label>
<input type="text" name="" id="txtQQ" class="txt" />
<span id="span_QQ"></span>
</p>
<p>
<label>身份證：</label>
<input type="text" name="" id="txtID" class="txt" />
<span id="span_ID"></span>
</p>
<p>
<label>年齡：</label>
<input type="text" name="" id="txtAge" class="txt" />
<span id="span_Age"></span>
</p>
<p>
<label>手機號：</label>
<input type="text" name="" id="txtPhone" class="txt" />
<span id="span_phone"></span>
</p>
<p>
<label>出生日期：</label>
<input type="text" name="" id="txtBornDate" class="txt" οnblur="checkBornDate()" />
<span id="span_Born"></span>
</p>
<p>
<label>郵政編碼：</label>
<input type="text" name="" id="txtPost" class="txt" />
<span id="span_post"></span>
</p>
<p>
<label>操作系統：</label>
<select id="Selt">
<option value="s1">請選擇您的操作系統</option>
<option value="windows">windows</option>
<option value="linux">linux</option>
<option value="Mac os">Mac os</option>
</select>
<span id="span_selt"></span>
</p>
<p>
<label>所在省份：</label>
<!-- 選擇一個<input checked type="radio" name="see" value="raad" id="ra0" /> -->
廣東<input type="radio" name="see" value="1" id="ra1" />
廣西<input type="radio" name="see" value="2" id="ra2" />
湖北<input type="radio" name="see" value="3" id="ra3" />
湖南<input type="radio" name="see" value="4" id="ra4" />
<span id="span_conv"></span>
</p>
<p>
運動<input type="checkbox" value="1" name="bo" />
上網<input type="checkbox" value="2" name="bo" />
聽音樂<input type="checkbox" value="3" name="bo" />
看書<input type="checkbox" value="4" name="bo" />
<span id="span_box"></span>
</p>
<p>
<label>自我介紹</label>
<textarea name="textarea" cols="70" rows="5" id="ta">
我是黃華，是一個學生
</textarea>
</p>
<p>
<label>自傳</label>
<textarea name="textarea" cols="70" rows="5" id="tta">
在這裏可以寫自傳
</textarea>
<span id="span_tta"></span>
</p>
<p>
<input type="submit" name="" value="提交" οnclick="checks()" />
<input type="button" value="檢驗方式一" name="" οnclick="checkName(),checkEName(),checkHome(),checkPwd(),checkConfirmPwd(),checkEmail(),checkQQ(),checkID(),checkAge(),checkPhone(),checkBornDate(),checkPost(),checktta(),checkSelt(),checkConv(),checkBox()" />
<input type="button" name="" value="檢驗方式二" οnclick="aler()"/>
</p>
</fieldset>
</div>
</form>
</body>
</html>home.HTML應用css樣式表文件：CssInport.css
body {
font-size: 12px;
}
div#register fieldset{
border: 1px solid #ccc;
width: 500px;
padding: 20px;
margin-left: 400px;
}
div#register fieldset legend{
margin-left: 20px;
}
div#register label{
width: 70px;
display: block;
float: left;
text-align: right;
}
div#register .txt{
border: 1px solid #ccc;
width: 130px;
margin: 0px;
}
div#register span{
color: gray;
}
div#sub{
text-align: right;
}
div p{
border: 1px solid gray;
}home.HTML引用javascript文件：JsInport.js
var arr=new Array(48);
function $(id){
return document.getElementById(id);
}
function checkName(){
var name=$("txtName").value;
var name_prompt=$("span_name");
name_prompt.innerHTML="";
var nameReg=/^[\u4e00-\u9fa5]{0,}$/;
arr[0]=" javascript提醒"+"\n";
if(!nameReg.test(name)){
name_prompt.style.color="red";
arr[1]=" 1.錯誤，真實姓名必須是中文"+"\n";
name_prompt.innerHTML="*錯誤，真實姓名必須是中文";
return false;
}else if(name==""){
name_prompt.style.color="red";
arr[2]="1.不能爲空"+"\n";
name_prompt.innerHTML="不能爲空";
return false;
}
name_prompt.style.color="green";
arr[3]="1.輸入正確"+"\n";
name_prompt.innerHTML="輸入正確";
return true;
}
function checkEName(){
var ename=$("txtEName").value;
var ename_prompt=$("span_EName");
ename_prompt.innerHTML="";
var enameReg=/^[A-Za-z]+$/;
if(ename==""){
ename_prompt.style.color="red";
arr[4]="2.不能爲空"+"\n";
ename_prompt.innerHTML="不能爲空";
return false;
}else if(!enameReg.test(ename)){
ename_prompt.style.color="red";
arr[5]="2.錯誤，英文名必須是英文字母組成"+"\n";
ename_prompt.innerHTML="*錯誤，英文名必須是英文字母組成";
return false;
}
ename_prompt.style.color="green";
arr[6]="2.輸入正確"+"\n";
ename_prompt.innerHTML="輸入正確";
return true;
}
function checkHome(){
var home=$("txtHome").value;
var home_prompt=$("span_home");
home_prompt.innerHTML="";
var homeReg=/^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
if(home==""){
home_prompt.style.color="red";
arr[7]="3.不能爲空"+"\n";
home_prompt.innerHTML="不能爲空";
return false;
} else if(!homeReg.test(home)){
home_prompt.style.color="red";
arr[8]="3.錯誤，主頁必須是域名，如：www.baidu.com"+"\n";
home_prompt.innerHTML="*錯誤，主頁必須是域名，如：www.baidu.com";
return false;
}
home_prompt.style.color="green";
arr[9]="3.輸入正確"+"\n";
home_prompt.innerHTML="輸入正確";
return true;
}
function checkPwd(){
var pwd=$("txtPwd").value;
var pwd_prompt=$("span_pwd");
pwd_prompt.innerHTML="";
var pwdReg=/^[a-zA-z0-9]{4,10}$/;
if(pwd==""){
pwd_prompt.style.color="red";
arr[10]="4.不能爲空"+"\n";
pwd_prompt.innerHTML="不能爲空";
return false;
}else if(!pwdReg.test(pwd)){
pwd_prompt.style.color="red";
arr[11]="4.錯誤，密碼由英文字母和數字組成的4-10位字符"+"\n";
pwd_prompt.innerHTML="*錯誤，密碼由英文字母和數字組成的4-10位字符";
return false;
}
pwd_prompt.style.color="green";
arr[12]="4.輸入正確"+"\n";
pwd_prompt.innerHTML="輸入正確";
return true;
}
function checkConfirmPwd(){
var pwdC=$("txtPwdC").value;
var pwd=$("txtPwd").value;
var confirmPwd_prompt=$("span_pwdC");
if(pwdC==""){
confirmPwd_prompt.style.color="red";
arr[13]="5.不能爲空"+"\n";
confirmPwd_prompt.innerHTML="不能爲空";
return false;
}else if(pwd!=pwdC){
confirmPwd_prompt.style.color="red";
arr[14]="5.錯誤，兩次輸入不一致"+"\n";
confirmPwd_prompt.innerHTML="錯誤，兩次輸入不一致";
return false;
}
confirmPwd_prompt.style.color="green";
arr[15]="5.輸入正確"+"\n";
confirmPwd_prompt.innerHTML="輸入正確";
return true;
}
function checkEmail(){
var email=$("txtEmail").value;
var email_prompt=$("span_email");
var emailRag=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
if(email==""){
email_prompt.style.color="red";
arr[16]="6.不能爲空"+"\n";
email_prompt.innerHTML="不能爲空";
return false;
}else
if(!emailRag.test(email)){
email_prompt.style.color="red";
arr[17]="6.錯誤，如[email protected]"+"\n";
email_prompt.innerHTML="錯誤，如[email protected]";
return false;
}
email_prompt.style.color="green";
arr[18]="6.格式正確"+"\n";
email_prompt.innerHTML="格式正確";
return true;
}
function checkQQ(){
var qq=$("txtQQ").value;
var qq_prompt=$("span_QQ");
qq_prompt.innerHTML="";
var qqReg=/[1-9][0-9]{4,}/;
if(qq==""){
qq_prompt.style.color="red";
arr[19]="7.不能爲空"+"\n";
qq_prompt.innerHTML="不能爲空";
return false;
}else if(!qqReg.test(qq)){
qq_prompt.style.color="red";
arr[20]="7.錯誤，QQ號由四位數以上數字組成"+"\n";
qq_prompt.innerHTML="*錯誤，QQ號由四位數以上數字組成";
return false;
}
qq_prompt.style.color="green";
arr[21]="7.輸入正確"+"\n";
qq_prompt.innerHTML="輸入正確";
return true;
}
function checkID(){
var id=$("txtID").value;
var id_prompt=$("span_ID");
id_prompt.innerHTML="";
var idReg=/^\d{15}|\d{18}$/;
if(id==""){
id_prompt.style.color="red";
arr[22]="8.不能爲空"+"\n";
id_prompt.innerHTML="不能爲空";
return false;
}else if(!idReg.test(id)){
id_prompt.style.color="red";
arr[23]="8.錯誤，身份證號由十五或十八位數以上數字組成"+"\n";
id_prompt.innerHTML="*錯誤，身份證號由十五或十八位數以上數字組成";
return false;
}
id_prompt.style.color="green";
arr[24]="8.輸入正確"+"\n";
id_prompt.innerHTML="輸入正確";
return true;
}
function checkAge(){
var age=$("txtAge").value;
var age_prompt=$("span_Age");
age_prompt.innerHTML="";
var ageReg=/^\d+$|^\d{2}$/;
if(age==""){
age_prompt.style.color="red";
arr[25]="9.不能爲空"+"\n";
age_prompt.innerHTML="不能爲空";
return false;
}else if(!ageReg.test(age)){
age_prompt.style.color="red";
arr[26]="9.錯誤，年齡必須大於零"+"\n";
age_prompt.innerHTML="*錯誤，年齡必須大於零";
return false;
}
age_prompt.style.color="green";
arr[27]="9.輸入正確"+"\n";
age_prompt.innerHTML="輸入正確";
return true;
}
function checkPhone(){
var phone=$("txtPhone").value;
var phone_prompt=$("span_phone");
var phoneRag=/^(13|15|18)\d{9}$/;
if(phone==""){
phone_prompt.style.color="red";
arr[28]="10.不能爲空"+"\n";
phone_prompt.innerHTML="不能爲空";
return false;
}else if(!phoneRag.test(phone)){
phone_prompt.style.color="red";
arr[29]="10.錯誤，手機號由11位數字組成，且由13開頭"+"\n";
phone_prompt.innerHTML="*錯誤，手機號由11位數字組成，且由13開頭";
return false;
}
phone_prompt.style.color="green";
arr[30]="10.輸入正確"+"\n";
phone_prompt.innerHTML="輸入正確";
return true;
}
function checkBornDate(){
var bornDate=$("txtBornDate").value;
var born_prompt=$("span_Born");
var bornRag=/^((19\d{2})|(200\d))-(0?[[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/;
if(bornDate==""){
born_prompt.style.color="red";
arr[31]="11.不能爲空"+"\n";
born_prompt.innerHTML="不能爲空";
return false;
}else if(!bornRag.test(bornDate)){
born_prompt.style.color="red";
arr[32]="11.錯誤，出生日期輸入錯誤,如1999-09-09"+"\n";
born_prompt.innerHTML="*錯誤，出生日期輸入錯誤,如1999-09-09";
return false;
}
born_prompt.style.color="green";
arr[33]="11.格式正確"+"\n";
born_prompt.innerHTML="格式正確";
return true;
}
function checkPost(){
var post=$("txtPost").value;
var post_prompt=$("span_post");
var postRag=/^\d{6}$/;
if(post==""){
post_prompt.style.color="red";
arr[34]="12.不能爲空"+"\n";
post_prompt.innerHTML="不能爲空";
return false;
}else if(!postRag.test(post)){
post_prompt.style.color="red";
arr[35]="12.錯誤，請輸入6位郵政編碼"+"\n";
post_prompt.innerHTML="*錯誤，請輸入6位郵政編碼";
return false;
}
post_prompt.style.color="green";
arr[36]="12.格式正確"+"\n";
post_prompt.innerHTML="格式正確";
return true;
}
function checkSelt(){
var aa=$("Selt").value;
var tta_prompt=$("span_selt");
if(aa!="s1"){
tta_prompt.style.color="green";
arr[37]="13.您選擇的是："+aa+"\n";
tta_prompt.innerHTML="您選擇的是："+aa;
return true;
}else
tta_prompt.style.color="red";
arr[38]="13.請選擇一個操作系統"+"\n";
tta_prompt.innerHTML="請選擇一個操作系統";
return false;
}
function checkConv(){
var conv=document.getElementsByName("see");
var conv_prompt=$("span_conv");
for(var i=0;i<conv.length;i++){
if(conv[i].checked==true){
conv_prompt.style.color="green";
if(conv[i].value=='1'){
arr[39]="14.您選擇的省份爲：廣東"+"\n";
conv_prompt.innerHTML="您選擇的省份爲：廣東";
}else if(conv[i].value=='2'){
arr[40]="14.您選擇的省份爲：廣西"+"\n";
conv_prompt.innerHTML="您選擇的省份爲：廣西";
}else if(conv[i].value=='3'){
arr[41]="14.您選擇的省份爲：湖北"+"\n";
conv_prompt.innerHTML="您選擇的省份爲：湖北";
}else if(conv[i].value=='4'){
arr[42]="14.您選擇的省份爲：湖南"+"\n";
conv_prompt.innerHTML="您選擇的省份爲：湖南";
}
return true;
}
}
conv_prompt.style.color="red";
arr[43]="14.請選一個省份"+"\n";
conv_prompt.innerHTML="請選一個省份";
return false;
}
function checkBox(){
var box=document.getElementsByName("bo");
var box_prompt=$("span_box");
var boxes=0;
for(var i=0;i<box.length;i++){
if(box[i].checked==true){
boxes++;
}
}
if(boxes>=2 && boxes<=4){
box_prompt.style.color="green";
arr[44]="15.您已選擇"+boxes+"個愛好"+"\n";
box_prompt.innerHTML="您已選擇"+boxes+"個愛好";
return true;
}
box_prompt.style.color="red";
arr[45]="15.請選擇2-4種愛好"+"\n";
box_prompt.innerHTML="請選擇2-4種愛好";
return false;
}
function checktta(){
var tta=$("tta").value;
var tta_prompt=$("span_tta");
var ttaRag=/[\u4e00-\u9fa5]/;
if(tta==""){
arr[46]="16.不能爲空"+"\n";
tta_prompt.innerHTML="不能爲空";
return false;
}else if(!ttaRag.test(tta)){
arr[47]="16.錯誤，請輸入漢字"+"\n";
tta_prompt.innerHTML="錯誤，請輸入漢字";
return false;
}
tta_prompt.style.color="green";
arr[48]="16.格式正確"+"\n";
tta_prompt.innerHTML="格式正確";
return true;
}
function aler(){
checkName();
checkEName();
checkHome();
checkPwd();
checkConfirmPwd();
checkEmail();
checkQQ();
checkID();
checkAge();
checkPhone();
checkBornDate();
checkPost();
checktta();
checkSelt();
checkConv();
checkBox();
alert(arr);
}
函數檢查（）{
如果（檢查名（）&& checkEName（）&& checkHome（）&& checkPwd（）&& checkConfirmPwd（）&& checkEmail（）&& checkQQ（）&& checkID（）&& checkAge（）&& checkPhone（）&& checkBornDate（）&&卡子（）&& checktta（）&& checkSelt（）&& checkConv（）&& CHECKBOX（） ）
{
返回true;
}
返回false;
}
// ================================== //
// ================================================ //
註冊成功提示頁面：succe.html
<！DOCTYPE html>
<HTML>
<HEAD>
<meta charset =“utf-8”>
<TITLE>歡迎</ TITLE>
</ HEAD>
<BODY>
<H3>您已註冊成功</ H3>
</ BODY >
</ HTML>