jQuery验证框架使用例子

最新推荐文章于 2018-10-25 08:13:44 发布

原创最新推荐文章于 2018-10-25 08:13:44 发布 · 123 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#框架 #jQuery #JSP #JavaScript #Ajax #ViewUI

jquery 专栏收录该内容

6 篇文章

订阅专栏

本文通过一个具体的实例展示了如何使用jQuery的Validator插件进行表单验证。包括引入必要的JS文件、定义验证规则及错误提示信息等步骤。

jQuery的validator框架用起来挺舒服的，方便而且扩展也挺方便的。比起之前写的纯js验证看起来也优雅多了。以下是个例子，也是仿着别人的来做的，大同小异。

首先引入的js文件如下：

<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>

验证信息所采用的样式如下：

<style type="text/css">  
	label.errorMsg {border:1px solid red;PADDING-LEFT: 25px;color: red;vertical-align: middle;background:url('${root}/images/gif/register/error.png') no-repeat;background-position: left}   
	input.errorMsg { border: 1px dotted red; background:url('images/gif/register/invalid_line.gif') repeat-x 100px bottom;}   
	 label.valid { border:0px;background:url('images/gif/register/correct.png') no-repeat 0 -1px;}   
	input.focus { border: 2px solid green; }   
	ul li{ display: block;}   
 </style>

html代码

<form styleId="regFormid" method="post" enctype="multipart/form-data" action="/reg.do?method=register"> 
	<table width="700" border="0" cellpadding="0" cellspacing="0">
		<tr>
			<tr>
				<td height="35" align="left" >
					<span>账号</span>
					<span><input id="regname" type="text" name="regname"/></span>
					<span></span>
				</td>
			</tr>
			<tr>
				<td height="35" align="left" >
					<span>昵称</span>
					<span><input id="nickname" type="text" name="nickname"/></span>
					<span></span>
				</td>
			</tr>
			<tr>
				<td height="35">
					<span>密码</span>
					<span><input id="regpwd" type="password" name="regpwd"/></span>
					<span></span>	
				</td>
			</tr>
			<tr>
				<td height="35">
					<span>确认密码</span>
					<span><input type="password" id="reregpwd" name="reregpwd"/></span>
					<span></span>
				</td>
			</tr>
			<tr>
				<td height="35">
					<span>邮箱</span>
					<span><input type="text" id="email" name="email"/></span>
					<span></span>	
				</td>
			</tr>
			<tr>
				<td height="35">
					<span>确认邮箱</span>
					<span><input type="text" id="remail" name="remail"/></span>
					<span></span>	
				/td>
			</tr>
			<tr>
				<td height="35">
					<span>性别</span>
					<span>
					   <input id="genderid1" type="radio" name="gender" value="1"/>男
					   <input id="genderid0" type="radio" name="gender" value="0"/>女
					</span>
					<span></span>		
				</td>
			</tr>
			<tr>
				<td height="70px">
					<span>头像</span>
					<span><input id="headpic" type="file" name="headpic" /></span><span></span>
				</td>
			</tr>
			<tr>
				<td height="35">
					<span>验证码</span>
					<span><input id="verify" type="text" name="verify" size="6"/>
					<a href="javascript:reloadVerifyCode();">
					<img height="24" align="absmiddle" width="56" id="safecode" src="/RandomCodeCtrl"/>
					</a>
					</span>
					<span></span>
				</td>
			</tr>
			<tr>
				<td>
					<input type="submit" value="submit" />
				</td>
			</tr>
							
</form>

js代码如下：

$(function() {
	$("#regFormid").validate({
		errorClass: "errorMsg", 
		onkeyup: false,
		rules: {
			regname: {
				required: true,
				byteRangeLength: [3,10],
				userName:true,
				isForbidden:true,
				remote: "checkName.jsp?flag=login"
			},
			nickname: {
				required: true,
				byteRangeLength: [3,10],
				userName:true,
				isForbidden:true,
				remote: "checkName.jsp?flag=nick"
			},
			regpwd: {
				required: true,
				rangelength: [6,18]
			},
			reregpwd: {
				required: true,
				rangelength: [6,18],
				equalTo: "#regpwd"
			},
			email: {
				required: true,
				email: true,
				remote: checkEmail.jsp"
			},
			remail: {
				required: true,
				equalTo: "#email",
				email: true,
				remote: "checkEmail.jsp?flag=remail"
			},
			gender: {   
                required: true  
            }, 
			headpic: {   
                accept: "jpg,jpeg,gif"  
            },   
			verify: {
				required: true,
				remote: "checkVerifyCode.jsp"
			},
		},
		messages: {
			regname: {
				required: "账号为必填项！",
				byteRangeLength: $.format("请确保账号在{0}-{1}个字符之间(一个中文字算2个字符)！"),
				isForbidden:$.format("不能输入保留字，请重新输入！"),
				remote:"账号已经被占用！"
				//remote: $.format("{0}已经被占用")"请确保输入的值在3-10个字符之间(一个中文字算2个字符)"
			},
			nickname: {
				required: "昵称为必填项！",
				byteRangeLength: $.format("请确保昵称在{0}-{1}个字符之间(一个中文字算2个字符)！"),
				isForbidden:$.format("不能输入保留字，请重新输入！"),
				remote:"昵称已经被占用！"
				//remote: $.format("{0}已经被占用")
			},
			regpwd: {
				required: "密码为必填项！",
				rangelength: $.format("密码要在{0}-{1}个字符之间！")
			},
			reregpwd: {
				required: "确认密码为必填项！",
				rangelength: $.format("确认密码要在{0}-{1}个字符之间！"),
				equalTo: "确认密码必须要和密码一致！"
			},
			email: {
				required: "邮箱为必填项！",
				email: "请正确输入邮箱格式（例如 myemail@163.com）",
				remote: "您输入的邮箱已被注册，请重新输入！"
			},
			remail: {
				required: "确认邮箱为必填项！",
				equalTo: "确认邮箱必须和邮箱一致！",
				email: "请正确输入邮箱格式（例如 myemail@163.com）",
				remote: "您输入的邮箱已被注册，请重新输入！"
			},
			gender: {
				required: "请选择性别！"
			},
			headpic: {
				accept: "图片格式必须为jpg,jpeg或gif！"
			},
			verify: {
				required: "验证码为必填项！",
				remote: "验证码不正确！"
			}},
		errorPlacement: function(error, element) {  //验证消息放置的地方   
            error.appendTo( element.parent("span").next("span") );   
        },   
        highlight: function(element, errorClass) {  //针对验证的表单设置高亮   
            $(element).addClass(errorClass);   
        },   
        success: function(label) {     
             label.html("&nbsp;").addClass("valid");     
        } 
        
	});
});

还有些Ajax调用，这里就不一一列出，很简单，只要在相应的jsp的输出流中输出true或者false即可