`
wwwzhouhui
  • 浏览: 361070 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jquery.validate 使用

阅读更多

 整理了一下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.js

    jquery.validate 版本大全

    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

    jquery.validate.min.js jquery jquery验证插件 validate

    jquery.validate.js表单验证.pdf

    开发者可以覆盖jquery.validate.js默认的验证消息,使用$.validator.messages格式来自定义提示内容。例如,当表单字段必填但未填写时,开发者可以设置提示为"This field is required."。 4. 验证方法:文件中提到了...

    jquery.validate.js

    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.js

    总结,jQuery.validate.js凭借其便捷的使用方式、强大的验证功能和灵活的扩展性,成为前端开发中的必备工具。通过深入理解和熟练运用,开发者能更好地控制表单验证流程,提高网站的质量和用户体验。无论是在个人项目...

    jQuery.validate 用法

    &lt;script src="jquery.validate.min.js"&gt; &lt;button type="submit"&gt;Submit $(document).ready(function(){ $("#myForm").validate(); }); ``` 上述代码中,`required`是内置的验证规则,表示该字段必须...

    jquery.validate.extend.js

    jquery.validate.extend.js

    jquery.validate.unobtrusive.js

    微软的jquery.validate.unobtrusive.js验证插件,可以用来验证单选和多选框的.

    jQuery.validate验证

    &lt;script src="path/to/jquery.validate.js" type="text/javascript"&gt; ``` 2. **默认验证规则**: - `required`: 验证字段是否为空,不能为空。 - `remote`: 使用AJAX调用指定的URL检查输入值的有效性。 - `...

    jquery.validate-1.13.1.js

    jquery.validate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...

    jquery.validate.messages_cn

    jquery.validate.js表单验证 jquery.validate.messages_cn.js 表单验证中文提示

    jquery.validate.js 和 帮助文档.rar

    本文将深入探讨jQuery validate.js的核心功能及其API,同时结合提供的帮助文档,为你揭示其背后的实现原理和使用技巧。 首先,jQuery validate.js的主要功能是为HTML表单提供强大的验证规则。通过简单的配置,...

    jQuery.validate.js表单验证及API

    本文将深入探讨jQuery.validate.js的核心功能、API使用方法以及一些常见的使用场景。 首先,jQuery.validate.js是由Jörn Zaefferer创建的一个轻量级插件,它是jQuery Form Plugin的一部分,主要用于简化HTML表单的...

    jQuery.validate.js+API中文

    《jQuery.validate.js与API中文详解》 在Web开发领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作,事件处理以及Ajax交互等任务。而jQuery Validate插件则是jQuery的一个重要扩展,它专注于表单...

Global site tag (gtag.js) - Google Analytics