你的位置:首页 > Java教程

[Java教程]JQuery插件Validation的使用


(-1)写在前面

本文不是要详细说明Validation插件的使用,而是将满足开发需求的代码已最应该使用的方式写出来,并附有详细的注释

想要了解更多,去jquery的官网,有最新,最全面的,后续可能会写怎么从jquery官网获得信息的博文

(0)资源配置

官网的jar包:

lib 有该插件所支持的最高版本jquery  ,使用更高版本可能会发生错误,例如Jquery3.0

dist\localization\messages_zh.js  可以让默认报错信息使用中文

导入的顺序

<script   type="text/javascript" src="jquery-1.11.1.js"  ></script>

<script   type="text/javascript" src="jquery.validate.js" ></script>

<script   type="text/javascript" src="messages_zh.js"></script>

(1)css代码

<body>

      <form id="chatform">

           姓名:<input type="text" size="50" name="name"  id="name"/><br/>

           密码:<input type="text" size="50" name="password"  id="name"/><br/>

           <input type="submit" value="提交">

      </form>

</body>

(2)js代码

$(function()

{

      //添加自定义方法

      $.validator.addMethod(

           "test",

           //value 表单元素的值,

           //element,表单元素

           //param 传的参数

           function(value,element,param)

           {

                 if(value == param)

                      return true;

                 return false;

           },

           //错误的提示信息

           '请输入正确的密码'

      )

//"#chatform"  form表单

       $("#chatform").validate({

           rules:{

                 //name、password是元素的name属性值

                 name:{

                       required:true,

                      minlength:2

                 },

                 password:{

                      //调用自定义方法

                      test:"12345"

                 }

           },

           //自定义提示信息

           messages:{

                 name:{

                      required:"必须填写",

                      minlength:"不能少于两个"

                 }

                

           },

           //用什么元素显示错误信息,必填

           errorElement:"span",

           //error 显示错误信息的元素,你获得了这个元素的控制权,你可以给它加背景图片、加个img标签等

           success:function(error)

           {

                

           },

           //error 显示错误信息的元素,你获得了这个元素的控制权,你可以给它加背景图片、加个img标签等

           //element 触发错误信息的表单元素

            errorPlacement: function(error, element)

            {

                 //将error 放入到element后面   必须有

                  element.after(error);

           }

      })

});