jquery validate表单校验学习笔记

最近有个项目，用到很多的表单校验，尝试了一下jQuery.validator，甚是顺手，地址：http://plugins.jquery.com/project/validate，基本的用法：

代码如下

复制代码

$('#formId').validate({
    debug:true, // 打开debug模式，不会真实提交，适合测试
    rules:{
        uName:"required", // 需要录入
        uNick:{
            required:true
        }, // 需要录入的另一种写法
        uBlog:{
            required:true,
            url:true
        } // 需要输入，且录入的必须是url
    },
    messages:{ // 自定义提示语文字
        uName:"请输入用户名"
    },
    submitHandler:function(form) { // 表单提交，需要jqueyr.form插件
        form.submit();
    }
}

阅读一下文档差不多就会了解，支持的校验格式有：

required:必填字段

email:电子邮件

url:合法的网址

date:日期

dateISO:日期(ISO)

number:数字

digits:整数

creditcard:信用卡号

equalTo:相同的值

accept:拥有合法后缀名的字符串

maxlength:最多长度的字符串

minlength:最少长度的字符串

rangelength:一个长度介于最小值和最大值之间的字符串

range:一个介于最小值和最大值之间的值

max:最大值

min:最小值

相对高阶一点功能:

•自定义错误提示信息
当然，你可以通过定义messages来修改提示信息，但你想偷懒又不想用默认的英文提示，直接引入默认提示文字

代码如下	复制代码
<script src="path/to/localization/messages_cn.js" type="text/javascript"></script>

•IE6下不工作的bug
传闻IE6下，jquery.validate.js有乱码，不能正常工作，解决办法：

代码如下	复制代码
<script src="path/to/jquery.validate.js" type="text/javascript" charset="iso-8859-1"></script>

•控制错误信息显示位置
有的时候默认的错误信息显示有问题，比如多个单选框，默认的会把错误信息显示在第一个单选框后面，页面就乱了，解决办法：

代码如下	复制代码
errorPlacement: function(error, element) { if (element.is(":radio")) { error.appendTo(element.parent().parent("td")); else { error.appendTo(element.parent()); } }

当然，还可以重载invalidHandler来实现

•依赖校验

有的时候，一个输入框的校验依赖于其他条件，比如登录的时候可以通过用户名或者邮箱登录，只有当用户选择用邮箱登录时，才对邮箱输入框验证，rules中可以这样写：

代码如下	复制代码
uMail:{ required:{depends: function(element) { return true == $('#isMail').val(); }}, email:true }

这样只有用户选择了用邮箱登录才会校验邮箱项，否则不校验。

看一个实例

如果表单通过前端JS来先做预判断，然后通过JS来post到后端脚本的，则表单form标签可以不填action和method等信息。

validate初始化部分

代码如下	复制代码
$(document).ready(function(){ $('#form').validate({//文档加载完毕，初始化validate插件 //这里写validate初始化的一些信息，例如rules，messages等 }); });

validate验证、提交部分

代码如下	复制代码
$('#form').submit(function(){//当表单被提交时，进行表单验证 if($(this).valid() == true){ $.post({'./script.php'});//当表单验证通过时，post到./script.php的脚本上 }else{ alert('验证失败'); } return false; //这个很重要，靠return false来阻止html的表单动作，让所有的表单动作都交给JS来处理。 });

html的表单动作，让所有的表单动作都交给JS来处理。});

之前一直没写return false，导致总是出现个问题，例如alert()会一闪而过，后台会记录两次提交的，提交有时GET给了表单页面自己等…

补充：网页制作,jquery