<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<link href="../css/注册页面2.css" rel="stylesheet">
<script>
window.onload=function () {
document.getElementById("testForm").onsubmit=function () {
checkUName();
checkUPass();
checkEmail();
checkName();
checkPhone();
checkSex();
checkBir();
checkVerify();
return checkUName()&&checkUPass()&&checkEmail()&&checkName()&&checkPhone()&&checkVerify()&&checkBir()&&checkSex();
}
}
function checkUName() {
var uname = document.getElementById("uname").value;
if(uname == ""){
document.getElementById("unameP").innerText="*该项必填!";
return false;
}else {
var flag=/^\w{6,12}$/.test(uname);
if(flag){
document.getElementById("unameP").innerHTML="<img width='30' height='20' src='../img/gou.png'/>";
return flag;
}else {
document.getElementById("unameP").innerText="请输入6-12位a-z/0-9字符!";
return flag;
}
}
}
function checkUPass() {
var upass = document.getElementById("upass").value;
if(upass == ""){
document.getElementById("upassP").innerText="*该项必填!";
return false;
}else {
var flag=/^\w{6,12}$/.test(upass);
if(flag){
document.getElementById("upassP").innerHTML="<img width='30' height='20' src='../img/gou.png'/>";
return flag;
}else {
document.getElementById("upassP").innerText="请输入6-12位a-z/0-9字符!";
return flag;
}
}
}
function checkEmail() {
var email=document.getElementById("email").value;
if(email == ""){
document.getElementById("emailP").innerText="*该项必填!";
return false;
}else {
var flag=/^([\w\-]+\@[\w\-]+\.[\w\-]+)$/.test(email);
if(flag){
document.getElementById("emailP").innerHTML="<img width='30' height='20' src='../img/gou.png'/>";
return flag;
}else {
document.getElementById("emailP").innerText="格式错误!";
return flag;
}
}
}
function checkName() {
var relname=document.getElementById("relname").value;
if(relname == ""){
document.getElementById("relnameP").innerText="*该项必填!";
return false;
}else {
document.getElementById("relnameP").innerHTML="<img width='30' height='20' src='../img/gou.png'/>";
return true;
}
}
function checkPhone() {
var phone=document.getElementById("phone").value;
if(phone == ""){
document.getElementById("phoneP").innerText="*该项必填!";
return false;
}else {
var flag=phone.length==11;
if(flag){
document.getElementById("phoneP").innerHTML="<img width='30' height='20' src='../img/gou.png'/>";
return flag;
}else {
document.getElementById("phoneP").innerText="请输入11位手机号!";
return flag;
}
}
}
function checkSex() {
var sexM=document.getElementById("sexMan").value;
var sexW=document.getElementById("sexWoman").value;
if(sexM != undefined || sexW != undefined){
document.getElementById("sexP").innerHTML="<img width='30' height='20' src='../img/gou.png'/>";
return true;
}else {
return true;
}
}
function checkBir() {
var bir=document.getElementById("bir").value;
if(bir == ""){
document.getElementById("birP").innerHTML="<img width='30' height='20' src='../img/gou.png'/>";
return true;
}else{
//获取输入的时间"2019-01-06"
var year = bir.substring(0,4);
var month = bir.substring(5,7);
var day = bir.substring(8,10);
//外国的月份 = 月份-1
var x=new Date();
x.setFullYear(+year,(+month-1),+day);
var today = new Date();
if(x < today){
document.getElementById("birP").innerHTML="<img width='30' height='20' src='../img/gou.png'/>";
return true;
}else {
document.getElementById("birP").innerText="生日不能大于今天!";
return false;
}
}
}
function checkVerify() {
var verify=document.getElementById("verify").value;
if(verify == ""){
document.getElementById("verifyP").innerText="*该项必填!";
return false;
}else {
var flag=verify==="jgmkj";
if(flag){
document.getElementById("verifyP").innerHTML="<img width='30' height='20' src='../img/gou.png'/>";
return flag;
}else {
document.getElementById("verifyP").innerText="验证码错误!";
return flag;
}
}
}
</script>
</head>
<body>
<div class="all">
<div class="left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="center">
<form action="Success.html" method="post" id="testForm">
<table>
<tr>
<td class="td_left">
<label for="uname">UName</label>
</td>
<td class="td_center">
<input id="uname" class="input" type="text" name="uname" placeholder="请输入账号" onblur="checkUName()">
</td>
<td class="td_right">
<p id="unameP" style="color:red;"></p>
</td>
</tr>9
<tr>
<td class="td_left">
<label for="upass">UPass</label>
</td>
<td class="td_center">
<input id="upass" class="input" type="password" name="password" placeholder="请输入密码" onblur="checkUPass()">
</td>
<td class="td_right">
<p id="upassP" style="color:red;"></p>
</td>
</tr>
<tr>
<td class="td_left">
<label for="email">Email</label>
</td>
<td class="td_center" >
<input id="email" class="input" type="email" name="email" placeholder="请输入邮箱" onblur="checkEmail()">
</td>
<td class="td_right">
<p id="emailP" style="color:red;"></p>
</td>
</tr>
<tr>
<td class="td_left">
<label for="relname">RelName</label>
</td>
<td class="td_center">
<input class="input" id="relname" type="text" name="relname" placeholder="请输入真实姓名" onblur="checkName()">
</td>
<td class="td_right">
<p id="relnameP" style="color: red"></p>
</td>
</tr>
<tr>
<td class="td_left">
<label for="phone">Phone</label>
</td>
<td class="td_center">
<input id="phone" class="input" type="text" name="phone" placeholder="请输入手机号" onblur="checkPhone()">
</td>
<td class="td_right">
<p id="phoneP" style="color:red;"></p>
</td>
</tr>
<tr>
<td class="td_left">
<label>Sex</label>
</td>
<td class="td_center" id="sex">
<input type="radio" name="sex" value="0" id="sexMan" onblur="checkSex()">男
<input type="radio" name="sex" value="1" id="sexWoman" onblur="checkSex()">女
</td>
<td class="td_right">
<p id="sexP" style="color: red"></p>
</td>
</tr>
<tr>
<td class="td_left">
<label for="bir">Birthday</label>
</td>
<td class="td_center">
<input id="bir" class="input" type="date" name="birthday" placeholder="请输入生日" onblur="checkBir()">
</td>
<td class="td_right">
<p id="birP" style="color:red;"></p>
</td>
</tr>
<tr>
<td class="td_left">
<label for="verify">Verify</label>
</td>
<td class="td_center">
<input id="verify" class="verify" type="text" name="verify" placeholder="请输入验证码" onblur="checkVerify()">
<img class="img" src="../img/verify_code.jpg">
</td>
<td class="td_right">
<p id="verifyP" style="color:red;"></p>
</td>
</tr>
<tr>
<td colspan="2" class="reg_td">
<input type="submit" value="注册" class="reg">
<input type="reset" value="重置" class="reg">
</td>
</tr>
</table>
</form>
</div>
<div class="right">
<p>已有账号?<a href="Success.html">立即登录</a></p>
</div>
</div>
</body>
</html> |
|
收藏
淘帖
踩
