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插件的方法步骤如下：

导入js库
默认校验规则（上面参考了）
将校验规则写到控件中
将校验规则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