?案例：实现用户名与密码的提交审核与离焦审核
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
.error{color: crimson}
#td_sub{padding-left: 150px;}
</style>
<script>
/*首先等待页面打开*/
window.onload=function(){
/*表单将要提交需要执行的functional*/
document.getElementById("form").onsubmit=function(){
/*验证的方法*/
return checkUserName() && checkPassword();
}
/*设置光标离开后自动校验*/
document.getElementById("username").onblur=checkUserName;
document.getElementById("password").onblur=checkPassword;
}
function checkUserName(){
/*获取用户输入的用户名*/
var username=document.getElementById("username").value;
/*定义用户名规则*/
var namestandard=/^\w{6,12}$/;
/*对用户名进行判断*/
var flag=namestandard.test(username);
/*获取提示信息*/
var s_username=document.getElementById("s_username");
/*设定判断条件和提示信息的关系*/
if(flag){
s_username.innerHTML="<img width='35px' height='25px' src='gou.png'/>"
}else{
s_username.innerHTML="用户名格式错误";
}
return flag
}
function checkPassword(){
/*获取用户输入的用户名*/
var password=document.getElementById("password").value;
/*定义用户名规则*/
var codestandard=/^\w{6,12}$/;
/*对用户名进行判断*/
var flag=codestandard.test(password);
/*获取提示信息*/
var s_password=document.getElementById("s_password");
/*设定判断条件和提示信息的关系*/
if(flag){
s_password.innerHTML="<img width='35px' height='25px' src='gou.png'/>"
}else{
s_password.innerHTML="密码格式错误";
}
return flag
}
</script>
</head>
<body>
<div class="bottom_layout"><!--最后面的图层-->
<div class="left"><!--左面信息框-->
<p>新用户注册</p>
<p>User register</p>
</div>
<div class="centerback"><!--中间信息框的背景-->
<div class="rg_info"><!--中间的信息输入框-->
<form action="#" id="form" method="get">
<table >
<tr>
<td class="td_right"><label for="username">用户名</label></td>
<td class="td_left"><input type="text" name="username" id="username" placeholder="请输入用户名">
<span id="s_username" class="error"></span><!--提示标签-->
</td>
</tr>
<tr>
<td class="td_right"><label for="password">密码</label></td>
<td class="td_left"><input type="password" name="password" id="password" placeholder="请输入密码">
<span id="s_password" class="error"></span><!--提示标签-->
</td>
</tr>
<tr>
<td class="td_right"><label for="Email">邮箱地址</label></td>
<td class="td_left"><input type="Email" name="Email" id="Email" placeholder="请输入邮箱地址"></td>
</tr>
<tr>
<td class="td_right"><label for="name">真实姓名</label></td>
<td class="td_left"><input type="name" name="name" id="name" placeholder="请输入你的真实姓名"></td>
<tr>
<td class="td_right"><label for="phone">手机号</label></td>
<td class="td_left"><input type="number" name="phonenumber" id="phone" placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="td_right"> <label> 性别</label></td>
<td class="td_left"><input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</td>
</tr>
<tr>
<td class="td_right"><label for="birthday">出生日期</label></td>
<td class="td_left"><input type="date" name="birth" id="birthday"></td>
</tr>
<tr>
<td class="td_right"><label for="checkcode">验证码</label></td>
<td class="td_left"><input type="text" name="textcode" id="checkcode" placeholder="请输入验证码">
<img id="checkimg" src="../image/verify_code.jpg" alt="">
</td>
</tr>
<tr align="center">
<td colspan="2" id="td_sub"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="right"><!--右面信息框-->
<p>已有账号？<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>