本博主要是运用正则表达式,登陆界面进行出生日期选择,用到年月日的三级联动,第一种验证方式用到的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.错误,如hlx@qq.com"+"\n";
email_prompt.innerHTML="错误,如hlx@qq.com";
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>
新人第一次发博,不当之处请不吝赐教予以指正,感激不尽