概述
所做的东西即将收尾了，终于不用天天写代码了，可以休息一下了(手动捂脸哭泣)。但是连续写代码的这这几周以来，学到的东西还是挺多的。对以前实习的内容也慢慢继续加深了了解。看来程序猿真的是从实践之中找到更多经验和更多知识的。在临近收尾的时候，需要对细节进行处理，比如一些输入框的校验等，所以又设计到以前实习时所用到的一个插件：Jquery validate。
导入js库
导入jquery validate所用到的js库，所用到的库包括：jquery.js、jquery.validate.js、jquery.validate.min.js。
导入如下所示：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>了解基本的用法
Jquery Validate已经为我们提供了一部分的默认提示信息，同时，我们也可以自定义校验规则。
使用方法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="tools/jquery-2.2.3.js"></script>
<script type="text/javascript" src="tools/jquery.validate.js"></script>
<script type="text/javascript" src="tools/jquery.validate.min.js"></script>
<script type="text/javascript" src="tools/jquery.metadata.js"></script>
<script type="text/javascript" src="tools/messages_zh.js"></script>
<link rel="stylesheet" href="tip.css"/>
<script type="text/javascript">
$(function(){
$("#formid").validate();
});
</script>
</head>
<body>
<form id="formid" action="" method="post">
<div>
<input type="text" name="name" id="name" placeholder="输入姓名" required>
</div>
<div>
<input type="text" name="age" id="age" placeholder="输入年龄">
</div>
<div>
<input type="button" name="sbutton" id="sbutton" value="确认">
</div>
</form>
<script type="text/javascript">
$("#sbutton").click(function(){
$("#formid").submit();
});
</script>
</body>
</html>以上的代码，导入的库中 jquery.metadata.js ,下载链接是将校验内容写到class里面必须要导入的包，例如：class="required"。messages_zh.js 这个包则是Jquery Validate的中文支持库。
自定义的校验方法
例如校验手机号码是否符合手机号码的规则
$.validator.addMethod( "phone", function( value, element ) {
return this.optional( element ) || /^1(3[0-9]|4[5-7]|5[0-35-9]|8[0-9]|7[6-8])d{8}$/.test( value );
}, "手机号码不合法" );将以上的内容加到中文支持库messages_zh.js中，然后在html中的class加上phone的这个校验。class="required phone"
其他的设置
$.validator.setDefaults({
errorPlacement:function(error,element){
error.appendTo(element.parent());
},//错误提示的位置,显示在相对应控件的后面
focusInvalid:true,//校验有错不聚焦
focusCleanup:false, //聚焦清理错误提示
onkeyup: false
//输入过程不校验
});后记：写得比较简单，其实在使用的过程中，由于是初次使用，然后在jsp中一直没有效果，经过测试发现原来是页面使用了异步请求ajax，使得表单提交的时候并没有任何作用，后来找到了解决方法，就是通过jquery中valid()方法来实现validate功能。
$(function(){
$("#formid").validate();
$("#sbutton").click(function(){
if($("#formid").valid()){
$.ajax({
//异步请求的内容
});
}
});
});还有其他两种方法同时可以解决validate异步请求问题
最后
以上就是坦率小刺猬为你收集整理的Jquery插件-Jquery validate的全部内容，希望文章能够帮你解决Jquery插件-Jquery validate所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复