表单校准是jQuery给页面开发者带来极大便利的功能之一。 无论您是大学生还是已经下岗的工程师，都可以了解形状校准的基本功能。
目录
1. 从简单的表格开始
<form id="login">
<label for="account" >账号</label>
<input id="account" name="account" />
<input type="submit" value="提交"/>
</form>
2.引入需要使用的jQuery
为了方便，我们直接引入在线jQuery，一个基本的jquery.js和一个表单验证所需的jquery.validate.js。
如果需要，可以直接复制链接到浏览器打开，复制页面内容，粘贴到本地文件中。
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
3、明确需要验证的内容
在页面中编写JS代码
<script>
$().ready(function() {
$("#login").validate();
});
</script>
在原来页面的基础上，找到需要验证的输入框，在类中输入
class="required"
<form id="login">
<label for="account" >账号</label>
<input id="account" name="account" class="required"/>
<input type="submit" value="提交"/>
</form>
4.如何自定义错误信息的位置
例如，如果我想让错误信息出现在输入框的下方，该怎么办？
也比较简单，但是设计到页面的改变，我们却需要稍微改变一下页面的布局。
<form id="login">
<div>
<label for="account" >账号</label>
<input id="account" name="account" class="required"/><br>
</div>
<input type="submit" value="提交"/>
</form>
你能看出和原来的区别吗？我们在输入框的周围加了一层，并且为了保证错误信息能够显示在输入框的下方表单验证jquery，我们还加了一个
添加了JS代码
<script>
$().ready(function() {
$("#login").validate({
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}
});
});
</script>
与之前的代码相比，这里增加了一个新的函数errorPlacement。 函数 errorPlacement 是 jQuery 的外部函数。 error表示错误信息，element表示需要校准的元件。
这里我们选择在该元素的父元素下添加错误信息（我们之前添加的），为了保证换行的效果，我们还添加了
元素。
5. 如何添加其他验证信息
比如宽度限制，是否要求是整数等等，即使在类中添加太多的元素也不是一个好主意，所以我们选择降低JS中输入框的验证要求。
直接在代码上
<script>
$().ready(function() {
$("#login").validate({
errorPlacement: function(error, element) {
error.appendTo(element.parent());
},
rules:{
account:{
maxlength:3,
digits:true
}
}
});
});
</script>
在前面的JS代码中，我们添加了规则，在规则中输入需要验证的输入框的id，然后输入需要限制的内容。
如上面代码所示，要求输入框的宽度不能超过3个宽度（如果需要其他校准要求，可以百度一下关键词）表单验证jquery，并且要求输入的数字为整数才能看到疗效
6、如何让显示内容变成英文？
换句话说，我想自定义错误消息。
在JS中添加一段新代码
$.extend($.validator.messages, {
required: "这是必填字段"
})
现在我们来看看效果
其实没有定义的内容默认还是显示中文的。
7. 如何为动态生成的代码添加约束
在一些特定场景下，页面显示的内容是根据数据库返回的数据动态生成的，包括输入框的校准要求，那么如何处理。
这里我们可以使用jQuery来动态添加验证规则。
首先，为了让代码更简洁、更清晰，我们先去掉自动添加的校准规则和自定义错误信息。
原JS代码如下：
<script>
$().ready(function() {
$("#login").validate({
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}
});
});
</script>
使用 jQuery 动态添加验证规则的 JS 代码：
<script>
$().ready(function() {
$("#login").validate({
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}
});
$("#account").rules("add", {
required : true
});
});
</script>
新添加的一段代码是
$("#account").rules("add", {
required : true
});
同样，如果我们希望整个页面是动态的，只需要保证后台返回的数据包含：
1. 页面元素ID
2.校准要求（如required、maxlength等）
3. 校准值（如true或数字）
8. 如果我想自定义校准规则的名称，该怎么办？
目前我们导入的是网上的或者别人的validate.js，比如number，数字等名称都是固定的，如果我想把number改成numberForMe，怎么办呢？
只需要在JS上面添加一个函数即可，如下所示：
jQuery.validator.addMethod("numberForMe",function(a,b){
//开始做校验，返回false表示要显示错误信息，返回true表示无需显示。
XXXXXX
return true或者false;
},$.validator.format("请输入数字")
);
完整的JS代码：
<script>
$().ready(function() {
$("#login").validate({
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}
});
$("#account").rules("add", {
numberForMe: true
});
jQuery.validator.addMethod("numberForMe",function(a,b){
return XXXXX
},$.validator.format("请输入数字")
);
</script>
这样，你可以自定义校准的名称，也可以自定义校准规则，还可以自定义校准的输出，一举多得。
