<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册界面</title>
<style type="text/css">
span{
font-size: 16spx;
color: red;
}
p{
font-size: 16px;
color: red;
}
fieldset{
width: 500px;
background-color: paleturquoise;
}
</style>
<script type="text/javascript">
//用户名不为空验证
//事件在整个html页面完全加载之后发生
window.onload = function(){
//获得填写用户名的文本框
var usernameElt = document.getElementById("username");
//获得用户名的值
var username = usernameElt.value;
//去除前后空白
username = username.trim();
//获取错误提示的span标签
var usernameErrorSpan = document.getElementById("usernameError")
//给用户名绑定blur事件,用于输出用户名不为空的提示信息
usernameElt.onblur = function(){
//判断用户名是否为空,若是空,则给出警告
if(username){
//用户名在6~14位之间
if(username.length<6 ||username.length>14){
usernameErrorSpan.innerText = "用户名长度必须在6~14位之间"
}
else{
var regExp = /^[A-Za-z0-9]+$/;
var ok = regExp.test(username)
if(ok){
//合法
}else{
//不合法
usernameErrorSpan.innerText = "用户名只能由数字和字母组成,不能含有其他符号"
}
}
}else{
usernameErrorSpan.innerText = "用户名不能为空"
}
}
//给用户名绑定focus事件,用于清空提示信息和错误信息
usernameElt.onfocus = function(){
if(usernameErrorSpan.innerText != ""){
usernameElt.value = ""
}
usernameErrorSpan.innerText = ""
}
//失去焦点验证
//获得填写密码的文本框
var passwordElt = document.getElementById("password");
//获得填写的密码值
var password = passwordElt.value;
//获得错误提示的span标签
var passwordErrorSpan = document.getElementById("passwordError")
//失去焦点验证
passwordElt.onblur = function(){
//判断密码框是否为空
if(password){
//判断是否在6-24位之间
if(password.length<6 ||password.length>24){
passwordErrorSpan.innerText = "密码必须在6~24位之间"
}
}else{
passwordErrorSpan.innerText = "密码不能为空"
}
}
//获得焦点验证
passwordElt.onfocus = function(){
if( passwordErrorSpan.innerText != ""){
passwordElt.value = ""
}
passwordErrorSpan.innerText = ""
}
//确认密码和密码一致
//获得密码的值
var passwordElt = document.getElementById("password");
var password = passwordElt.value;
//获得确认密码的值
var pwdElt = document.getElementById("pwd");
var pwd = pwdElt.value;
//获取错误提示的span标签
var pwdErrorSpan = document.getElementById("pwdError")
//为确认密码框注册blur事件
pwdElt.onblur = function(){
if(pwd){
if(password != pwd){
pwdErrorSpan.innerText = "确认密码和密码不一致"
}
}else{
pwdErrorSpan.innerText = "确认密码不能为空"
}
}
//为确认密码框注册focus事件
pwdElt.onfocus = function(){
if(pwdErrorSpan.innerText !=""){
pwdElt.value = ""
}
pwdErrorSpan.innerText = ""
}
//手机号验证
//获得填写手机号的文本框
var phoneNumberElt = document.getElementById("phoneNumber");
//获得用户名的值
var phoneNumber = phoneNumberElt.value;
//获取错误提示的span标签
var phoneNumberErrorSpan = document.getElementById("phoneNumberError")
//给手机号文本框绑定blur事件,用于输出手机号不为空的提示信息
phoneNumberElt.onblur = function(){
//判断手机号是否为空,若是空,则给出警告
if(phoneNumber){
var regExp = /^0?(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[89])[0-9]{8}$/;
var ok = regExp.test(phoneNumber)
if(ok){
//合法
}else{
//不合法
phoneNumberErrorSpan.innerText = "请输入正确的手机号"
}
}else{
phoneNumberErrorSpan.innerText = "手机号不能为空"
}
}
//给用户名绑定focus事件,用于清空提示信息和错误信息
phoneNumberElt.onfocus = function(){
if(phoneNumberErrorSpan.innerText != ""){
phoneNumberElt.value = ""
}
phoneNumberErrorSpan.innerText = ""
}
//验证正确的邮箱地址
//事件在整个html页面完全加载之后发生
//获得填写e-mail的文本框
var emailElt = document.getElementById("email");
//获得e-mail的值
var email = emailElt.value;
//获取错误提示的span标签
var emailErrorSpan = document.getElementById("emailError")
//给e-mail文本框绑定blur事件,用于输出邮箱为空的提示信息
emailElt.onblur = function(){
//判段e-mail是否为空,若是空,则给出警告
if(email){
var regExp = /^([a-zA-Z0-9]*[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
var ok = regExp.test(email)
if(ok){
//合法
}else{
//不合法
emailErrorSpan.innerText = "请输入正确的邮箱"
}
}else{
emailErrorSpan.innerText = "邮箱不能为空"
}
}
//给邮箱文本框绑定focus事件,用于清空提示信息和错误信息
emailElt.onfocus = function(){
if(emailErrorSpan.innerText != ""){
emailElt.value = ""
}
emailErrorSpan.innerText = ""
}
//验证身份证
//获得填写身份证的文本框
var IDcardElt = document.getElementById("IDcard");
//获得身份证的值
var IDcard = IDcardElt.value;
//获取错误提示的span标签
var IDcardErrorSpan = document.getElementById("IDcardError")
//给身份证文本框绑定blur事件,用于输出身份证为空格的提示信息
IDcardElt.onblur = function(){
//判段身份证是否为空,若是空,则给出警告
if(IDcard){
var regExp = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
var ok = regExp.test(IDcard)
if(ok){
//合法
}else{
//不合法
IDcardErrorSpan.innerText = "请输入正确的身份证号"
}
}else{
IDcardErrorSpan.innerText = "身份证号不能为空"
}
}
//给身份证文本框绑定focus事件,用于清空提示信息和错误信息
IDcardElt.onfocus = function(){
if(IDcardErrorSpan.innerText != ""){
IDcardElt.value = ""
}
IDcardElt.innerText = ""
}
//当所有内容都合法的时候允许提交
//获得提交按钮的对象
var submitBtnElt = document.getElementById("submitBtn");
submitBtnElt.onclick = function(){
//触发username、password、pwd、e-mail、phoneNumber、IDcard
usernameElt.focus();
usernameElt.blur();
passwordElt.focus();
passwordElt.blur();
pwdElt.focus();
pwdElt.blur();
emailElt.focus();
emailElt.blur();
phoneNumberElt.focus();
phoneNumberElt.blur();
IDcardElt.focus();
IDcardElt.blur();
if(usernameErrorSpan.innerText =="" && passwordErrorSpan.innerText == "" &&pwdErrorSpan.innerText =="" && emailErrorSpan.innerText =="" && phoneNumberErrorSpan.innerText =="" && IDcardErrorSpan.innerText == ""){
//获取表单对象
var userFormElt = document.getElementById("userForm")
//提交表单
userFormElt.submit();
}
}
}
</script>
</head>
<body>
<div align="center">
<form action="" method="GET" id="userForm">
<fieldset>
<legend align="center">注册</legend><br/>
<table>
<tr>
<th>用户名:</th>
<td>
<input type="text" name="username" id="username"/>
</td>
<td>
<span id="usernameError"></span>
</td>
</tr>
<tr>
<th>密码:</th>
<td>
<input type="password" name="password" id="password"/>
</td>
<td>
<span id="passwordError"></span>
</td>
</tr>
<tr>
<th>确认密码:</th>
<td>
<input type="password" id="pwd"/>
</td>
<td>
<span id="pwdError"></span>
</td>
</tr>
<tr>
<th>手机号:</th>
<td>
<input type="text" name="phoneNumber" id="phoneNumber"/>
</td>
<td>
<span id="phoneNumberError"></span>
</td>
</tr>
<tr>
<th> e-mail:</th>
<td>
<input type="text" name="e-mail" id="email"/>
</td>
<td>
<span id="emailError"></span>
</td>
</tr>
<tr>
<th>性别</th>
<td>
<input type="radio" name="sex" value="male" /> 男
<input type="radio" name="sex" value="female" /> 女
</td>
<td>
</td>
</tr>
<tr>
<th>爱好</th>
<td>
<input type="checkbox" name="hobby" value="cy" /> 抽烟
<input type="checkbox" name="hobby" value="hj" />喝酒
<input type="checkbox" name="hobby" value="tt" /> 烫头
</td>
<td>
</td>
</tr>
<tr>
<th> 身份证号:</th>
<td>
<input type="text" name="IDcard" id="IDcard"/>
</td>
<td>
<span id="IDcardError"></span>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="提交" name="submit" id="submitBtn"/>
<input type="reset" value="重置" name="reset" id="reset"/>
</td>
<td>
</td>
</tr>
</table>
<p>*出现错误提示后,改正后手动刷新即可消失*</p>
</fieldset>
</form>
</div>
</body>
</html>