`
周一Monday
  • 浏览: 346304 次
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery插件之Validation

阅读更多

1准备工作

 

 

导入必要的JS文件

 

jQuery核心库文件

 

jquery-1.8.2.js

 

jquery validation 库文件

 

jquery-validation-1.10.0\dist\jquery.validate.js

 

国际化文件(中文)

jquery-validation-1.10.0\localization\messages_zh.js

 

2.html文件

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery-validation Demo</title>

<!-- 显示错误信息的样式 -->
<style type="text/css">
label.error {
	margin-left: 5px;
	color: red;
	display: none;
}
</style>

<!-- 需要导入的jQuery类库 -->
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>

<!-- 验证文件 -->
<script type="text/javascript" src="index.js"></script>

</head>
<body>
	<form action="" method="post" id="myForm">
		<table border="1" width="70%">
			<tr>
				<td>姓名:</td>
				<td><input type="text" name="name" /></td>
			</tr>
			<tr>
				<td>密码:</td>
				<td><input type="password" name="password" /></td>
			</tr>
			<tr>
				<td>确认密码:</td>
				<td><input type="password" name="repassword" /></td>
			</tr>
			<tr>
				<td>邮箱:</td>
				<td><input type="text" name="email" /></td>
			</tr>
			<tr>
				<td>年龄:</td>
				<td><input type="text" name="age" /></td>
			</tr>
			<tr>
				<td>日期:</td>
				<td><input type="text" name="date" /></td>
			</tr>
			<tr>
				<td>税后工资:</td>
				<td><input type="text" name="salary" /></td>
			</tr>
			<tr>
				<td>验证码:</td>
				<td><input type="text" name="code">1+2=?</td>
			</tr>
			<tr>
				<td>性别:</td>
				<td>
					<input type="radio" name="gender" value="1" />男 
					<input type="radio" name="gender" value="0" />女
					<label for="gender" class="error">请选择性别</label>
				</td>
			</tr>
			<tr>
				<td>已经阅读此协议:</td>
				<td><input type="checkbox" name="agree" id="agree" value="1" />
					<label for="agree" class="error">请勾选已经阅读此协议</label>
				</td>
			</tr>
			<tr>
				<td>常用的开源框架:</td>
				<td>
					<input type="checkbox" name="framework" value="struts" />struts
					<input type="checkbox" name="framework" value="hibernate" />hibernate
					<input type="checkbox" name="framework" value="ibatis" />ibatis 
					<input type="checkbox" name="framework" value="spring" />spring 
					<input type="checkbox" name="framework" value="jquery" />jquery 
					<input type="checkbox" name="framework" value="extjs" />extjs 
					<label for="framework" class="error">请选择你常用的开源框架,3-5个</label>
				</td>
			</tr>
			<tr>
				<td>城市:</td>
				<td>
					<select name="city">
						<option value="">请选择</option>
						<option value="1">北京</option>
						<option value="2">上海</option>
						<option value="3">广州</option>
					</select> 
					<label for="city" class="error">请选择城市</label>
				</td>
			</tr>
			<tr>
				<td>水果:</td>
				<td>
					<select name="fruit" multiple="multiple">
						<option value="1">西瓜</option>
						<option value="2">苹果</option>
						<option value="3">葡萄</option>
						<option value="4">香蕉</option>
					</select> 
					<label for="fruit" class="error">请选择你爱吃的水果,至少2个</label>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="submit" value="提交" />
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

 

3.JS文件

 

$(document).ready(function() {

	$.validator.setDefaults({
		submitHandler : function() {
			alert("恭喜你!验证通过!");
		}
	});

	/*
	 * 自定义校验 $.validator.addMethod(mehodName,function(value,element,param){
	 * 
	 * },msg);
	 */
	$.validator.addMethod("myCode", function(value, element, param) {
		return value == eval(param);
	}, "请输入计算结果");

	$("#myForm").validate({
		rules : {
			name : {
				required : true,
				minlength : 5,
				maxlength : 10,
				remote : {
					url : "checkAction.action",
					type : "post"
				/*
				 * dataType:'json', data:{ name:function(){ return
				 * $("#name").val(); } }
				 */
				}
			},
			password : {
				required : true,
				rangelength : [ 5, 10 ]
			},
			repassword : {
				required : true,
				rangelength : [ 5, 10 ],
				//equalTo : "#password"
				equalTo:"input[type='password']"
			},
			email : {
				required : true,
				email : true
			},
			age : {
				required : true,
				digits : true,
				min : 10,
				max : 100
			},
			date : {
				required : true,
				dateISO : true
			// 不严谨
			},
			salary : {
				required : true,
				number : true
			},
			code : {
				myCode : "1+2"
			},
			gender : {
				required : true
			},
			agree : {
				required : true
			},
			framework : {
				required : true,
				rangelength : [ 3, 5 ]
			},
			city : {
				required : true
			},
			fruit : {
				required : true,
				minlength : 2
			}
		},
		messages : {
			name : {
				required : "请输入姓名",
				minlength : "最小长度5",
				maxlength : "最大长度10",
				remote : "用户名已存在"
			},
			password : {
				required : "请输入密码",
				rangelength : "长度5-10之间的数字或字母"
			},
			repassword : {
				required : "请输入确认密码",
				rangelength : "长度5-10之间的数字或字母",
				equalTo : "两次密码不一样"
			},
			email : {
				required : "请输入邮箱",
				email : "邮箱格式不正确"
			},
			age : {
				required : "请输入年龄",
				digits : "年龄应该是整数",
				min : "可输入的最小值是10",
				max : "可输入的最大值是100"
			},
			date : {
				required : "请输入日期",
				dateISO : "日期格式不正确"
			},
			salary : {
				required : "请输入税后工资",
				number : "数字格式不正确"
			}
		}
	});
});

 

4.Struts相关

 

 

package org.monday.web.action;

import java.io.ByteArrayInputStream;
import java.io.InputStream;

import com.opensymphony.xwork2.ActionSupport;

public class CheckAcion extends ActionSupport {

	private static final long serialVersionUID = -2949375196140872041L;

	private String name; // 参数

	private InputStream inputStream;

	private Boolean valid; // 定义返回值:只能为Boolean类型

	@Override
	public String execute() throws Exception {
		if ("jquery".equals(name)) { // 这里应该调用Service,此处省略..
			valid = false;
		} else {
			valid = true;
		}
		inputStream = new ByteArrayInputStream(valid.toString().getBytes());
		return SUCCESS;
	}

	// getter and setter
}

 

<struts>
	<package name="jquery" namespace="" extends="struts-default">
		<action name="checkAction" class="org.monday.web.action.CheckAcion">
			<result type="stream">
				<param name="contentType">text/html</param><!-- 默认为text/plain -->
				<param name="inputName">inputStream</param><!-- 默认就为inputStream -->
			</result>
		</action>
	</package>

  • 大小: 98.2 KB
分享到:
评论

相关推荐

    jQuery插件之validation插件

    Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评。本文将详细介绍validation插件 概述 jQuery Validate插件为表单提供了强大的验证功能,让客户端表单验证变...

    高质量的jQuery表单验证插件 A Jquery Inline Form Validation

    `A Jquery Inline Form Validation` 是一个高质量的jQuery插件,专注于提供直观且高效的前端表单验证功能。这个插件通过在用户输入时即时显示错误信息,使得验证过程更加顺畅,减少了用户在提交表单后发现错误的情况...

    jQuery Validation Plugin1.19.5(jQuery验证插件最新)

    jQuery 插件使客户端表单验证变得容易,同时仍然提供了大量的自定义选项。如果您要从头开始构建新的东西,或者当您试图将某些东西集成到具有大量现有标记的现有应用程序中时,它都是一个不错的选择。该插件捆绑了一...

    jQuery Validation Engine ( jQuery 表单验证插件)

    jQuery Validation Engine是一款强大的JavaScript库,专门用于实现网页表单的验证功能。它是基于流行的JavaScript库jQuery构建的,为开发者提供了一种优雅的方式来处理用户输入的数据验证。这个插件以其高度可定制性...

    表单验证JQ插件jquery-validation.js

    表单验证JQ插件jquery-validation.js

    jquery-validation插件

    **jQuery Validation 插件详解** jQuery Validation 插件是一款强大且灵活的JavaScript工具,它专为简化HTML表单验证而设计。这个插件基于广泛使用的jQuery库,使得在网页开发中实现用户输入验证变得轻而易举。其...

    Jquery前端表单验证插件formvalidation源码及示例

    **jQuery FormValidation插件**是前端开发中一个广泛使用的工具,专门用于实现高效且用户友好的表单验证。这个插件基于流行的JavaScript库jQuery构建,它简化了在Web应用程序中实施复杂的验证规则的过程。在标题提到...

    jQuery-validation.rar

    在使用jQuery-validation插件时,首先需要引入jQuery库以及validation插件的JavaScript和CSS文件。然后,通过`$.validate()`方法初始化验证,或者为特定表单元素添加`data-rule-*`和`data-msg-*`属性来指定验证规则...

    jQuery表单验证插件Validation的应用

    **jQuery表单验证插件Validation的应用** jQuery Validation插件是一款非常强大的前端表单验证工具,它可以帮助开发者轻松地实现对用户输入数据的有效性检查,确保数据的准确性和完整性。这个插件是基于jQuery库...

    jquery.validate Validation .js验证框架 帮助 手册 文档 chm

    (二)插件方法 (jQuery validation) 6 (三、四)选择器及实用工具 (jQuery validation) 7 四、实用工具(Utilities) 8 (五)验证器 (jQuery validation) 8 (六)内置验证方法 (jQuery validation) 10 (七)注意...

    jQuery Validation插件

    **jQuery Validation插件详解** jQuery Validation插件是前端开发中常用的一款工具,它极大地简化了网页表单验证的过程,提供了一套完整的验证规则和自定义验证功能,使得开发者能够快速、高效地实现对用户输入数据...

    jquery-validation.zip

    在实际应用中,jQuery验证插件不仅可以用于简单的字段验证,还可以与其他jQuery插件(如表单序列化插件)配合,实现更复杂的数据验证和提交。例如,结合AJAX提交,可以在不刷新页面的情况下进行后台验证,提高交互...

    表单验证jquery插件

    **jQuery Validation Engine 插件详解** 在Web开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合预设的规则,...在实际开发中,结合使用其他jQuery插件和前端框架,能更好地构建出高效、友好的Web应用。

    jquery表单验证插件validationEngine---个人修改

    ValidationEngine主要由JavaScript和CSS组成,它通过jQuery插件的方式嵌入到项目中。其核心功能是对HTML表单元素进行实时验证,可以在用户输入时立即检查数据的合法性,提供即时反馈。 ### 二、安装与引入 1. **...

    jquery-validation-1.19.1.zip

    《jQuery验证插件jQuery-validation-1.19.1详解》 jQuery-validation是Web开发中常用的客户端表单验证插件,其1.19.1版本的发布为开发者提供了更稳定和高效的服务。该压缩包“jquery-validation-1.19.1.zip”包含了...

    validation-jQuery验证插件

    简述jQuery验证插件validation的功能和使用

    jquery-validation-1.11.1.zip

    《jQuery验证插件详解——基于jquery-validation-1.11.1.zip的探索》 jQuery作为一款广泛使用的JavaScript库,极大地简化了DOM操作,事件处理和动画制作等任务。而`jquery-validation`则是jQuery生态中的一款强大...

    jQuery Validation表单验证插件实例打包.rar

    jQuery Validation表单验证插件实例合集,是锋利的JQuery第七章中的一个典型实例,一步步向大家讲解如何使用基于jQuery的表单验证插件jquery.validate.js和jquery.validate.messages_cn.js的使用方法,一共包含了7个...

    jquery.validationEngine校验插件

    **jQuery ValidationEngine 插件详解** jQuery ValidationEngine 是一款强大的前端表单验证插件,它极大地简化了网页表单的验证过程,使开发者无需编写复杂的取值和正则表达式比较,即可实现丰富的验证功能。该插件...

Global site tag (gtag.js) - Google Analytics