jQuery验证框架（八）应用实例 (jQuery validation)

最新推荐文章于 2025-05-16 14:11:04 发布

原创最新推荐文章于 2025-05-16 14:11:04 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #框架 #OO #Ajax #JSP #ViewUI

JQyery 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个基于jQuery的表单验证框架实例，该框架能够实现多种字段类型的验证，包括用户名、密码、电子邮件等，并展示了如何使用AJAX进行远程验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[b][size=large]jQuery验证框架[/size][/b]

[b][color=green][size=medium]八、应用实例[/size][/color][/b]

[size=medium][b][1][color=indigo] 验证页面[/color][/b][/size]


<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<html>
  <head>
    <title>jquery验证框架</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src=js/jquery-1.3.2.min.js></script>
    <script type="text/javascript" src=js/jquery.validate.pack.js></script>
    <script type="text/javascript" src=js/jquery.form.js></script>
    <script type="text/javascript" src=js/valid.js></script>
    <style type="text/css">
	    label { width: 10em; float: left; }
		label.haha {color: red; padding-left: 18px; vertical-align: top;width: 196px; background: url("images/unchecked.gif") no-repeat;}
		input.haha { border: 1px solid red; }
		label.valid {background: url("images/checked.gif") no-repeat; color: #065FB9;}
		input.focus { border: 2px solid green; }
		ul li{ display: block;}
    </style>
  </head>

  <body>

  <div id="form_con">
	  	<form class="cmxform" id="myform" method="post" action="">
	  		<table cellspacing="0" cellpadding="0">
				<tbody>
					<tr>
						<td>用户名</td>
						<td><input type="text" name="username" class="required" /></td>
						<td></td>
					</tr>
					<tr>
						<td>密码</td>
						<td><input id="password" type="password" name="firstpwd" /></td>
						<td></td>
					</tr>
					<tr>
						<td>验证密码</td>
						<td><input type="password" name="secondpwd" /></td>
						<td></td>
					</tr>
					<tr>
						<td>性别</td>
						<td><input id="sex" type="radio" name="sex" />男<input type="radio" name="sex" />女</td>
						<td></td>
					</tr>
					<tr>
						<td>年龄</td>
						<td><input type="text" name="age" /></td>
						<td></td>
					</tr>
					<tr>
						<td>邮箱</td>
						<td><input type="text" name="email" /></td>
						<td></td>
					</tr>
					<tr>
						<td>个人网页</td>
						<td><input type="text" name="purl" /></td>
						<td></td>
					</tr>
					<tr>
						<td>电话</td>
						<td><input type="text" name="telephone" /></td>
						<td></td>
					</tr>
					<tr>
						<td>附件</td>
						<td><input type="file" name="afile"/></td>
						<td></td>
					</tr>
					<tr><td colspan="3" ><input type="submit" name="submit" value="提交" /><button>重置</button></td></tr>
				</tbody>  		
	  		</table>
	  	</form>
  </div>	
  </body>
</html>

[size=medium][b][2][color=indigo] 验证js[/color][/b][/size]


$(function(){
	var validator = $("#myform").validate({
		debug: true,       //调试模式取消submit的默认提交功能
		errorClass: "haha",//默认为错误的样式类为：error
		focusInvalid: false,
		onkeyup: false,
		submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form
			alert("提交表单");
			//form.submit();   提交表单
		},
		rules: {           //定义验证规则,其中属性名为表单的name属性
			username: {
				required: true,
				minlength: 2,
				remote: "uservalid.jsp"  //传说当中的ajax验证
			},
			firstpwd: {
				required: true,
				//minlength: 6
				rangelength: [6,8]
			},
			secondpwd: {
				required: true,
				equalTo: "#password"
			},
			sex: {
				required: true
			},
			age: {
				required: true,
				range: [0,120]
			},
			email: {
				required: true,
				email: true
			},
			purl: {
				required: true,
				url: true
			},
			afile: {
				required: true,
				accept: "xls,doc,rar,zip"
			}
		},
		messages: {       //自定义验证消息
			username: {
				required: "用户名是必需的！",
				minlength: $.format("用户名至少要{0}个字符！"),
				remote: $.format("{0}已经被占用")
			},
			firstpwd: {
				required: "密码是必需的！",
				rangelength: $.format("密码要在{0}-{1}个字符之间！")
			},
			secondpwd: {
				required: "密码验证是必需的！",	
				equalTo: "密码验证需要与密码一致"
			},
			sex: {
				required: "性别是必需的"
			},
			age: {
				required: "年龄是必需的",
				range: "年龄必须介于{0}-{1}之间"
			},
			email: {
				required: "邮箱是必需的！",
				email: "请输入正确的邮箱地址（例如 myemail@163.com）"
			},
			purl: {
				required: "个人主页是必需的",
				url: "请输入正确的url格式,如 http://www.domainname.com"
			},
			afile: {
				required: "附件是必需的！",
				accept: "只接收xls,doc,rar,zip文件"
			}
		},
		errorPlacement: function(error, element) {  //验证消息放置的地方
	    	error.appendTo( element.parent("td").next("td") );
	    },
	    highlight: function(element, errorClass) {  //针对验证的表单设置高亮
		    $(element).addClass(errorClass);
	    },
	    success: function(label) {  
             	    label.addClass("valid").text("Ok!")  
   			}  

	    /*,
	    errorContainer: "#error_con",               //验证消息集中放置的容器
	    errorLabelContainer: "#error_con ul",       //存放消息无序列表的容器
	    wrapper: "li",								//将验证消息用无序列表包围
	    validClass: "valid",						//通过验证的样式类
	    errorElement: "em",							//验证标签的名称，默认为：label
	    success: "valid"							//验证通过的样式类
	    */
	});
	$("button").click(function(){
		validator.resetForm();
	});
	//alert($("#password").rules()["required"]);
	//validator.showErrors({"username": "用户名是必需的"});
	/*$("button").click(function () {
	    var str = "Hello {0}, this is {1}";
	    alert("'" + str + "'");
	    str = $.validator.format(str, ["koala","oo"]);
	    alert("'" + str + "'");
    });*/

});

[size=medium][b][3][color=indigo] 远程验证程序[/color][/b][/size]


<%@ page language="java" import="java.io.PrintWriter" pageEncoding="gb2312"%><%
	String username = request.getParameter("username");
	PrintWriter pw = response.getWriter();
	try{
		if(username.toLowerCase().equals("admin")){
			pw.println("true");
		}else{
			pw.println("false");
		}
	}catch(Exception ex){
		ex.getStackTrace();
	}finally{
		pw.flush();
		pw.close();
	}
%>

[size=medium][b][4][color=indigo] 验证效果[/color][/b][/size]

[img]http://dl.iteye.com/upload/attachment/186738/12054387-758f-37da-a5ec-a106e270fbae.jpeg[/img]

[img]http://dl.iteye.com/upload/attachment/186740/cfe5e937-2854-3ad4-a9ee-b99b3d632815.jpeg[/img]

[img]http://dl.iteye.com/upload/attachment/186742/266a0183-b9bc-3f85-8913-99dbdab98177.jpeg[/img]