JQuery的Validate插件

先说下使用方法吧！~

 

 引入：

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

 

使用jquery选择要验证的表单

<script type="text/javascript">

$(document).ready(function(){

       $("#myform").validate();

}); 

</script>

表单：

<form id="myform">

<input type="text" id="username" name="username" class="required" minlength="2"/>

</form>

 

先简单解释下

 在$("#myform").validate();选择要验证的表单之后，然后在表单中，要验证的标签的class属性加入验证规则就可以了

他的一些验证规则是写在class属性里的，minlength是最少为2个字符。设置好之后，就可以进行验证了，不过我在做测试的时候，发现这个标签好像必须使用id和name属性，而且必须一样才可以。

 如果你测试之后，会发现这个提示是内置的，是一串英文，怎么可以自定义验证的提示信息呢。

可以写成这样的

<script type="text/javascript">

$(document).ready(function(){

      $("myform").validate({

              rules:{

                        username:{

                                required:true,    

                                minlength:2    

                                }

                 },

              messages:{

                        username:{

                               required:"please input data",

                               minlength:"Your username must consist of at least 2 characters"

                       }

                }

      });

});

</script>

这样就可以了。上面的rules是设置相关规则 下面的messages是设置的相关提示信息，格式都差不多，记得是逗号分隔，并且最后一个后面不用加逗号，不然会出错，还有就是messages  多了个s 而不是message  我刚开始就犯这个错误了

 

虽然可以设置自己的验证提示信息，但是是英文的，怎么才可以设置成中文呢，

方法很简单，在这里引入

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

<script src="../lib/messages_cn.js" type="text/javascript"></script> //这个就是引入中文的js文件。
<script src="../jquery.validate.js" type="text/javascript"></script>

这时候还按刚才的方法在设置提示信息的时候，就可以输入中文了

 

在这里只演示的text框的验证和required和minlength的使用，其它的还有很多属性比如URL的验证和EMAIL的验证，验证方法的使用都差不多，随后我会把这些属性整理下发出来，以及如果必要的话，把下拉列表，单选，多选的使用方法贴出来，当然，如果感兴趣的朋友也可以直接到官方上下载demo，里面有详细的演示。