整理了一下jquery.validate 方面的东西,简化了客户端验证工作的开发
需要jquery-1.4.min.js 和jquery.validate.js
页面中引入2个JS
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
由于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" class="required"/><br>
Email:<input type="text" name="email" class="required email"/><br>
出生日期:<input type="text" name="birth" class="dateISO"/><br>
手机号码:<input type="text" name="mobile" class="ismobile"/><br>
邮政编码:<input type="text" name="zipcode" class="isZipCode"/><br>
<input type="submit" value="登陆"/>
</form>
</body>
</html>
使用的时候在页面加载的时候加入
<script>
$(function(){
$("#myform").validate();
});
</script>
需要验证的字段填入验证规则 如class="required" 必填项
相关完整的代码提供如下,如果有扩展规则 可以修改jquery.validatePlugin.js文件
分享到:
相关推荐
jquery.validate.js jquery.validate.js
jquery.validate.1.9.0.min.js jquery.validate.1.12.0.min.js jquery.validate.1.13.1.min.js jquery.validate.1.16.0.min.js jquery.validate.1.14.0.min.js jquery.validate.1.15.1.min.js jquery.validate....
jquery.validate.min.js 1.16.0插件,jquery验证
jquery.validate.extend.js
微软的jquery.validate.unobtrusive.js验证插件,可以用来验证单选和多选框的.
第二章 jQuery.validate.js API 7 Custom selectors 7 Utilities 8 Validator 8 List of built-in Validation methods 9 validate ()的可选项 11 debug:进行调试模式 11 第三章自定义jquery-validate的验证行为 23 ...
jquery.validate.js * * jQuery validation plug-in 1.7 * * http://bassistance.de/jquery-plugins/jquery-plugin-validation/ * http://docs.jquery.com/Plugins/Validation * * Copyright (c) 2006 - 2008...
jquery.validate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...
jquery.validate.js表单验证 jquery.validate.messages_cn.js 表单验证中文提示
jquery.validate.min.js jquery jquery验证插件 validate
jquery.validate.js 和 帮助文档.rar
jquery.validate表单验证密码完整例子(带密码强度显示)
jquery.validate使用详解,介绍表单验证。
jquery.validate.js表单验证.pdf
jQuery.validate.js 组件,可以使用,绝对好资源!!!
js插件 jquery-1.11.1.min.js jquery.validate.min.js