本篇文章主要包含的知识点:
1.需要准备HTML文件,里面包含表单元素的内容
<body>
<div class="table">
<form id="formTable" action="www.yijiadyidai.com" method="post">
<table border="1" cellspacing="" cellpadding="">
<tr>
<td>用户名:td>
<td><input type="text" name ="username" id="username" class="required"/>td>
<td>td>
tr>
<tr>
<td>密码:td>
<td><input type="password" name ="password" id="password" class="required"/>td>
<td>td>
tr>
<tr>
<td>爱好:td>
<td>
<input type="checkbox" name ="hobby" value="足球"/>足球
<input type="checkbox" name ="hobby" value="篮球"/>篮球
<input type="checkbox" name ="hobby" value="游泳"/>游泳
<input type="checkbox" name ="hobby" value="唱歌"/>唱歌
td>
<td>td>
tr>
<tr>
<td>邮箱:td>
<td><input type="text" name ="email" id="email"/>td>
<td>td>
tr>
<tr>
<td colspan="3"><input id="btn" type="submit" value="注册" />td>
tr>
table>
form>
div>
body>
2.需要先要设置下style元素内容
<style>
.high{color: red;}
.formtips{ width:200px;margin: 2px; padding: 2px;}
.onSuccess{
background:#E9FBEB url(img/right.png) no-repeat 0 center;
padding-left: 25px;
}
.onError{
background:#FFE0E9 url(img/error.png) no-repeat 0 center;
padding-left: 25px;
}
td{width:500px;}
#btn{width: 100%; background-color: dodgerblue;font:100;color: lightcoral;}
style>
3.首先为表单后面是input为text的添加必填的*
操作思路:先通过JQ获取必填的对象们,然后通过遍历每一个对象,用这些对象的父对象,在其相应元素的后面添加元素。
$parent = $(this).parent();
通过这个父对象在每个对象的后面添加内容
$parent.append(");//多个类型可以用空格隔开 都会应用上面来的
4.对文本框进行blur事件的绑定,绑定之后需要判断失去焦点的元素是哪一个,用到is方法。
if ($(this).is("#username")) {
//用户名不能为空,如果用户名为空的话,增加一个提示信息
if (this.value=="") {//为空
$parent.append("用户名不能为空!")
}else{
$parent.append("用户名正确!")
}
}
5.最后给表单添加一个submit事件,之前在JS原生的方式是通过onsubmit属性进行绑定的。
$("form").submit(function(){
//首先执行需要把blur方法执行一遍,这样显示的错误信息 然后记录错误信息的长度 只要长度大于0就阻止提交
$("form input").trigger("blur");//执行之后会增加元素
if($(".onError").length>0) return false;
});
6.trigger方法是执行每个blur方法,用来校验有多少出错的内容
表单检验的思路是:
1.要统一化的构造标签
2.针对表单的对应的标签绑定不同的事件比如focus blur 等
3.给submit事件的时候是需要进行有返回值的,return false ,原生的JS是通过onsubmit属性进行绑定的,而且不能够直接对应函数名()而是需要在其前面加上return XXX() 的形式
全部代码如下:
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style>
.high{color: red;}
.formtips{ width:200px;margin: 2px; padding: 2px;}
.onSuccess{
background:#E9FBEB url(img/right.png) no-repeat 0 center;
padding-left: 25px;
}
.onError{
background:#FFE0E9 url(img/error.png) no-repeat 0 center;
padding-left: 25px;
}
td{width:500px;}
#btn{width: 100%; background-color: dodgerblue;font:100;color: lightcoral;}
style>
<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js">script>
<script>
$(document).ready(function(){
//1.页面加载之后把必须填的字段添加到文本框后面
$("input.required").each(function(){//中间不能够有空格 input .required是不对的
$(this).parent().append("*");
});
//2.给所有的文本框添加blur事件。
$("input").blur(function(){
var $parent = $(this).parent();
//需要先清除样式为formtips的内容 用到find方法
$parent.find(".formtips").remove();
//2.1判断点击的是哪个文本框 不同的文本框处理的内容也是不同的
if ($(this).is("#username")) {
//用户名不能为空,如果用户名为空的话,增加一个提示信息
if (this.value=="") {//为空
$parent.append("用户名不能为空!")
}else{
$parent.append("用户名正确!")
}
}
if ($(this).is("#password")) {
if (this.value=="") {//为空
$parent.append("密码不能为空!")
}else{
// alert(this.value);
if(this.value.length != 6){
$parent.append("密码长度必须六位!")
}else
{
$parent.append("密码正确!")
}
}
}
if ($(this).is("#email")) {
if (this.value=="") {//为空
$parent.append("邮箱不能为空!")
}else{
$parent.append("邮箱正确!")
}
}
});
//为表单添加一个submit时间,只要有错误信息 就不能够提交信息 应该return false。需要使用trigger执行自定blur方法
//trigger和triggerHandler的区别还有trigger是对每个元素的绑定的方法都会执行,而triggerHandler只会执行第一个
$("form").submit(function(){
//首先执行需要把blur方法执行一遍,这样显示的错误信息 然后记录错误信息的长度 只要长度大于0就阻止提交
$("form input").trigger("blur");//执行之后会增加元素
if($(".onError").length>0) return false;
});
});
script>
head>
<body>
<div class="table">
<form id="formTable" action="www.yijiadyidai.com" method="post">
<table border="1" cellspacing="" cellpadding="">
<tr>
<td>用户名:td>
<td><input type="text" name ="username" id="username" class="required"/>td>
<td>td>
tr>
<tr>
<td>密码:td>
<td><input type="password" name ="password" id="password" class="required"/>td>
<td>td>
tr>
<tr>
<td>爱好:td>
<td>
<input type="checkbox" name ="hobby" value="足球"/>足球
<input type="checkbox" name ="hobby" value="篮球"/>篮球
<input type="checkbox" name ="hobby" value="游泳"/>游泳
<input type="checkbox" name ="hobby" value="唱歌"/>唱歌
td>
<td>td>
tr>
<tr>
<td>邮箱:td>
<td><input type="text" name ="email" id="email"/>td>
<td>td>
tr>
<tr>
<td colspan="3"><input id="btn" type="submit" value="注册" />td>
tr>
table>
form>
div>
body>
html>