html+css+javascript實現註冊表單，年月日三級級聯，表單驗證，圖片切換

時間  2019-12-25
標籤 html+css+javascript html css javascript 實現 註冊 表單 月日 三級 級聯 驗證 圖片 切換 欄目 JavaScript 简体版
原文   原文鏈接

<!--註冊主界面--> javascript

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> html

<html>
<head>
<TITLE>註冊界面 </TITLE>
<style>
body{
font-family:"幼圓";
font-size:12px;






}


</style>
<script src="check.js"></script>
</head>
<body  background="22.jpg" onload="initValues();">
<form action="success.html" name="frm" onSubmit="return checkAll();">
<table width="657" border="0" align="center" >
<tr>
<td width="22%" height="54" align="right"><span class="STYLE1"><span class="STYLE2">用&nbsp;戶&nbsp;</span>名</span>：</td>


<td width="48%"><input type="text" name="username"  onblur="checkName()" ></td>
 
<td width="30%" align="left"><div id="name">&nbsp;</div></td>
</tr>
<tr>
<td height="61"align="right" >密&nbsp;&nbsp;&nbsp;&nbsp;碼：</td>
<td><input type="password" name="userpass"  onblur="checkPass();"></td>
<td  align="left"><div id="pass">&nbsp;</div></td>
</tr>
<tr>
<td height="48" align="right" >確認密碼：</td>
<td><input type="password" name="repass" onBlur="checkRepass();"></td>
<td align="left"><div id="rpass">&nbsp;</div></td>
</tr>
<tr>
<td height="48" align="right">郵&nbsp;&nbsp;&nbsp;&nbsp;箱：</td>
<td><input type="text" name="email" onBlur="checkMail();"></td>
<td align="left"><div id="mail">&nbsp;</div></td>
</tr>
<tr>
<td height="46" align="right" >性&nbsp;&nbsp;&nbsp;&nbsp;別：</td>
<td><input type="radio" name="sex" checked>女<input type="radio" name="sex">
 男</td>
<td  align="left">&nbsp;</td>
</tr>
<tr>
<td align="right">出生日期：</td>
<td><div>
<select id="year" onchange="yearChange()">
<option>選擇年</option>
</select>年
<select id="month" onchange="monthChange()">
<option value="">選月</option>
</select>月
<select id="day">
<option>選擇日</option>
</select>日
</div>

</td>
</tr>
<tr>
<td height="63" align="right" >興&nbsp;&nbsp;&nbsp;&nbsp;趣：</td>
<td onClick="checkHobby()">
唱歌
 <input type="checkbox" name="hobby" value="basketball">
舞蹈
<input type="checkbox" name="hobby" value="game">
跑步
<input type="checkbox" name="hobby" value="music"> </td>
<td  align="left"><div id="hob">&nbsp;</div></td>
</tr>
<tr>
<td height="54" align="right" >服務條款：</td>
<td><textarea name="agreement" cols="25" rows="10">這裏是服務條款...
</textarea>
 <input type="checkbox" name="agree" onClick="checkArgee();">
 贊成 </td>
<td align="left"><div id="agr">&nbsp;</div></td>
</tr>
<tr>
<td height="54" colspan="2" align="center"><label>  
   <input type="submit" value="註冊">
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   <input name="reset" type="submit" value=" 重 置 ">
        </label></td>


<td align="left">&nbsp;</td>
</tr>
</table>
</form>
</body>

</html> java

運行的效果圖： ui


<!--js代碼--> spa

<!--用戶名 -->
function checkName(){
var name=frm.username.value;
if(name.length>=6 && name.length<=12){
var flag=false;
for(var i=0;i<name.length;i++){
if((name.charAt(i)>='a'&&name.charAt(i)<='z')||(name.charAt(i)>='A'&&name.charAt(i)<='Z')||name.charAt(i)=='_'||name.charAt(i)=='$'){
flag=true;
}else{
flag=false;
break;
}
}
if(flag){
document.getElementById("name").style.color="green";
document.getElementById("name").style.fontFamily="華文楷體";
document.getElementById("name").style.fontSize="12px";
document.getElementById("name").innerHTML="√";
return true;
}else{
document.getElementById("name").style.color="red";
document.getElementById("name").style.fontFamily="華文楷體";
document.getElementById("name").style.fontSize="12px";
document.getElementById("name").innerHTML="× 含非法字符！";
return false;
}
}else{
document.getElementById("name").style.color="red";
document.getElementById("name").style.fontFamily="華文楷體";
document.getElementById("name").style.fontSize="12px";
document.getElementById("name").innerHTML="× 長度必須在6~12之間！";
return false;
}
}
<!--密碼 -->
function checkPass(){
var pass=frm.userpass.value;
if(pass.length<6){
document.getElementById("pass").style.color="red";
document.getElementById("pass").style.fontFamily="華文楷體";
document.getElementById("pass").style.fontSize="12px";
document.getElementById("pass").innerText="× 密碼必須>6！";
return false;
}else{
document.getElementById("pass").style.color="green";
document.getElementById("pass").style.fontFamily="華文楷體";
document.getElementById("pass").style.fontSize="12px";
document.getElementById("pass").innerText="√";
return true;
}
}
<!--重置密碼 -->
function checkRepass(){
var pass=frm.userpass.value;
var rpass=frm.repass.value;
if(pass==rpass&&rpass.length>6){
document.getElementById("rpass").style.color="green";
document.getElementById("rpass").style.fontFamily="華文楷體";
document.getElementById("rpass").style.fontSize="12px";
document.getElementById("rpass").innerText="√";
return true;
}else{
document.getElementById("rpass").style.color="red";
document.getElementById("rpass").style.fontFamily="華文楷體";
document.getElementById("rpass").style.fontSize="12px";
document.getElementById("rpass").innerText="× 重複密碼和密碼不一致！";
return false;
}
}
<!--郵箱 -->
function checkMail(){
var email=frm.email.value;
if(email.indexOf("@")==-1||email.indexOf(".")==-1){
document.getElementById("mail").style.color="red";
document.getElementById("mail").style.fontFamily="華文楷體";
document.getElementById("mail").style.fontSize="12px";
document.getElementById("mail").innerText="× 郵箱格式不正確！";
return false;
}else{
document.getElementById("mail").style.color="green";
document.getElementById("mail").style.fontFamily="華文楷體";
document.getElementById("mail").style.fontSize="12px";
document.getElementById("mail").innerText="√";
return true;
}
}
<!--出生日期 -->
var year;
var month;
var day;
function initValues(){
year=document.getElementById("year");
month=document.getElementById("month");
day=document.getElementById("day");
//先添加年,要判斷是否爲閏年
for(var i=1900;i<=2013;i++){
year.add(new Option(i,i));
}
//月直接添加
}


function yearChange(){
if(year.value!=""){
for(var i=1;i<=12;i++){
month.add(new Option(i,i));
}
}
}
function monthChange(){
var daysOfMonth= new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
day.length=1;//year%4==0&&year%100!=0||year%400==0


if(((year.value%100!=0&&year.value%4==0)||year.value%400==0)&&month.selectedIndex==2){
for(var i=1;i<=29;i++){
day.add(new Option(i,i));
}
}else{
for(var i=0;i<daysOfMonth.length;i++){
if(month.selectedIndex-1==i){
for(var j=1;j<=daysOfMonth[i];j++){
day.add(new Option(j,j));
}
break;
}
}
}
}
<!--愛好 -->
function checkHobby(){
var hobbys=document.getElementsByName("hobby");
var flag=false;
for(var i=0;i<hobbys.length;i++){
if(hobbys[i].checked){
flag=true;
break;
}
}
if(flag){
document.getElementById("hob").style.color="green";
document.getElementById("hob").style.fontFamily="華文楷體";
document.getElementById("hob").style.fontSize="12px";
document.getElementById("hob").innerText="√";
return true;
}else{
document.getElementById("hob").style.color="red";
document.getElementById("hob").style.fontFamily="華文楷體";
document.getElementById("hob").style.fontSize="12px";
document.getElementById("hob").innerText="× 至少須要選擇一個愛好！";
return false;
}


}
<!--贊成 -->
function checkArgee(){
var cbx=frm.agree;
if(cbx.checked){
document.getElementById("agr").style.color="green";
document.getElementById("agr").style.fontFamily="華文楷體";
document.getElementById("agr").style.fontSize="12px";
document.getElementById("agr").innerText="√";
return true;
}else{
document.getElementById("agr").style.fontFamily="華文楷體";
document.getElementById("agr").style.fontSize="12px";
document.getElementById("agr").style.color="red";
document.getElementById("agr").innerText="× 必須贊成服務條款才能註冊！";
return false;
}
}
<!--全部 -->
function checkAll(){
if(checkName()&&checkPass()&&checkRepass()&&checkMail()&&checkYear()&&checkHobby()&&checkArgee()){
return true;
}else{
return false;
}
} orm

在主界面中添加超連接到js文件，就能夠實現表單驗證 xml


<!--圖片切換效果-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
var currentImg=1;
var maxImg=4;
var timer;
function show(num){
if(num){
clearTimeout(timer);
currentImg=num;
}
for(var i=1;i<=maxImg;i++){
if(i==currentImg){
document.getElementById("ad"+i).style.display="block";
document.getElementById("a"+i).style.color="red";
}else{
document.getElementById("ad"+i).style.display="none";
document.getElementById("a"+i).style.color="black";
}
}
if(currentImg>=4){
currentImg=1;
}else{
currentImg++;
}
timer=setTimeout("show()","2000");
}
</script>
<style>
div{








}






</style>






</HEAD>


<BODY onLoad="show();"  background="22.jpg">


<div align="center" >
<img id="ad1" src="ad_01.jpg" style="display:none">
<img id="ad2" src="ad_02.jpg" style="display:none">
<img id="ad3" src="ad_03.jpg" style="display:none">
<img id="ad4" src="ad_04.jpg" style="display:none">
</div>
<div  style="position:absolute;top:250px;left:890px">
<a id="a1" href="javascript:show(1)">1</a>&nbsp;&nbsp;
<a id="a2" href="javascript:show(2)">2</a>&nbsp;&nbsp;
<a id="a3" href="javascript:show(3)">3</a>&nbsp;&nbsp;
<a id="a4" href="javascript:show(4)">4</a>
</div>
</BODY>
</HTML>
htm


<!--跳轉成功後的界面--> 圖片

<!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>無標題文檔</title>
</head>


<body>


<h1>歡迎光臨~</h1>
</body>
</html>
ip

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程