一个完整的注册页面的jquery：
$(document).ready(function(){
//省市区ajax请求
$("#province").change(function(){
var pId = $("#province").val();
$("#market").empty();
$.post("menu_list_city_area",
{
"shengOrShi":pId
},
function(data){
var data = eval('('+ data +')');
for(var i=0;i<data.root.length;i++){
$("<option value='"+data.root[i].cityId+"'>"+data.root[i].cityName+"</option>").appendTo($("#market"))
}
changeMarket();
});
})
function changeMarket(){
var pId = $("#market").val();
//alert(pId);
$("#area").empty();
$.post("menu_list_city_area",
{
"shengOrShi":pId
},
function(data){
var data = eval('('+ data +')');
for(var i=0;i<data.root.length;i++){
$("<option value='"+data.root[i].cityId+"'>"+data.root[i].cityName+"</option> ").appendTo($("#area"));
}
});
}
$("#market").change(function(){
changeMarket();
})
//自定义的插件方法,用于对图片的校验
jQuery.validator.addMethod("photoPic", function(value, element) {
var geshi = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG|JPEG)$/;
return this.optional(element) || (geshi.test(value));
}, "图片格式只支持jpg,png,gif和jpeg");
jQuery.validator.addMethod("licensePic", function(value, element) {
var geshi = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG|JPEG)$/;
return this.optional(element) || (geshi.test(value));
}, "图片格式只支持jpg,png,gif和jpeg");
//对input框进行验证
$("#form-box").validate({
rules : {
companyName : "required",
shopName : "required",
area : "required",
address : "required",
photoPic : {
required : true,
photoPic : true
},
licensePic : {
required : true,
licensePic : true
},
contactPerson : {
required : true,
rangelength : [ 2, 15 ]
},
phone : {
required : true,
},
email : {
required : true,
email : true
},
bank_cards : {
required : true,
digits:true,
rangelength : [ 15, 19 ]
},
bankName : {
required : true,
minlength : 5,
},
representative : {
required : true,
rangelength : [ 2, 10 ]
}
},
//验证失败之后的提示语
messages : {
companyName : "不能为空",
shopName : "不能为空",
area : "不能为空",
address : "不能为空",
photoPic : {
required : "不能为空"
},
licensePic : {
required : "不能为空"
},
photoPic : {
required : "不能为空"
},
licenseNo : {
required : "不能为空"
},
contactPerson : {
required : "不能为空",
rangelength : "非法字符"
},
phone : {
required : "不能为空",
},
email : {
required : "不能为空",
email : "邮箱地址错误"
},
bank_cards : {
required : "不能为空",
digits:"非法字符",
rangelength : "请输入正确的银行卡号"
},
bankName : {
required : "不能为空",
minlength : "请输入正确的开户行名称",
},
representative : {
required : "不能为空",
rangelength : "非法字符"
}
},
//图片格式错误的提示放在框外面
errorPlacement: function(error, element){
if (element.parent().parent().children().hasClass('up-pic') ) {
error.appendTo(element.parent().parent());
}
else{
error.appendTo(element.parent());
}
}
});
//当手机号码框失去焦点时执行去后台查找是否重复 的方法
$("#phone").blur(function() {
getPhoneNum()
});
//当手机号码文本框得到焦点时把提示语置空
$("#phone").focus(function() {
$("#phone_exist").html("");
});
//图片回显调用方法 ，下同
$("#photoPic").change(function() {
var file = document.getElementById('photoPic').value;
if(file == ""){ //如果input框中没有文件就把img中的文件删除
$('#newImg').attr("src","");
}else{ //如果不为空那就IMG中显示图片
newFile();
}
});
$("#licensePic").change(function() {
var file = document.getElementById('licensePic').value;
if(file == ""){
$('#oldImg').attr("src","");
}else{
oldFile();
}
});
//当from提交的时候进行判断插件的验证是否全部通过，如果通过的话就弹出“正在注册...”; $('#form-box').valid()就是验证所有的验证是否全部通过
$('#sub').click(function(){ //当点击提交的时候如果所有的验证都通过的话就弹出这个"正在注册的..."的提示框
if($('input').val() != "" && $('#form-box').valid()){
$('#photo_error').dialogBox({ //弹窗插件，注意一定要创建一个空的div而且id="photo_error",不然就会失效
width: 250,
height: 160,
autoHide: true,
time: 10000000,
hasMask: true,
hasBtn: false,
effect: 'flip-horizontal',
title: ' register',
content: ' 正在注册中...'
});
}
});
});
//异步对手机号码进行校验，去数据库查找该手机是否已经注册过了
function getPhoneNum() {
$.ajax({
type : "post",
async : true,
url : "find_only_phone",
data : {
phoneNum : $("#phone").val()
},
success : function(data) {
phoneIsExist(data);
}
});
}
//根据后台传来的data进行相应的操作
function phoneIsExist(data) {
if (data.status == 200) {
$("#phone_ok").html(data.message);
$("#sub").removeAttr("disabled");
}
if (data.status == 202) {
$("#phone_exist").html(data.message);
$("#phone_ok").html("");
$("#sub").attr("disabled", true);
}
}jsp页面：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>中介门店注册</title>
<link rel="stylesheet" type="text/css" href="static/css/reset.css" />
<link rel="stylesheet" type="text/css" href="static/css/validation.css" />
<link rel="stylesheet" type="text/css"
href="static/lib/laydate/need/laydate.css" />
<link rel="stylesheet" type="text/css" href="static/css/shopRegisterPage.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/static/css/jquery.dialogbox.css">
<script type="text/javascript" src="static/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="static/lib/laydate/laydate.js"></script>
<script type="text/javascript" src="static/js/plugIn.js"></script>
<script type="text/javascript" src="static/js/jquery.validate.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/static/js/jquery.dialogBox.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/static/js/shopReg.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div class="header">
<img src="static/images/logofter.png" alt="" />
<span class="line"></span>
<span class="header-word">注册门店申请加盟</span>
</div>
<div class="container">
<form action="shop_register" class="form-box" id="form-box" method="post" enctype="multipart/form-data" >
<div class="form-div" >
<label class="form-label" >公司名称<b>*</b></label>
<input type="text" name="companyName" class="form-input" />
</div>
<div class="form-div" >
<label class="form-label" >门店名称<b>*</b></label>
<input type="text" name="shopName" class="form-input" />
</div>
<div class="form-div" id="" >
<label class="form-label" >所在地<b>*</b></label>
<select id="province" name="province" class="prov" style="margin-left:10px;">
<option value="">请选择</option>
<c:forEach var="p" items="${provinces}">
<option value="${p.cityId }">${p.cityName }</option>
</c:forEach>
</select>
<select id="market" name="market" class="city">
<option value="">请选择</option>
</select> <select id="area" name="area" class="dist">
<option value="">请选择</option>
</select>
</div>
<div class="form-div" >
<label class="form-label" >门店地址<b>*</b></label>
<input type="text" name="address" id="address" class="form-input" />
</div>
<div class='form-div'>
<label class="form-label">门头照片<b>*</b></label>
<div class="up-pic">
<img src="" id="newImg" >
<span>+</span>
<input type="file" id="photoPic" name="photoPic" class="form-input file-pic"/>
</div>
</div>
<div class='form-div'>
<label class="form-label">营业执照复印件<b>*</b></label>
<div class="up-pic">
<img src="" id="oldImg" >
<span>+</span>
<input type="file" id="licensePic" name="licensePic" class="form-input file-pic"/>
</div>
</div>
<div class="form-div" >
<label class="form-label" >门店营业执照号<b>*</b></label>
<input type="text" name="licenseNo" id="licenseNo" class="form-input" />
</div>
<div class="form-div" >
<label class="form-label" >负责人姓名<b>*</b></label>
<input type="text" name="contactPerson" id="contactPerson" class="form-input" />
</div>
<div class="form-div" >
<label class="form-label" >联系电话<b>*</b></label>
<input type="text" name="phone" id="phone" class="form-input" /><a href="#" style="color:#2772DB;font-size: 10px;" id="phone_ok"></a><a href="#" style="color:#ff0000;font-size: 10px;" id="phone_exist"></a>
</div>
<div class="form-div" >
<label class="form-label" >Email<b>*</b></label>
<input type="text" name="email" id="email" class="form-input" />
</div>
<div class="form-div" >
<label class="form-label" >银行卡号<b>*</b></label>
<input type="text" name="bank_cards" id="bank_cards" class="form-input" />
</div>
<div class="form-div" >
<label class="form-label" >开户行名称<b>*</b></label>
<input type="text" name="bankName" id="bankName" class="form-input" />
</div>
<div class="form-div" >
<label class="form-label" >银行卡开户名<b>*</b></label>
<input type="text" name="representative" id="representative" class="form-input" />
</div>
<div class="applyJoin">
<input id="sub" type="submit" value="申请加盟" />
<font color="red" size="1">${data}</font>
<span id="noPhoto" style="color:red; size:1"></span>
</div>
</form>
</div>
<div id="photo_error"></div>
</body>
<script type="text/javascript">
//门头照片
function newFile() {
var windowURL = window.URL || window.webkitURL;
var loadImg = windowURL.createObjectURL(document.getElementById('photoPic').files[0]);
document.getElementById('newImg').setAttribute('src',loadImg);
}
//营业执照复印件
function oldFile() {
var windowURL = window.URL || window.webkitURL;
var loadImg = windowURL.createObjectURL(document.getElementById('licensePic').files[0]);
document.getElementById('oldImg').setAttribute('src',loadImg);
}
</script>
</html>
680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
