您的位置:首页 > Web前端 > JavaScript

html&js笔记--第一个网页工程

2020-07-14 06:15 260 查看
[code]<!--zhuce-->
<!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>

<link rel="stylesheet" type="text/css" href="mystyle2.css">
<title>新用户注册</title>
<script type="text/javascript" src="myjs.js">
</script>
</head>

<body text="blue">

<h1 align="center">注册</h1>

<form action="https://www.baidu.com/"  onsubmit="return tovalid()">
<table align="center" >
<tr><td>Name:</td> <td title="only recieve Chinese and English!"><input type="text"  id="name" onblur="recover()"/></td></tr>
<tr><td>Nickname: </td><td title="only recieve Chinese,English,number and underline!"><input type="text" id="nickname" onblur="recover()"  /></td><tr>
<tr><td>Gender: </td><td><input type="radio" name="gender" value="male"/>Male</td><tr>
<tr><td></td><td><input type="radio" name="gender" value="female"/>Female</td><tr>

<tr><td>Password: </td><td><input type="password" id="pwd" onblur="recover()"/></td><tr>
<tr><td>Adress: </td><td title="only recieve Chinese,English,number and underline!"><input type="text" id="address" onblur="recover()"/></td><tr>
<tr><td>Postal Code: </td><td title="only recieve number and underline!"><input type="text" id="postalcode" onblur="recover()" /></td><tr>
<tr><td>E-mail: </td><td title="only recieve English,number and underline!"><input type="text" id="e-mail" onblur="recover()"/></td>
<td><select><option value="@163.com">@163.com</option>
<option value="@qq.com">@qq.com</option>
<option value="@bupt.edu.cn">@bupt.edu.cn</option>
</select>
</td>
</tr>
<tr><td>Personal hobby:</td><td><input type="checkbox" name="hobby" value="going swimming" />Going swimming</td><tr>
<tr><td></td><td><input type="checkbox" name="hobby" value="reading books" />Reading books</td><tr>
<tr><td></td><td><input type="checkbox" name="hobby" value="playing computer games" />Playing computer games</td><tr>
<tr><td></td><td><input type="checkbox" name="hobby" value="going hiking" />Going hiking</td><tr>
<tr><td></td><td><input type="checkbox" name="hobby" value="writing" />Writing</td><tr>
<tr><td></td><td><input type="checkbox" name="hobby" value="extra" />Extra</td><tr>

<tr><td>Telephone number: </td><td title="only recieve number and underline!"><input type="text" id="tel number" onblur="recover()"/></td><tr>
<tr><td>Personal statement: </td><td><textarea rows="5" cols="19" id="per" onblur="recover()"></textarea></td><tr>
</table>

<div align="center">
<input type="submit" value="Submit" id="submit" disabled="disabled"  />    <!--鼠标悬停事件触发事件1(全填完变黑)  鼠标点击触发事件2(检查是否填完并给出提示)-->
</div>
</form>
</body>

</html>
[code]//js
//recover函数用于更改disabled
function recover()
{

var a=document.getElementById("name").value;
var b=document.getElementById("nickname").value;
var c=document.getElementById("address").value;
var d=document.getElementById("postalcode").value;
var e=document.getElementById("tel number").value;
var f=document.getElementById("e-mail").value;
var g=document.getElementById("pwd").value;
var h=document.getElementById("per").value;
if(a)
{if(b)
{if(c)
{if(d)
{if(e)
{if(f)
{if(g)
{if(h)
{document.getElementById('submit').disabled=false;}
else
{document.getElementById('submit').disabled=true;}
}
else
{document.getElementById('submit').disabled=true; }
}
else
{document.getElementById('submit').disabled=true;}
}
else
{document.getElementById('submit').disabled=true;}
}
else
{document.getElementById('submit').disabled=true;}
}
else
{document.getElementById('submit').disabled=true;}
}
else
{document.getElementById('submit').disabled=true;}
}
else
{
document.getElementById('submit').disabled=true;
}

}
//tovalid是判断submit
function tovalid(){
var RegExp=/^[\u4E00-\u9FA5A-Za-z]+$/;
var checknam=RegExp.test(document.getElementById("name").value);
RegExp=/^[\u4E00-\u9FA5A-Za-z0-9_]+$/;
var checknic=RegExp.test(document.getElementById("nickname").value);
var checkadd=RegExp.test(document.getElementById("address").value);
RegExp=/^[0-9_]+$/;
var checkpos=RegExp.test(document.getElementById("postalcode").value);
var checktel=RegExp.test(document.getElementById("tel number").value);
RegExp=/^[A-Za-z0-9_]+$/;
var checke=RegExp.test(document.getElementById("e-mail").value);

if(checknam&checknic&checkadd&checkpos&checktel&checke==true)
{    alert("Name:"+checknam+'\n'+"Nickname:"+checknic+'\n'+"Gender: true"+'\n'+"Password: true"+'\n'+
"Address:"+checkadd+'\n'+"Postal Code:"+checkpos+'\n'+"E-mail:"+checke+'\n'+"Personal hobby: true"+'\n'+"Telephone number:"+checktel+'\n'+"Personal statement: true");
alert("Perfect!waiting for submission! ");
return true;
}
else
{    alert("Name:"+checknam+'\n'+"Nickname:"+checknic+'\n'+"Gender: true"+'\n'+"Password: true"+'\n'+
"Address:"+checkadd+'\n'+"Postal Code:"+checkpos+'\n'+"E-mail:"+checke+'\n'+"Personal hobby: true"+'\n'+"Telephone number:"+checktel+'\n'+"Personal statement: true");
alert("Please enter again!");
return false;
}

}

 

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐