本篇文章主要包含的知识点：
- 事件函数 triggerHandler与trigger函数的区别
- 表单提交的事件submit（）方法，如果返回是false则阻止submit提交
- 在元素后添加内容，需要先获取这个元素的父元素然后通过append方法添加元素。
- 通过JQ的is方法来比对是哪个对象（通常比对字符串采用选择器的字符串）
一、步骤分析：
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("<span class='formtips onSuccess'");//多个类型可以用空格隔开 都会应用上面来的4.对文本框进行blur事件的绑定，绑定之后需要判断失去焦点的元素是哪一个，用到is方法。
if ($(this).is("#username")) {
//用户名不能为空，如果用户名为空的话，增加一个提示信息
if (this.value=="") {//为空
$parent.append("<span class='formtips onError'>用户名不能为空！</span>")
}else{
$parent.append("<span class='formtips onSuccess'>用户名正确！</span>")
}
}5.最后给表单添加一个submit事件，之前在JS原生的方式是通过onsubmit属性进行绑定的。
$("form").submit(function(){
//首先执行需要把blur方法执行一遍，这样显示的错误信息 然后记录错误信息的长度 只要长度大于0就阻止提交
$("form input").trigger("blur");//执行之后会增加<span>元素
if($(".onError").length>0) return false;
});6.trigger方法是执行每个blur方法，用来校验有多少出错的内容
三、总结
表单检验的思路是：
1.要统一化的构造标签
2.针对表单的对应的标签绑定不同的事件比如focus blur 等
3.给submit事件的时候是需要进行有返回值的，return false ，原生的JS是通过onsubmit属性进行绑定的，而且不能够直接对应函数名（）而是需要在其前面加上return XXX() 的形式
全部代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
作者：伦哥哥
时间：2018-04-23
描述：
1.新建一个表单框架 注册页面（必填项后面添加一个*）
2.光标离开会触发一个事件blur
3.判断用户名是否为空，如果为空字体红色显示出来。如果正确是绿色的图片
4.键盘输入也开始校验，添加获得焦点以及键盘输入的事件。
5.为表单添加一个submit的函数
》》执行blur的函数
》》获得错误信息的长度 长度>0阻止提交return false
-->
<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("<span class='high'>*</span>");
});
//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("<span class='formtips onError'>用户名不能为空！</span>")
}else{
$parent.append("<span class='formtips onSuccess'>用户名正确！</span>")
}
}
if ($(this).is("#password")) {
if (this.value=="") {//为空
$parent.append("<span class='formtips onError'>密码不能为空！</span>")
}else{
// alert(this.value);
if(this.value.length != 6){
$parent.append("<span class='formtips onError'>密码长度必须六位！</span>")
}else
{
$parent.append("<span class='formtips onSuccess'>密码正确！</span>")
}
}
}
if ($(this).is("#email")) {
if (this.value=="") {//为空
$parent.append("<span class='formtips onError'>邮箱不能为空！</span>")
}else{
$parent.append("<span class='formtips onSuccess'>邮箱正确！</span>")
}
}
});
//为表单添加一个submit时间，只要有错误信息 就不能够提交信息 应该return false。需要使用trigger执行自定blur方法
//trigger和triggerHandler的区别还有trigger是对每个元素的绑定的方法都会执行，而triggerHandler只会执行第一个
$("form").submit(function(){
//首先执行需要把blur方法执行一遍，这样显示的错误信息 然后记录错误信息的长度 只要长度大于0就阻止提交
$("form input").trigger("blur");//执行之后会增加<span>元素
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>