Jquery+Ajax+jquery.validate插件搞定完整的注册页面

淡淡的烟草味﹌ 2022-06-18 08:13 128阅读 0赞

一个完整的注册页面的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>