jQuery验证框架使用例子
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: ,userName:true,isForbidden:true,remote: "checkName.jsp?flag=login"},nickname: {required: true,byteRangeLength: ,userName:true,isForbidden:true,remote: "checkName.jsp?flag=nick"},regpwd: {required: true,rangelength: },reregpwd: {required: true,rangelength: ,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即可
页:
[1]