用jQuery实现简单的表单验证
在网上找到了好多这种验证的例子，但是都是一样的，而且没有注释，又或者是注释解释不清，直接拿来很难看懂，这个例子的原博主也不知道是谁了，拿来用一下。加了注释，让整篇代码看着好懂一些
在实际的开发中css样式放在一个文件夹中，js放在一个文件中，html文件放在和js，css文件夹的同级目录下，用到的时候引入。之前看到一篇文章，讲了html，script的加载顺序，html中的代码是按行依次加载的，html页面中的<script>标签中的内容（直接写入或者引用外部文件都一样）是以顺序加载执行的，每个<script>标记内容可以当成一个独立的块，同步的情况下一个块加载解析然后执行完后才加载下一块。当然这时也会阻塞其他页面元素的加载。所以我们在写script标签的时注意这个问题即可。
script标签：
<script type="text/javascript">
//页面加载的时候执行的方法ready（），和load方法一样
$(document).ready(function(){
//为表单的必填文本框添加提示信息（）选择form中的所有后代input元素）
$("form :input.required").each(function(){
//创建元素
var $required = $("<strong class='high'>*</strong>");
//将它追加到文档中
$(this).parent().append($required);
});
//为表单的必填文本框添加相关事件（blur、focus、keyup）
//对于每个选择出来的标签调用blur都个他们绑定一个……
$("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>");
}
}
}).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;
document.write(numError);
if(numError){
return false;
}
//弹出窗口提示
alert("注册成功");
});
});
</script>css样式：（在idea上真的很方便写这些代码）
<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>body：
<form method="post" action="">
<div class="int">
<label for="name">名称：</label>
<input type="text" id="name" class="required" />
</div>
<div class="int">
<input type="submit" value="提交" id="send" style="margin-left: 70px;" />
<input type="reset" value="重置" id="res" />
</div>
</form>完整代码：
注意在引入jQuery的时候，作者之前遇到了问题，在网上下载的jQuery.js就是不能被引入，也可能是引入了不生效。郁闷了好长时间，在中午的时候想明白了，换个低版本的试试，结果好使了，页面可以正常的判断了……，可能是浏览器不支持最新版本的问题，之后选择了在网上直接链接jQuery文件，还是很好用的。
<!DOCTYPE html>
<!--快捷键 ！+tab生成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 src="http://libs.baidu.com/jquery/2.0.0/jquery.min.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">
<input type="submit" value="提交" id="send" style="margin-left: 70px;" />
<input type="reset" value="重置" id="res" />
</div>
</form>
<script type="text/javascript">
//页面加载的时候执行的方法ready（），和load方法一样
$(document).ready(function(){
//为表单的必填文本框添加提示信息（）选择form中的所有后代input元素）
$("form :input.required").each(function(){
//创建元素
var $required = $("<strong class='high'>*</strong>");
//将它追加到文档中
$(this).parent().append($required);
});
//为表单的必填文本框添加相关事件（blur、focus、keyup）
//对于每个选择出来的标签调用blur都个他们绑定一个……
$("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>");
}
}
}).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;
document.write(numError);
if(numError){
return false;
}
alert("注册成功，密码已发到你的邮箱");
});
});
</script>
</body>
</html>
