本博主要是运用正则表达式，登陆界面进行出生日期选择，用到年月日的三级联动，第一种验证方式用到的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 onsubmit="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" onblur="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="提交" onclick="checks()" />
<input type="button" value="检验方式一" name="" onclick="checkName(),checkEName(),checkHome(),checkPwd(),checkConfirmPwd(),checkEmail(),checkQQ(),checkID(),checkAge(),checkPhone(),checkBornDate(),checkPost(),checktta(),checkSelt(),checkConv(),checkBox()" />
<input type="button" name="" value="检验方式二" onclick="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>