<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input{
width:400px;
height:40px;
line-height: 40px;
font-size: 16px;
border:1px solid #ccc;
}
input[type='submit']{
background: #f5f5f5;
cursor:pointer;
}
</style>
</head>
<body>
<h1>注册</h1>
<hr>
<form action="1.php" name="myform" onSubmit="return demo()">
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="username" id="" onblur="checkUser()"></td>
<td id="username_info"></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" name="email" id="" onblur="checkEmail()"></td>
<td id="email_info"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="pwd" id="" onblur="checkPwd()"></td>
<td id="pwd_info"></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="repwd" id="" onblur="checkRepwd()"></td>
<td id="repwd_info"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提 交"></td>
<td></td>
</tr>
</table>
</form>
<script>
//验证用户名
function checkUser(){
//获取输入框的值
var value = document.myform.username.value;
//获取td
var td = document.getElementById('username_info');
//判断验证 6-12位的数字\字母下划线
if (value.search(/^\w{6,12}$/) === -1) {
td.innerHTML = "用户名必须是6-12位的数字 字母 下划线";
td.style.color = "red";
return false;
}
td.innerHTML = "用户名可用";
td.style.color = "green";
return true;
}
//验证邮箱
function checkEmail(){
//获取输入框的值
var value = document.myform.email.value;
//获取td
var td = document.getElementById('email_info');
//判断验证 邮箱
if (value.search(/^\w+@\w+(\.\w+){1,3}$/) === -1) {
td.innerHTML = "邮箱格式不正确";
td.style.color = "red";
return false;
}
td.innerHTML = "邮箱可用";
td.style.color = "green";
return true;
}
//验证密码
function checkPwd(){
//获取密码
var pwd = document.myform.pwd.value;
var td = document.getElementById('pwd_info');
//验证
if (pwd.length < 6 || pwd.length > 18) {
td.innerHTML = "密码的长度必须是6-18位";
td.style.color = "red";
return false;
}
td.innerHTML = "密码可用";
td.style.color = "green";
return true;
}
//验证确认密码
function checkRepwd(){
//获取密码
var pwd = document.myform.pwd.value;
var repwd = document.myform.repwd.value;
var td = document.getElementById('repwd_info');
//验证
if (pwd != repwd) {
td.innerHTML = "两次密码不一致";
td.style.color = "red";
return false;
}
td.innerHTML = "确认密码正确";
td.style.color = "green";
return true;
}
function demo(){
return checkRepwd() && checkPwd() && checkEmail() && checkUser();
}
</script>
</body>
</html>
网友评论