首页 > 建站 > 用jquery实现表单验证 input验证
2017
04-21

用jquery实现表单验证 input验证

最近织梦建站,这个表单验证花费我不少时间,各种代码测试,总有问题。本文的这个版本还不错。jQuery验证表单,满足要求才允许提交表单。

—选自《锋利的jQuery》(第2版)第5章的例题 。

验证表单元素步骤如下:

(1)判断当前失去焦点的元素是“名称”还是“邮箱”,然后分别处理。

(2)如果是“名称”,判断元素的值的长度是否小于 6 ,如果小于 6 ,则用红色字体提醒用户输入不正确,反之,则用绿色提醒用户输入正确。

(3)如果是“邮箱”,判断元素的值是否符合邮箱的格式,如果不符合,则用红色字体提醒用户输入不正确,反之,则用绿色字体提醒用户输入正确。

(4)将提醒信息追加到当前的父元素的最后。

注:为了使用方便,当text文本框中的内容格式错误时,程序应尽量把所有提示都显示出来,而不是每次验证一种格式后只与之相关的错误提醒信息。

 

完整代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
<title>jQueryStudy</title>
<style type=”text/css”>
.int{ height: 30px; text-align: left; width: 600px; }
label{ width: 200px; margin-left: 20px; }
.high{ color: red; }
.msg{ font-size: 13px; }
.onError{ color: red; }
.onSuccess{ color: green; }
</style>
<script type=”text/javascript” src=”jquery-1.10.2.js”></script>
</head>
<body>
<form method=”post” action=””>
<div class=”int”>
<label for=”name”>名称:</label>
<input type=”text” id=”name” class=”required” />
</div>
<div class=”int”>
<label for=”email”>邮箱:</label>
<input type=”text” id=”email” class=”required” />
</div>
<div class=”int”>
<label for=”address”>地址:</label>
<input type=”text” id=”personinfo” />
</div>
<div class=”int”>
<input type=”submit” value=”提交” id=”send” style=”margin-left: 70px;” />
<input type=”reset” value=”重置” id=”res” />
</div>
</form>
<script type=”text/javascript”>
$(document).ready(function(){
//为表单的必填文本框添加提示信息(选择form中的所有后代input元素)
$(“form :input.required”).each(function(){
//创建元素
var $required = $(“<strong class=’high’>*</strong>”);
//将它追加到文档中
$(this).parent().append($required);
});

//为表单的必填文本框添加相关事件(blur、focus、keyup)
$(“form :input”).blur(function(){
//注意:这里的this是DOM对象,$(this)才是jQuery对象
var $parent = $(this).parent();
//删除之前的错误提醒信息
$parent.find(“.msg”).remove();
//验证“名称”
if($(this).is(“#name”)){
//运用jQuery中的$.trim()方法,去掉首位空格
if($.trim(this.value) == “” || $.trim(this.value).length < 6){
var errorMsg = ” 请输入至少6位的名称!”;
//class=’msg onError’ 中间的空格是层叠样式的格式
$parent.append(“<span class=’msg onError’>” + errorMsg + “</span>”);
}
else{
var okMsg=” 输入正确”;
$parent.find(“.high”).remove();
$parent.append(“<span class=’msg onSuccess’>” + okMsg + “</span>”);
}
}
//验证邮箱
if($(this).is(“#email”)){
if($.trim(this.value) == “” || ($.trim(this.value) != “” && !/.+@.+\.[a-zA-Z]{2,4}$/.test($.trim(this.value)))){
var errorMsg = “请输入正确的E-Mail地址!”;
$parent.append(“<span class=’msg onError’>” + errorMsg + “</span>”);
}
else{
var okMsg=” 输入正确”;
$parent.find(“.high”).remove();
$parent.append(“<span class=’msg onSuccess’>” + okMsg + “</span>”);
}
}
}).keyup(function(){
//triggerHandler 防止事件执行完后,浏览器自动为标签获得焦点
$(this).triggerHandler(“blur”);
}).focus(function(){
$(this).triggerHandler(“blur”);
});

//点击重置按钮时,触发文本框的失去焦点事件
$(“#send”).click(function(){
//trigger 事件执行完后,浏览器会为submit按钮获得焦点
$(“form .required:input”).trigger(“blur”);
var numError = $(“form .onError”).length;
if(numError){
return false;
}
alert(“注册成功,密码已发到你的邮箱”);
});
});
</script>
</body>
</html>

做个记录。

最后编辑:
作者:格娜小屋
格娜小编子轩,爱网络,爱生活,爱分享!
捐 赠分享不易,谢谢赞助!

留下一个回复

你的email不会被公开。