jquery表单验证学习心得

jquery validate的官方演示和文档地址：

引用块内容

官方网站：http://jqueryvalidation.org/
官方演示：http://jqueryvalidation.org/files/demo/
官方文档：http://jqueryvalidation.org/documentation/

在提交表单前常要对用户输入进行校验
.asp.net的验证控件就是用于此目的, 可以同时进行客户端和服务器端验证. 但是验证控件并没有被所有项目采用. 而且在MVC项目中经常使用自己的客户端验证框架.

所以在比较了若干表单验证插件后, 决定采用validate插件. 因为其使用简单并且灵活.
query validate这个jquery插件几乎可以轻松应对95%以上的表单验证，这也是选择它的原因。

调用jquery。需要引用jquery.min.js和jquery.validate.js
因为jquery.validate.js是jquery插件所以必须要有jquery支持，现在使用jquery的网站很多。

jquery validate默认验证规则的提示语中文化

参考 http://www.jb51.net/article/75301.htm

$.extend($.validator.messages, {
        required: "必填",
        remote: "请修正该字段",
        email: "电子邮件格式不正确",
        url: "网址格式不正确",
        date: "日期格式不正确",
        dateISO: "请输入合法的日期 (ISO).",
        number: "请输入数字",
        digits: "只能输入整数",
        creditcard: "请输入合法的信用卡号",
        equalTo: "请再次输入相同的值",
        accept: "请输入拥有合法后缀名的字符",
        maxlength: $.validator.format("请输入一个 长度最多是 {0} 的字符"),
        minlength: $.validator.format("请输入一个 长度最少是 {0} 的字符"),
        rangelength: $.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符"),
        range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
        max: $.validator.format("请输入一个最大为{0} 的值"),
        min: $.validator.format("请输入一个最小为{0} 的值")
    });

但是这次我们需要自定义表单验证，所以要使用自定义表单验证方法
addMethod(name,method,message)方法：
参数name 是添加的方法的名字
参数method是一个函数,接收三个参数(value,element,param) value 是元素的值,element是元素本身 param是参数

以邮箱验证规则为例：
jQuery.validator.addMethod("mail", function (value, element) {
    var mail = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$/;
    return this.optional(element) || (mail.test(value));
}, "邮箱格式不对");

主要使用jquery插件的方法步骤如下：

1. 导入js库
2. 默认校验规则（上面参考了）
3. 将校验规则写到控件中
4. 将校验规则js中

我们也可以用其他方法代替默认的submit

$().ready(function() {
 $("#signupForm").validate({
        submitHandler:function(form){
            alert("submitted");   
            form.submit();
        }    
    });
});

更改错误提示信息的样式
设置错误提示的样式，可以增加图标显示，在该系统中已经建立了一个validation.css专门用于维护校验文件的样式

input.error { border: 1px solid red; }
label.error {
  background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
  padding-left: 16px;
  padding-bottom: 2px;
  font-weight: bold;
  color: #EA5200;
}
label.checked {
  background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}

一点点心得

jQuery 是一个 JavaScript 库。简化了 JavaScript 编程。容易学习。我是通过菜鸟教程学习的jquery，可以在线编程，非常适合入门的同学。如果做系统分析的验证以上看懂会用就够了，如果还想进一步学习，可以参照下面的教程，一步一步学习。

菜鸟教程： http://www.runoob.com/jquery/jquery-tutorial.html