jquery.validate.js使用
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!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>注册</title>
<link rel="stylesheet" href="${ctx}/css/login_6_v20150304144336.css" type="text/css">
<link rel="stylesheet" href="${ctx}/css/login_6_v0.css" type="text/css">
<link rel="stylesheet" href="${ctx}/css/validation.css" type="text/css">
<script type="text/javascript" src="${ctx}/js/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery-validation/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery-validation/1.13.1/additional-methods.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery-validation/1.13.1/localization/messages_zh.js"></script>
<style type="text/css">
.porleft p {
height: 35px;
}
.fb{ font-weight:bold;}
.link-login{font-family: '宋体';}
.porleft{height:800px;}
#nextwrap{position:relative;}
#validatecode{width:75px;}
#pre{font-size:12px;line-height:34px;cursor:pointer;}
.btnGray input.disable{color:#a0a0a0;cursor:default;}
</style>
<script type="text/javascript">
$(function() {
var validator = $('#submitForm').validate({
rules:{
mobile: {
required:true,
isMobile:true
},
password: {
required: true,
minlength: 8,
maxlength: 16
},
cpassword: {
required: true,
minlength: 8,
maxlength: 16,
equalTo: "#password"
},
validatecode :{
required: true,
remote:{
url: "${ctx}/validatecodeverify.action",
type: "post",
dataType: "json",
data: {
validatecode: function() {
return $("#validatecode").val();
}
}
}
},
chkagreement: {
required: true
}
},
messages:{
mobile: {
required: "请输入手机号码",
isMobile: "请输入有效手机号"
},
password: {
required: "请输入密码",
minlength: jQuery.validator.format("最少{0}字符"),
maxlength: jQuery.validator.format("最多{0}字符")
},
cpassword:{
required: "请输入确认密码",
minlength: jQuery.validator.format("最少{0}字符"),
maxlength: jQuery.validator.format("最多{0}字符"),
equalTo: "密码不一致"
},
validatecode :{
required: "请输入验证码",
remote:"验证码错误"
},
chkagreement: {
required: "请查看使用协议，并选择！"
}
},
errorPlacement:function(error, element) { //更改错误信息显示的位置
if (element.is(":checkbox")){
error.appendTo(element.next().next().next());
}else if(element[0].id == 'validatecode') {
//console.info(element[0].id);
error.appendTo(element.next().next().next());
}else {
error.appendTo(element.next());
}
},
submitHandler: function() {
//alert('要提交了!');
//1. 不可用 $(form).submit();否则会死循环
//2. 如果 form.submit()也不用，此表单就不会自动提交了
//form.submit();
//3. 下面是 ajax 提交
ajaxSubmit();
},
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
},
highlight: function(element, errorClass) {
$(element).parent().next().find("." + errorClass).removeClass("checked");
}
});
$('#btnNext').on('click', function() {
//console.info("a");
});
});
function ajaxSubmit() {
console.info("aaaaaaa");
if( $("#submitForm").valid() ){
var url = "${ctx}/useradd.action";
var mobile = $('#mobile').val();
var password = $('#password').val();
var validatecode = $('#validatecode').val();
$.post(url, {
"data.mobile": mobile,
"data.password": password,
"validatecode": validatecode
},function(data){
console.info(data);
}, "json");
}
}
</script>
</head>
<body>
<div class="cb win1000">
<form id="submitForm" method="post" name="submitForm" target="formSubmit">
<div class="porleft">
<div class="regMenu">
<span id="mobileRegTab"><a href="javascript:void(0);" onclick="cur_tab='phone';clickLog('from=reg_'+cur_tab);">手机注册</a></span>
<span id="loginTab">已有账号？<a href="https://passport.58.com/login/">去登录</a></span>
</div>
<div class="regWrap">
<!-- 手机注册 -->
<div id="mobileRegCon" >
<p>
<span class="regtlx">手 机 号</span>
<input type="text" size="20" value="" class="inp inw" id="mobile" maxlength="20" name="mobile" />
<span id="mobile_Tip"></span>
</p>
</div>
<div id="passwordCon">
<p>
<span class="regtlx">密 码</span>
<input type="password" size="30" name="password" id="password" class="inp inw" onkeyup="$.c.user.reg.CheckPasswordStrength(this)" onpaste="return false" maxlength="16" />
<span id="password_Tip" style="z-index: 100;"></span>
</p>
<p id="cpp">
<span class="regtlx">确 认 密 码</span>
<input type="password" size="30" name="cpassword" id="cpassword" class="inp inw" maxlength="16" onpaste="return false" />
<span id="cpassword_Tip"></span>
</p>
</div>
<div id="verifyCode" >
<p>
<span class="regtlx">验 证 码</span>
<input class="inp inw" id="validatecode" maxlength="5" name="validatecode" size="2" type="text">
<img align="absmiddle" onclick="refreshValidatecode(); return false" name="vcodeImg" id="vcodeImg" style="cursor: pointer; height: 32px;" src="${ctx}/validatecode.action?temp=123i1knr04o">
<a onclick="refreshValidatecode(); return false" href="javascript:void(0)" class="f12">看不清？</a>
<span id="validatecode_Tip"></span>
</p>
<script type="text/javascript">
function refreshValidatecode(){
document.getElementById('vcodeImg').src='${ctx}/validatecode.action?temp=123'+ (new Date().getTime().toString(36));
}
</script>
</div>
<div id="mobileCodeCon" style="display: none">
<p>
<span class="regtlx">手 机 号 码</span>
<span id="nextmobile"></span> <span id="mobile_Tip2"></span>
</p>
<p id="sendbtnp" class="p2 f12 ">
<span class="regtlx"> </span>
<label class="fs-btn-h btnGray"><input type="button" name="resendbtn" onclick="resendcode()" id="resendbtn" value="获取手机确认码" /></label>
<span id="resendcode_Tip"></span>
</p>
<p>
<span class="regtlx">手机确认码</span>
<input type="text" size="20" value="" maxlength="6" class="inp inw" id="mobilecode" name="mobilecode" />
<span id="mobilecode_Tip"></span>
</p>
</div>
<p class="agreement">
<span class="regtlx"> </span>
<input type="checkbox" checked="checked" id="chkagreement" name="chkagreement"/> <span>我已阅读并同意</span><a target="_blank" href="http://about.58.com/home/announcement.html">《58同城使用协议》</a>
<span id="chkagreement_Tip"></span>
</p>
<p class="submitwrap" style="display: none">
<span class="regtlx"> </span>
<label id="butt" class="butt"><input type="submit" class="btns" value="立即注册" checked="checked" id="btnSubmit" style="width:110px;height:34px;" onclick="clickLog('from=reg_'+cur_tab+'_submit');" /></label>
<span id="gologin"><span id="loginOpt">已有账号？<a href="https://passport.58.com/login/">去登录</a></span></span><span id="pre"><a herf="javascript:;">返回上一步</a></span>
</p>
<p id="nextwrap">
<span class="regtlx"> </span>
<label id="butt" class="butt"><input type="submit" class="btns" value="确定" checked="checked" id="btnNext" style="width:110px;height:34px;"/></label>
<span id="loginOpt">已有账号？<a href="https://passport.58.com/login/">去登录</a></span>
</p>
</div>
</div>
</div>
</form>
</div>
<div id="footer" class="win1000">
<p>© 58.com <a class="fduihua" target="_blank" title="有问题请与58客服进行对话" href="http://about.58.com/">与58对话</a></p>
</div>
</body>
</html>
在additional-method.js中添加如下代码
$.validator.addMethod("ziprange", function(value, element) {
return this.optional(element) || /^90[2-5]\d\{2\}-\d{4}$/.test(value);
}, "Your ZIP-code must be in the range 902xx-xxxx to 905xx-xxxx")
//邮政编码验证
$.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码"),
//身份证号码验证
$.validator.addMethod("isIdCardNo", function(value, element) {
var idCard = /^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\w)$/;
return this.optional(element) || (idCard.test(value));
}, "请输入正确的身份证号码!"),
//手机号码验证
$.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
//return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value));
return this.optional(element) || (length == 11 && /^(0|86|17951)?(13[0-9]|15[012356789]|18[0-9]|14[57])[0-9]{8}$/.test(value));
}, "请正确填写您的手机号码!");
validation.css内容如下
/*
*验证样式
*/
#submitForm label.error {
background:url("./images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
#submitForm label.checked {
background:url("./images/checked.gif") no-repeat 0px 0px;
}