jquery.validate 应用

2012-10-06

jquery.validate 使用?整理了一下jquery.validate 方面的东西，简化了客户端验证工作的开发需要jquery-1.4.

jquery.validate 使用

?整理了一下jquery.validate 方面的东西，简化了客户端验证工作的开发

需要jquery-1.4.min.js 和jquery.validate.js

页面中引入2个JS

由于jquery.validate.js中提供了英文的验证消息，需要扩展中文消息，所以自定义了jquery.validate.messages_cn.js

/* * Translated default messages for the jQuery validation plugin. * Language: CN * Author: Fayland Lam <fayland at gmail dot com> */jQuery.extend(jQuery.validator.messages, {        required: "必选字段",remote: "请修正该字段",email: "请输入正确格式的电子邮件",url: "请输入合法的网址",date: "请输入合法的日期",dateISO: "请输入合法的日期 (ISO).",number: "请输入合法的数字",digits: "只能输入整数",creditcard: "请输入合法的信用卡号",equalTo: "请再次输入相同的值",accept: "请输入拥有合法后缀名的字符串",maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"),minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"),rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"),max: jQuery.format("请输入一个最大为 {0} 的值"),min: jQuery.format("请输入一个最小为 {0} 的值")});

? ??jquery.validate.js 提供了基础的电子邮件，URL 日期等验证，但是可能我们实际开发中可能会有新的验证规则，这个需要我们自己定义一个，如定义了一个jquery.validatePlugin.js

? ?//手机号码验证

jQuery.validator.addMethod("ismobile", function(value, element) {     var length = value.length;        var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;        return (length == 11 && mobile.exec(value))? true:false; }, "请正确填写您的手机号码");//邮编验证 jQuery.validator.addMethod("isZipCode", function(value, element) {            var tel = /^[0-9]{6}$/;            return (tel.exec(value))?true:false;        }, "请正确填写您的邮编");

? ? 下面提供测试代码

? ??<html>

   <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jquery-1.4.min.js"></script><script type="text/javascript" src="jquery.validate.js"></script><script type="text/javascript" src="jquery.validate.messages_cn.js"></script><script type="text/javascript" src="jquery.validatePlugin.js"></script><link href="./css/jquery_validate.css" rel="stylesheet" type="text/css"/><script>$(function(){$("#myform").validate();});</script>   </head>   <body><form id="myform">用户名：<input type="text" name="user" name="email" name="birth" name="mobile" name="zipcode" value="登陆"/>    </form>   </body></html>

? ??使用的时候在页面加载的时候加入

$(function(){

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

});

</script>

需要验证的字段填入验证规则如必填项

? ? 相关完整的代码提供如下，如果有扩展规则可以修改jquery.validatePlugin.js文件

热点排行

Web前端

jquery.validate 应用