使用JQuery完成表单的校验(扩展)
事件:
获得焦点事件: onfocus
失去焦点事件: onblur
按键抬起事件: onkeyup
鼠标移入: onmouseenter
鼠标移出: onmouseout
JS引入外部文件 : script标签
需求分析
在用户提交表单的时候, 我们最好是能够在用户数据提交给服务器之前去做一次校验,防止服务器压力过大,并且需要给用户一个友好提示
技术分析
- trigger : 触发事件,但是会执行类似浏览将光标移到输入框内的这种浏览器默认行为
- triggerHandler : 仅仅只会触发事件所对应的函数
- is()
步骤分析
- 首先给必填项,添加尾部添加一个小红点
- 获取用户输入的信息,做相应的校验
- 事件: 获得焦点, 失去焦点, 按键抬起
- 表单提交的事件
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css"/>
<title></title>
<!--
1. 首先给必填项,添加尾部添加一个小红点
2. 获取用户输入的信息,做相应的校验
3. 事件: 获得焦点, 失去焦点, 按键抬起
4. 表单提交的事件
Jq的方式来实现:
1. 导入JQ的文件
2. 文档加载事件: 在必填项后天加一个小红点
3. 表单校验确定事件: blur focus keyup
4. 提交表单 submit
-->
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script>
$(function () {//默认做一些页面初始化
// 在所有必填项后天加一个小红点 *
$(".bitian").after("<font class='high'>*</font>");
//给必填项绑定事件
$(".bitian").blur(function () {
//首先获取用户当前输入的值
// var value = this.value;
var value = $(this).val();
//清空当前必填项后面的span
// $(".formtips").remove();
$(this).parent().find(".formtips").remove();
//获得当前事件是谁的
if ($(this).is("#username")) { //判断是否是用户名输入项
//校验用户名
if (value.length < 6) {
$(this).parent().append("<span class='formtips onError'>用户名太短了</span>");
} else {
$(this).parent().append("<span class='formtips onSuccess'>用户名够用</span>");
}
}
if ($(this).is("#password")) {//判断是否是密码输入项
//校验密码
if (value.length < 3) {
$(this).parent().append("<span class='formtips onError'>密码太短了</span>");
} else {
$(this).parent().append("<span class='formtips onSuccess'>密码够用</span>");
}
}
}).focus(function () {
$(this).triggerHandler("blur");
}).keyup(function () {
$(this).triggerHandler("blur");
});
// $(".bitian").blur(function(){}).focus(function(){}).keyup(function(){})
//给表单绑定提交事件
$("form").submit(function () {
//触发必填项的校验逻辑
$(".bitian").trigger("focus");
//找到错误信息的个数
var length = $(".onError").length
if (length > 0) {
return false;
}
return true;
});
});
</script>
</head>
<body>
<form action="index.html">
<div>
用户名:<input type="text" class="bitian" id="username"/>
</div>
<div>
密码:<input type="password" class="bitian" id="password"/>
</div>
<div>
手机号:<input type="tel"/>
</div>
<div>
<input type="submit"/>
</div>
</form>
</body>
</html>