JQuery插件Validation的使用-遁地龙卷风

    技术2023-05-29  69

    第二版

    (-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="password"/><br/>

        <!--上一版本的两个id值写成一样,导致了一些错误,抱歉'-->

               <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);

               }

          })

    });

    Processed: 0.010, SQL: 9