<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
#register{
width: 300px;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: #FFD026;
}
#bt_tijiao{
padding-left: 135px;
}
.error{
color: red;
font-size: 10px;
}
</style>
<script>
window.onload = function(){
document.getElementById("form").οnsubmit=function(){
var flag1=checkusername();
var flag2=checkpassword();
var flag3=checktel();
var flag4=checkemail();
return flag1&&flag2&&flag3&&flag4&&flag5;
}
document.getElementById("username").onblur = checkusername;
document.getElementById("password").onblur = checkpassword;
document.getElementById("email").onblur = checkemail;
document.getElementById("tel").onblur = checktel;
}
function checkpassword(){
let password = document.getElementById("password").value;
var reg_password=/^\w{8,100}$/;
var flag_password =reg_password.test(password);
var s_password = document.getElementById("s_password");
if(flag_password){
s_password.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
}else{
s_password.innerHTML="密码错误";
}
return flag_password;
}
function checkusername(){
let username = document.getElementById("username").value;
var reg_username=/^\w{1,100}$/;
var flag_username =reg_username.test(username);
var s_username = document.getElementById("s_username");
if(flag_username){
s_username.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
}else{
s_username.innerHTML="用户名不能为空";
}
return flag_username;
}
function checkemail(){
let email = document.getElementById("email").value;
var reg_email=/^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$/;
var flag_email =reg_email.test(email);
var s_email = document.getElementById("s_email");
if(flag_email){
s_email.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
}else{
s_email.innerHTML="邮箱格式不正确";
}
return flag_email;
}
function checktel(){
let tel = document.getElementById("tel").value;
var reg_tel=/^\d{11}$/;
var flag_tel =reg_tel.test(tel);
var s_tel = document.getElementById("s_tel");
if(flag_tel){
s_tel.innerHTML="<img src='../image/gou.png' width='35' height='25'/>";
}else{
s_tel.innerHTML="手机号不正确";
}
return flag_tel;
}
</script>
</head>
<body>
<div >
<div align="center">
<p id="btn_sub">新用户注册</p>
</div>
<div>
<form action="#" id="form" method="get">
<table align="center">
<tr>
<td >用户名</td>
<td><input type="text" class="shurukuang" id="username"> </td>
<td><span id="s_username" class="error"></span></td>
</tr>
<tr>
<td >邮箱</td>
<td><input type="text" class="shurukuang" id="email"> </td>
<td><span id="s_email" class="error"></span></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" class="shurukuang" id="tel"> </td>
<td><span id="s_tel" class="error"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" class="shurukuang" id="password"> </td>
<td><span id="s_password" class="error"></span></td>
</tr>
<tr>
<td>重复密码</td>
<td><input type="password" class="shurukuang" id="password"> </td>
<td><span id="s_password" class="error"></span></td>
</tr>
<tr>
<td><input type="submit" id="btn_sub" value="提交"></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
8841
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
