注册校验+三级联动+上传头像

来源：互联网发布：视频格式转换器 mac 编辑：程序博客网时间：2024/06/07 13:53

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";    }

阅读全文

1 0