一個完整的註冊頁面的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: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;register',
                        content: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正在註冊中...'
                    });
                    }
                });


            });
    //非同步對手機號碼進行校驗，去資料庫查詢該手機是否已經註冊過了
    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>