在学了web静态网页中的一些知识(HTML,CSS,JavaScript)后,通过一些基本的语法知识,简单实现了一个表单校验综合案例。通过HTML中一些基本标签,把表单的基本轮廓给实现出来,然后在通过CSS样式对页面进行美化,使画面感更加丰富。最后通过JavaScript来实现对表单中输入的内项进行校验的功能。
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background: url("img/register_bg.png") no-repeat center;
padding-top: 25px;
}
.rg_layout{
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*让div水平居中*/
margin: auto;
}
.rg_left{
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.rg_left > p:first-child{
color:#FFD026;
font-size: 20px;
padding-right: 10px;
}
.rg_left > p:last-child{
color:#A6A6A6;
font-size: 20px;
}
.rg_center{
float: left;
/* border: 1px solid red;*/
}
.rg_right{
/*border: 1px solid red;*/
float: right;
margin: 15px;
}
.rg_right > p:first-child{
font-size: 15px;
}
.rg_right p a {
color:pink;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px ;
}
#username,#password,#email,#name,#tel,#birthday,#checkcode{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6 ;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
#checkcode{
width: 110px;
}
#img_check{
height: 32px;
vertical-align: middle;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026 ;
}
#td_btn{
padding-left: 150px;
}
.error{
color: red;
}
</style>
<script>
//让页面加载完毕在绑定提交事件
window.onload = function () {
//获取表单标签元素并绑定事件
document.getElementById("form").onsubmit = function () {
//方法调用
return checkUsername() && checkPassword()&&checkEmail()&&checkName()&&checkTel;
}
//给标签绑定离焦事件(不要在方法名后面加括号)
document.getElementById("username").onblur = checkUsername;
document.getElementById("password").onblur = checkPassword;
document.getElementById("email").onblur = checkEmail;
document.getElementById("name").onblur = checkName;
document.getElementById("tel").onblur = checkTel;
}
//校验用户名
function checkUsername() {
//获取用户名
var username = document.getElementById("username").value;
//定义校验规则
var reg_username = /^\w{6,12}$/;
//校验用户名是否符合规则
var flag = reg_username.test(username);
//提示信息
//获取span标签元素
var user_sp = document.getElementById("user_sp");
if(flag){
//修改span标签体的内容,提示绿色对勾
user_sp.innerHTML ="<img width='35' height='25' src='img/gou.png'/>";
}else {
//修改span标签体内的内容
user_sp.innerHTML = "用户名为6到12位英文或数字";
}
//返回结果
return flag;
}
//校验密码
function checkPassword() {
//获取密码
var password = document.getElementById("password").value;
//定义校验规则
var reg_password = /^\w{6,12}$/;
//校验密码是否符合规则
var flag = reg_password.test(password);
//提示信息
//获取span标签元素
var pass_sp = document.getElementById("pass_sp");
if(flag){
//修改span标签体的内容,提示绿色对勾
pass_sp.innerHTML ="<img width='35' height='25' src='img/gou.png'/>";
}else {
//修改span标签体内的内容
pass_sp.innerHTML = "密码为6到12位英文或数字";
}
//返回结果
return flag;
}
//校验邮箱
function checkEmail() {
//获取邮箱
var email = document.getElementById("email").value;
//定义校验规则
var reg_email =/\w+@[a-z0-9]+\.[a-z]{2,4}/;
//校验邮箱是否符合规则
var flag = reg_email.test(email);
//提示信息
//获取span标签元素
var email_sp = document.getElementById("email_sp");
if(flag){
//修改span标签体的内容,提示绿色对勾
email_sp.innerHTML ="<img width='35' height='25' src='img/gou.png'/>";
}else {
//修改span标签体内的内容为邮箱格式有误
email_sp.innerHTML = "邮箱格式有误";
}
//返回结果
return flag;
}
//校验姓名
function checkName() {
//获取姓名
var name = document.getElementById("name").value;
//定义校验规则
var reg_name =/^[\u4E00-\u9FA5A-Za-z]+$/;
//校验姓名是否符合规则
var flag = reg_name.test(name);
//提示信息
//获取span标签元素
var name_sp = document.getElementById("name_sp");
if(flag){
//修改span标签体的内容,提示绿色对勾
name_sp.innerHTML ="<img width='35' height='25' src='img/gou.png'/>";
}else {
//修改span标签体内的内容
name_sp.innerHTML = "只能输入中文或英文";
}
//返回结果
return flag;
}
//校验手机号
function checkTel() {
//获取手机号
var tel = document.getElementById("tel").value;
//定义校验规则
var reg_tel =/^1[3|4|5|7|8][0-9]{9}$/;
//校验手机号是否符合规则
var flag = reg_tel.test(tel);
//提示信息
//获取span标签元素
var tel_sp = document.getElementById("tel_sp");
if(flag){
//修改span标签体的内容,提示绿色对勾
tel_sp.innerHTML ="<img width='35' height='25' src='img/gou.png'/>";
}else {
//修改span标签体内的内容为手机号不合法
tel_sp.innerHTML = "手机号不合法";
}
//返回结果
return flag;
}
</script>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<!--定义表单 form-->
<form action="#" method="get" id="form">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right">
<input type="text" name="username" id="username" placeholder="请输入用户名">
<span id="user_sp" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right">
<input type="password" name="password" id="password" placeholder="请输入密码">
<span id="pass_sp" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right">
<input type="email" name="email" id="email" placeholder="请输入邮箱">
<span id="email_sp" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right">
<input type="text" name="name" id="name" placeholder="请输入姓名">
<span id="name_sp" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right">
<input type="text" name="tel" id="tel" placeholder="请输入手机号">
<span id="tel_sp" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male" checked="checked"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
</tr>
<tr>
<td class="td_left"><label for="checkcode" >验证码</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
<img id="img_check" src="img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" id="td_btn"><input type="submit" id="btn_sub" value="注册"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账号?<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>
运行界面:
总结:
本案例仅仅实现了表单的一些校验功能。总的来说,没有太多理解性的东西,只是一些标签和方法的结合运用。知识点零碎,需要记忆。切记:在绑定离焦事件时,方法名后面不要加括号,否则离焦事件不会触发。