web前端之锋利的jQuery八：jQuery插件的使用（表单验证、表单提交）
web前端之锋利的jQuery八：jQuery插件的使用（表单验证、表单提交）
1.jQuery表单验证插件－Validation： 最常使用JavaScript的场合就是表单的验证，而jQuery作为一个优秀的JavaScript库，也提供了一个优秀的表单验证插件－Validation，其拥有以下优点： 内置验证规则：拥有必填、数字、email、URL和信用卡号等19类内置验证规则。 自定义验证规则：可以很方便地自定义验证规则 简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能 实时验证：可以通过keyup和blur事件触发验证，而不仅仅在表单提交的时候验证
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Validation</title>
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script type="text/javascript" src="../js/jquery.validate.messages_cn.js"></script>
<style type="text/css">
*{
font-family: Verdana;
font-size: 96%;
}
label{
width: 10em;
float: left;
}
label.error{
float: none;
color: red;
padding-left: .5em;
vertical-align: top;
}
p{
clear: both;
}
.submit{
margin-left: 12em;
}
em{
font-weight: bold;
padding-right: 1em;
vertical-align: top;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#commentForm").validate();
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="#">
<fieldset>
<legend>一个简单的验证带验证提示的评论例子</legend>
<p>
<label for="cusername">姓名</label><em>*</em>
<input id="cusername" name="username" size="25" class="required" minlength="2" />
</p>
<p>
<label for="cemail">电子邮件</label><em>*</em>
<input id="cemail" name="email" size="25" class="required email" />
</p>
<p>
<label for="curl">网址</label><em>*</em>
<input id="curl" name="url" size="25" class="url" value="" />
</p>
<p>
<label for="ccomment">你的评论</label><em>*</em>
<textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交" />
</p>
</fieldset>
</form>
</body>
</html>首先引入：
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>确定哪个表要被验证 $(“#commentForm”).validate();
针对不同字段，进行验证规则编码 class=”required” 为必须填写 minlength=”2” 为最小长度为2 class=”required email” 必须填写，内容必须是email格式 class=”url” 为url格式验证
使提示是中文，导入：
<script type="text/javascript" src="../js/jquery.validate.messages_cn.js"></script>
2.jQuery表单插件——Form： jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易的，无侵入的升级HTML表单以支持Ajax。jQuery Form有两个核心方法－ajaxForm()和ajaxSubmit,他们集合了从控制表单formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields()、resetForm()等。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>插件</title>
<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="../js/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//绑定id为myForm的表单并提供一个简单的回调函数
$("#myForm").ajaxForm(function(){
$("#output1").html("提交成功！欢迎下次再来！").show();
});
});
</script>
</head>
<body>
<form id="myForm" action="demo.php" method="post">
名称：<input type="text" name="name" /><br>
地址：<input type="text" name="address" /><br>
自我介绍：<textarea name="comment"></textarea><br>
<input type="submit" id="test" value="提交" /><br>
<div id="output1" style="display:none;"></div>
</form>
</body>
</html>当表单被提交时，“姓名”、“地址”、“自我介绍”字段的值会以无刷新的方式提交到文件demo.PHP中。如果服务器返回一个成功的状态，那么用户就会看到“提交成功！欢迎下次再来”的提示
核心方法 ajaxForm()和ajaxSubmit()
通过核心方法ajaxForm()，能很容易地将表单升级为Ajax提交方式
$("#myForm").ajaxForm(function(){
$("#output1").html("提交成功！欢迎下次再来！").show();
});
Form插件还有一个核心方法就是ajaxSubmit()，也能完成用同样的功能
$("#myForm").submit(function(){
$(this).ajaxSubmit(function(){
$("#output1").html("提交成功！欢迎下次再来！").show();
});
return false;//阻止表单默认提交
});ajaxForm()和ajaxSubmit()的参数 ajaxForm()和ajaxSubmit()都能接受0个或者1个参数。当为单个的参数时，该参数既可以是一个回调函数，也可以是一个option对象。上面例子的参数就是回调函数。接下来介绍options对象，通过给ajaxForm()方法和ajaxSubmit()方法传递options对象，使得他们对表单拥有更多的控制权。 首先定义一个对象options，然后在对象里设置参数
var options={
target="#output1"//把服务器返回的内容放入id为output1的元素中
,beforeSubmit:showRequest//提交前的回调函数
,success:showResponse//提交后的回调函数
,url:url//默认是form的action，如果申明，则被覆盖
,type:type//默认是form的method ，如果申明，则被覆盖
,dedaType:null//“xml”、“script”、“json”等数据类型
,clearForm:true//成功提交后，清除所有表单元素的值
,resetForm:true//成功提交后，重置所有表单元素的值
,timeout:3000//限制请求时间，当大于3秒后，跳出请求
};定义options对象之后，就可以把这个对象传递给ajaxForm方法：
$("#myForm").ajaxForm(options);或者传递给ajaxSubmit方法：
$("#myForm").submit(function(){
$(this).ajaxSubmit(options);
return false;
});在options对象里，指定两个回调函数，即beforeSubmit:showRequest和success:showResponse,他们分别会在表单提交前和表单提交后被调用。
beforeSubmit－提交前的回调函数
function showRequest(formData,jqForm,options){
var queryString =$.para(formData);
return ture;
}这个回调函数有三个参数，第一个参数formData是数组对象。在这里，使用$.param()方法把它转化成字符串，得到以下这种格式：name1&address=2 需要注意的是，当表单提交时，Form插件会以Ajax方式自动提交这些数据 第二个参数jqForm是一个DOM元素，可以把jqForm转换成DOM对象。 var formElement=jqForm[0]; var address=formElement.address.valse; 第三个参数options就是options对象。 这个回调函数中只要不返回false，表单豆浆杯允许提交；如果返回false，则会阻止表单提交。
success－提交后的回调函数
function showResponse(responseText,statusText,xhr,$form){
alert('状态：'+statusText+'\n 反悔的内容是：\n'+responseText);
}这个回调函数有四个参数responseText,statusText,xhr,$form。其中responseText,statusText两个参数比较常用。 statusText只是返回一个状态，例如success、error等。 responseText携带着服务器返回的数据内容。responseText会根据设置的options对象中的dataType属性来返回相应数据格式的内容，具体情况如下。 （1）对于缺省的HTML返回，回调函数的第一个参数是XMLHttpRequest对象的responseText属性。 （2）当dataType属性被设置为xml时，回调函数的第一个参数是XMLHttpRequest对象的responseXML属性。
$("#xmlForm").ajaxForm({
dataType:'xml';
success:processXml
});
function processXml(responseXML){
var name=$('name',responseXML).text();
var address=$('address',responseXML).text();
$("#xmlOut").html(name+" "+address);
}（3）当dataType属性被设置为json时，回调函数的第一个参数是从服务器返回的json数据对象
$("#myForm").ajaxForm({
dataType:'json';
success:processJson
});
function processJson(data){
$("#jsonOut").html(data.name+" "+data.address);
}