本篇文章主要包含的知识点:
- 事件函数 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>