Jquery插件-Jquery validate

来源：互联网发布：网络客户服务的优势有编辑：程序博客网时间：2024/06/16 03:19

所做的东西即将收尾了，终于不用天天写代码了，可以休息一下了(手动捂脸哭泣)。但是连续写代码的这这几周以来，学到的东西还是挺多的。对以前实习的内容也慢慢继续加深了了解。看来程序猿真的是从实践之中找到更多经验和更多知识的。在临近收尾的时候，需要对细节进行处理，比如一些输入框的校验等，所以又设计到以前实习时所用到的一个插件：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异步请求问题

1 0