1.在index.jsp 页面点击新增
2.弹出新增对话框
3.去数据库查询部门列表，显示在对话框中
4.用户输入数据完成保存,完成校验
jq前端校验 ajax用户名重复校验 后端校验（重要数据，唯一约束）

@Pattern(regexp = “(^[a-zA-Z0-9_-]{6,16}$)|(^[**\u2E80-\u9FFF]{2,5})”
 ,message = “用户名必须是6-16位数字和字母的组合或者2-5位中文“)
private String empName**;

private String gender;

@Pattern(regexp = “^([a-z0-9_**\.-]+)@([\da-z\.-]+)\.([a-z\**.]{2,6})$”,
message = “**邮箱格式不正确【JSR303】**”)
private String email;
uri:
/emp/{id} get 查询员工
/emp post 保存emp
/emp/{id} put 修改emp
/emp/{id} delete 删除emp

模态框显示

  1. <%--模态框--%>
  2. <%--员工添加的模态框--%>
  3. <div class="modal fade" tabindex="-1" role="dialog" id="empAddModal">
  4.     <div class="modal-dialog" role="document">
  5.         <div class="modal-content">
  6.             <div class="modal-header">
  7.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  8.                 <h4 class="modal-title">员工添加</h4>
  9.             </div>
  10.             <div class="modal-body">
  12.                 <form class="form-horizontal">
  14.                     <div class="form-group">
  15.                         <label for="empName_add_input" class="col-sm-2 control-label">员工姓名</label>
  16.                         <div class="col-sm-10">
  17.                             <input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName">
  18.                         </div>
  19.                     </div>
  21.                     <div class="form-group">
  22.                         <label for="email_add_input" class="col-sm-2 control-label">邮箱</label>
  23.                         <div class="col-sm-10">
  24.                             <input type="text" name="email" class="form-control" id="email_add_input" placeholder="email@atguigu.com">
  25.                         </div>
  26.                     </div>
  28.                     <div class="form-group">
  29.                         <label for="empName_add_input" class="col-sm-2 control-label">性别</label>
  30.                         <div class="col-sm-10">
  31.                             <label class="radio-inline">
  32.                                 <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
  33.                             </label>
  34.                             <label class="radio-inline">
  35.                                 <input type="radio" name="gender" id="gender2_add_input" value="F"> 女
  36.                             </label>
  37.                         </div>
  38.                     </div>
  40.                     <div class="form-group">
  41.                         <label for="empName_add_input" class="col-sm-2 control-label">部门名称</label>
  42.                         <div class="col-sm-4">
  43.                             <%--提交部门id--%>
  44.                             <select class="form-control" name="dId">
  45.                                 <option>1</option>
  46.                             </select>
  47.                         </div>
  48.                     </div>
  52.                 </form>
  54.             </div>
  55.             <div class="modal-footer">
  56.                 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  57.                 <button type="button" class="btn btn-primary">保存</button>
  58.             </div>
  59.         </div><!-- /.modal-content -->
  60.     </div><!-- /.modal-dialog -->
  61. </div><!-- /.modal -->

ajax显示部门信息

  1.     /*点击新增按钮弹出模态框*/
  2.     $("#emp_add_modal_btn").click(function () {
  3.         /*发送AJAX请求查出部门信息，显示在下拉列表*/
  4.         getDepts();
  5.         /*弹出模态框*/
  6.         $("#empAddModal").modal({
  7.             backdrop:"static"
  8.         });
  9.     });
  11.     /* 查出所有的部门信息显示在下拉列表中*/
  12.     function getDepts() {
  14.         /*清空下拉框*/
  15.         $("#dept_add_select").empty();
  17.         $.ajax({
  18.             url:"${PATH}/depts",
  19.             type:"get",
  20.             success:function (result) {
  21.                 /*{"code":100,"msg":"处理成功",
  22.                 "extend":{"depts":[{"deptId":1,"deptName":"开发部"},{"deptId":2,"deptName":"测试部"}]}}*/
  23.                 // console.log(result);
  24.                 /*显示部门信息在下拉列表中*/
  25.                 // $("#empAddModal select").append("")
  26.                 $.each(result.extend.depts,function (index,item) {
  27.                     var option = $("<option></option>").append(this.deptName).attr("value",this.deptId);
  28.                     option.appendTo("#empAddModal select");
  29.                 });
  30.             }
  31.         });
  32.     }

保存操作

  1.  /*点击保存，保存员工*/
  2.     $("#emp_save_btn").click(function () {
  3.         /*1.模态框中填写的数据提交给服务器进行保存*/
  4.             /*先对要提交给服务器的数据进行校验*/
  5.             if(!validite_add_form()){
  6.                 return false;
  7.             }
  8.         /*2.发送ajax请求保存emp*/
  10.         $.ajax({
  11.             url:"${PATH}/emp",
  12.             type:"post",
  13.             data: $("#empAddModal form").serialize(),
  14.             success:function (result) {
  15.                 // alert(result.msg);
  16.                 /*员工保存成功*/
  17.                 /*关闭模态框*/
  18.                 $("#empAddModal").modal("hide");
  19.                 /*来到最后一页，显示保存的数据*/
  20.                 /*发送ajax请求显示最后一页数据*/
  21.                 toPage(totalRecord);
  22.             }
  23.         });
  24.     });

校验表单数据

  1.    /*校验表单数据*/
  2.     function validite_add_form(){
  3.         /*1.获取需要校验的数据，使用正则表达式*/
  4.         var empName = $("#empName_add_input").val();
  5.         var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
  6.         if(!regName.test(empName)){
  7.             // alert("用户名可以是2-5位中文或者6-16英文和数字组合");
  8.             /*清空这个元素之前的样式*/
  9.             show_validate_msg("#empName_add_input","error","用户名可以是2-5位中文或者6-16英文和数字组合");
  10.             return false;
  11.         }else{
  12.             show_validate_msg("#empName_add_input","success","");
  13.         }
  15.         /*2.校验邮箱信息*/
  16.         var email = $("#email_add_input").val();
  17.         var rgxEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
  18.         if(!rgxEmail.test(email)){
  19.             // alert("邮箱格式不正确");
  20.             // $("#email_add_input").parent().addClass("has-error");
  21.             // $("#email_add_input").next("span").text("邮箱格式不正确");
  22.             show_validate_msg("#email_add_input","error","邮箱格式不正确");
  23.             return false;
  24.         }else{
  25.             // $("#email_add_input").parent().addClass("has-success");
  26.             // $("#email_add_input").next("span").text("");
  27.             show_validate_msg("#email_add_input","success","");
  28.         }
  30.         return true;
  32.     }

文本框下的消息提示

  1.     function show_validate_msg(ele,status,msg){
  2.         /*清楚当前元素的样式*/
  3.         $(ele).parent().removeClass("has-success has-error");
  4.         $(ele).next("span").text("");
  5.         if(status == "success"){
  6.             $(ele).parent().addClass("has-success");
  7.             $(ele).next("span").text(msg);
  8.         }else if("error" == status){
  9.             $(ele).parent().addClass("has-error");
  10.             $(ele).next("span").text(msg);
  11.         }
  12.     }

校验用户名是否可用

  1.     /*校验用户名是否可用*/
  2.     $("#empName_add_input").change(function () {
  3.         /*发送 ajax 请求校验用户名是否可用*/
  4.         var empName = this.value;
  5.         $.ajax({
  6.             url:"${PATH}/checkUser",
  7.             data:"empName="+empName,
  8.             type:"post",
  9.             success:function (result) {
  10.                 if(result.code==100){
  11.                     show_validate_msg("#empName_add_input","success","用户名可用")
  12.                 }else{
  13.                     show_validate_msg("#empName_add_input","error","用户名不可用")
  14.                 }
  15.             }
  16.         });
  18.     });