註冊校驗+三級聯動+上傳頭像

JSP頁面

<form class="form-horizontal" role="form" action="/user/insert" method="post" enctype="multipart/form-data">

    <div class="form-group">
        <label class="col-sm-2 control-label">姓名</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" id="name" name="name" placeholder="請輸入姓名">
            <span id="s0"></span>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">用戶名</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" id="userName" name="username" placeholder="請輸入用戶名">
            <span id="s1"></span>
        </div>
    </div>

    <div class="form-group">
        <label  class="col-sm-2 control-label">密碼</label>
        <div class="col-sm-3">
            <input type="password" class="form-control" id="password" name="password" placeholder="請輸入密碼">
            <span id="s2"></span>
        </div>
    </div>

    <div class="form-group">
        <label  class="col-sm-2 control-label">確認密碼</label>
        <div class="col-sm-3">
            <input type="password" class="form-control" id="rpassword" name="rpassword" placeholder="請再次確認密碼">
            <span id="s3"></span>
        </div>
    </div>

    <div class="form-group">
        <label  class="col-sm-2 control-label ">性別</label>
        <div class="col-sm-10">
            <label class="radio-inline">
                <input type="radio" name="sex" id="sex1" value="0" checked> 男
            </label>
            <label class="radio-inline">
                <input type="radio" name="sex" id="sex2" value="1" >女
            </label>
        </div>
    </div>


    <div class="form-group">
        <label for="hobby" class="col-sm-2 control-label">愛好</label>
        <div class="col-sm-10">
            <label class="checkbox-inline">
                <input type="checkbox" name="hobby" id="hobby" value="唱歌"> 唱歌
            </label>
            <label class="radio-inline">
                <input type="checkbox" name="hobby" id="hobby" value="跳舞"> 跳舞
            </label>
            <label class="radio-inline">
                <input type="checkbox" name="hobby" id="hobby" value="運動"> 運動
            </label>
            <label class="radio-inline">
                <input type="checkbox" name="hobby" id="hobby" value="編程"> 編程
            </label>
            <label class="radio-inline">
                <input type="checkbox" name="hobby" id="hobby" value="玩遊戲"> 玩遊戲
            </label>
        </div>
    </div>


    <div class="form-group">
        <label for="birthday" class="col-sm-2 control-label">出生日期</label>
        <div class="col-sm-3 ">
            <input class="form-control" type="text" name="birthday" id="birthday" onfocus="WdatePicker({dateFmt:'yyyy/MM/dd'})" placeholder="請輸入出生日期"/>
        </div>
    </div>


    <div class="form-group">
        <label for="IDNumber" class="col-sm-2 control-label">身份證號</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" id="IDNumber" name="IDcard" placeholder="請輸入身份證號">
            <span id="s4"></span>
        </div>
    </div>


    <div class="form-group">
        <label for="phone" class="col-sm-2 control-label">手機號</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" id="phone" name="phone" placeholder="請輸入手機號碼">
            <span id="s5"></span>
        </div>
    </div>

    <div class="form-group">
        <label for="address" class="col-sm-2 control-label">地址</label>
        <div class="col-sm-3">
            <select id="province" runat="server" class="form-control" name="home">
            </select>
            <select id="city" runat="server" class="form-control" name="home">
            </select>
            <select id="county" runat="server" class="form-control" name="home">
            </select>

            <script type="text/javascript">
                setup()
            </script>
        </div>
    </div>

    <div class="form-group">
        <label for="email" class="col-sm-2 control-label">郵箱</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" id="UserEmail" name="email" placeholder="請輸入郵箱">
            <span id="s6"></span>
        </div>
    </div>


    <div class="form-group>">
        <label for="description" class="col-sm-2 control-label">個人簡介</label>
        <div>
            <!-- 多行編輯框      是富文本編輯初始化-->
            <textarea id="description" name="description"
                      style="width: 400px; height: 200px; margin: 0 auto;">
            </textarea>
        </div>
    </div>


    <div class="form-group">
        <label for="img" class="col-sm-2 control-label">個人頭像</label>
        <div >
            <input type="file" name="multipartFile" id="img"/>
        </div>
    </div>

    <div class="form-group" >
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">註冊</button>
        </div>
    </div>

</form>

JS校驗頁面：

<script type="text/javascript" src="/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="/address.js"></script>
    <script type="text/javascript" src="/My97DatePickerBeta/My97DatePicker/WdatePicker.js"></script>

<script type="text/javascript">

        $(function () {
            var runame=false;
            var pwd=false;
            var rpwd=false;
            var idn=false;
            var rphone=false;
            var remail=false;
            /*用戶名*/
            $("#userName").blur(function () {
                var userName = $(this).val();
                var flag = /^[a-zA-Z\u4e00-\u9fa5]+$/;
                $("#s1").html("");
                if (userName == null || userName == "") {
                    $("#s1").html("用戶名不能爲空!");
                }
                else{
                    if (!(flag.test(userName))) {
                        $("#s1").html("用戶名只能輸入中文和英文");
                    } else {
                        $.ajax({
                            type: "post",
                            url: "/user/queryByName",
                            data: {"name": userName},
                            dataType: "text",
                            success: function (data) {
                                if (data == "true") {
                                    $("#s1").html("用戶名已存在");
                                }else{
                                    runame=true;
                                }
                            }
                        });
                    }
                }
            });
            /*密碼*/
            $("#password").blur(function () {
                var pass = $(this).val();
                var flag = /^[0-9A-Za-z]{6,10}$/;
                $("#s2").html("");
                if (pass == null || pass == "") {
                    $("#s2").html("密碼不能爲空!");
                }
                else{
                    if (!(flag.test(pass))) {
                        $("#s2").html("密碼只能是6到10位的數字與字母組合");
                    }else{
                        pwd=true;
                    }
                }
            });

            /*確認密碼*/
            $("#rpassword").blur(function () {
                var rpass = $(this).val();
                var pass = $("#password").val();
                $("#s3").html("");
                if (rpass == null || rpass == "") {
                    $("#s3").html("密碼不能爲空");
                }
                else{
                    if (rpass != pass) {
                        $("#s3").html("兩次密碼不一致!");
                    }else{
                        rpwd=true;
                    }
                }
            });

            /*身份證號*/
            $("#IDNumber").blur(function () {
                var IDNumber = $(this).val();
                var flag = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                $("#s4").html("");
                if (IDNumber == null || IDNumber == "") {
                    $("#s4").html("身份證號不能爲空");
                }
                else{

                    if (flag.test(IDNumber) == false) {
                        $("#s4").html("身份證號不正確,必須是15-18位的數字或者最後一位以數字或字符x結尾!");
                    }else{
                        idn=true;
                    }
                }
            });

            /*手機號碼*/
            $("#phone").blur(function () {
                var phone = $(this).val();
                var flag = /^1[3|4|5|7|8][0-9]{9}$/;
                $("#s5").html("");
                if (phone == null || phone == "") {
                    $("#s5").html("手機號不能爲空");
                } else{
                    if (flag.test(phone) == false) {
                        $("#s5").html("手機號碼輸入格式不正確,必須是11位數字,以13/4/5/7/8開頭");
                    }else{
                        rphone=true;
                    }
                }
            });

            /*郵箱*/
            $("#UserEmail").blur(function () {
                var email = $(this).val();
                var flag = /^((([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6}\;))*(([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})))$/;
                $("#s6").html("");
                if (email == null || email == "") {
                    alert(3);
                    $("#s6").html("郵箱不能爲空");
                } else{
                    if (flag.test(email) == false) {
                        alert(2);
                        $("#s6").html("郵箱輸入格式不正確");
                    }else{
                        alert(1);
                        remail=true;
                    }
                }
            });
            $("form").submit(function(){

                return runame && pwd && rpwd && idn && rphone && remail;

            });
        });
    </script>

上傳頭像後端代碼：

@RequestMapping(value = "insert", method = RequestMethod.POST)
    public String userAdd(HttpServletRequest request, User user, MultipartFile multipartFile) throws Exception{
        //獲取上傳文件名稱
        String filename = multipartFile.getOriginalFilename();

        //獲取新的文件名
        long millis = System.currentTimeMillis();
        String newName = millis+filename;

        //獲取文件流
        InputStream inputStream1 = multipartFile.getInputStream();

        //獲取物理路徑
        String wlPath = "E:\\idea-workspace\\proof\\src\\main\\resources\\static\\images/"+newName;

        //邏輯路徑
        String ljPath = "../images/"+newName;

        //臨時路徑
        String pathRoot = request.getSession().getServletContext().getRealPath("/");//自動尋找target根目錄
        String lsPath = pathRoot+"\\images\\"+newName;

        //判斷是否需要創建文件夾
        //物理路徑文件夾
        File wlFile = new File("E:\\idea-workspace\\proof\\src\\main\\resources\\static\\images");
        //臨時路徑文件夾
        File lsFile = new File(pathRoot+"\\images\\");

        if(!wlFile.exists()) {
            wlFile.mkdir();
        }
        if(!lsFile.exists()) {
            lsFile.mkdir();
        }

        //執行讀寫操作
        if(!multipartFile.isEmpty()) {
            //將文件放入物理路徑
            FileOutputStream wlFileOutputStream = new FileOutputStream(wlPath);
            //將文件放入臨時路徑
            FileOutputStream lsFileOutputStream1 =new FileOutputStream(lsPath);

            int line = 0;

            while ((line = inputStream1.read()) != -1) {
                //寫入物理路徑
                wlFileOutputStream.write(line);
                //寫入臨時路徑
                lsFileOutputStream1.write(line);
            }

            wlFileOutputStream.flush();
            lsFileOutputStream1.flush();
            lsFileOutputStream1.close();
            wlFileOutputStream.close();
            inputStream1.close();
        }
        //將相對路徑放入數據庫中
        user.setPhoto(ljPath);
        userService.insert(user);
        return "redirect:/user/query";
    }