jQuery表单验证（Validate）使⽤⽅法
表单的校验是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="static.runoob/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="static.runoob/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
3.指定需要验证的内容
在页⾯的<head></head>中写⼊JS代码
<script>
$().ready(function(){
$("#login").validate();
});jquery是什么有什么作用
</script>
在原先页⾯的基础上，到需要验证的输⼊框，在class中输⼊
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>
有看出和原来的区别吗？我们在输⼊框的周围加了⼀层<div></div>，同时为了确保错误信息可以显⽰在输⼊框的下⽅，我们还添加了⼀个<br>
新增的JS代码
<script>
$().ready(function(){
$("#login").validate({
errorPlacement:function(error, element){
error.appendTo(element.parent());
}
});
});
</script>
上述代码和原先相⽐，这⾥新增⼀个函数errorPlacement，errorPlacement这个函数是jQuery内置的，error表⽰错误信息，element表⽰校验的元素。
这⾥选择在元素的⽗元素（就是我们之前加的<div></div>）的下⽅添加错误信息，为了保证换⾏效果，还在其中添加了<br>元素。
5.如何添加其他的验证信息呢
例如长度限制、是否要求为整数等等，显然在class⾥⾯添加过多的元素并不是⼀个好主意，所以我们选择在JS中增加输⼊框的验证要求。直接上代码
<script>
$().ready(function(){
$("#login").validate({
errorPlacement:function(error, element){
error.appendTo(element.parent());
},
rules:{
account:{
maxlength:3,
digits:true
}
}
});
});
</script>
在之前的JS代码中，我们新增了rules，在rules中输⼊需要验证的输⼊框的id，然后输⼊需要限定的内容即可。
如上述代码所⽰，这⾥要求输⼊框的长度不得查过3个长度（有需要其他校验要求的可以百度⼀下看关键字是什么），同时要求输⼊的数字为整数，来看⼀下效果
6.如何让显⽰的内容为中⽂呢
⼜或者说，我希望⾃定义报错的信息。
在JS中新增⼀段代码
$.extend($.ssages, {
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
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。