表单验证：nice Validator

 

nice Validator使用文档：http://niceue.com/validator/

一、自定义验证规则：

//大类表单新增修改验证提交
          $("#addbigCategory").validator({
              theme :"simple_bottom",
              rules:{
                  coursecatename :[/^[wu4e00-u9fa5]+$/,'不能包含特殊字符'], //匹配中文、数字、字母、下划线
              },
              fields: {
                  coursecatename: "类别名称:required;length[1~50];coursecatename;"//,
                  //sortIndex:"序号:required;"
              },
                valid: function(form){
                var tname=$(".dialog_title").text();
                    if(tname.indexOf("修改")>=0){
                        //修改保存
                        SaveEditBigCourseCate();
                    }else{
                        //新增保存
                        SaveAddBigCourseCate();
                    }
                  
                 }
          });

 

　　　　　　//新增修改 验证提交
          $("#addCategory").validator({//form表单
              theme :"simple_bottom",
              rules:{
　　　　　　　　　　　//自定义验证规则
                  name :[/^[wu4e00-u9fa5]+$/,'不能包含特殊字符'], //匹配中文、数字、字母、下划线
                  sortIndexOnly:function(){}, //sortIndex去重检索
                  nameOnly:function(){},//name去重检索
              },
              message:{
                  required:"该项为必填项",
              },
              fields: {
                  name:"类别名称:required;length[1~50];name;",
              },
                valid: function(form){
                    var tname=$(".dialog_title").text();
                    if(tname.indexOf("修改")>=0){
                        SaveEditTeacherCate(); //修改保存
                    }else{
                        SaveAddTeacherCate(); //新增保存
                    }
                 }
          });

　　　　　<form id="addCategory">
            <div class="dialog_body">  
                <div class="formula_itemlist">
                    <ul class="itemwindow">
                        <!-- <li><span>序&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</span></li>  -->
                        <input type="hidden" id="teachersortindex" name="sortIndex" placeholder="请填数字"/>
                        <li><span>类别名称:</span>
                            <input type="text" id="teachercatename" name="name" placeholder="50字以内"/>
                        </li>
                        <input type="hidden" id="teachercateid" name="id" />
                    </ul>                
                    
                </div>
            </div>
            <div class="dialog_bottom">
                <button type="button" id="cancel">取消</button>
                <button type="submit">保存</button>
            </div>
        </form>

 

效果如图：

 

二、销毁验证信息：

      1、修改时，第一次输入错误信息，出现验证提示信息后，再输入正确信息，回车修改成功；

      2、然后在弹出修改窗口时，会显示验证错误提示信息，如下图所示：

　　

　　

      

 

解决这个BUG方法：在回车提交表单时，加入销毁验证信息事件：

JS代码：

 //新增课程大类弹窗
          $("#addbutton").on("click",function(obj){
                 $(".dialog_title").text("新增一级分类");
              addWin.showPopup();
          });
          //新增课程子类弹窗
          $("#rightaddbutton").on("click",function(obj){
              $(".dialog_title").text("新增二级分类");
              addSmallWin.showPopup();
                var pname = $("#parentId").val();
            if(pname!=""){
                $("#pname").val(pname); //父类
            }
           });
          
          //大类表单新增修改验证提交
          $("#addbigCategory").validator({
              theme :"simple_bottom",
              rules:{
                  coursecatename :[/^[wu4e00-u9fa5]+$/,'不能包含特殊字符'], //匹配中文、数字、字母、下划线
              },
              fields: {
                  coursecatename: "类别名称:required;length[1~50];coursecatename;"//,
                  //sortIndex:"序号:required;"
              },
                valid: function(form){
                    var tname=$(".dialog_title").text();
                    if(tname.indexOf("修改")>=0){
                        //修改保存
                        SaveEditBigCourseCate();
                    }else{
                        //新增保存
                        SaveAddBigCourseCate();
                    }
                 }
          });
         
          
          //小类表单新增修改验证提交
          $("#addsmallCategory").validator({
              theme :"simple_bottom",
                rules:{
                sonname :[/^[wu4e00-u9fa5]+$/,'不能包含特殊字符'], //匹配中文、数字、字母、下划线
            },
              fields: {
                  pname: "类别名称:required;",
                  //coursesortindex:"序号:required;",
                  sonname:"类别名称:required;length[1~50];sonname;"
              },
                valid: function(form){
                var tname=$(".dialog_title").text();
                    if(tname.indexOf("修改")>=0){
                        //修改保存
                        SaveEditSmallCourseCate();
                    }else{
                        //新增保存
                        SaveAddSmallCourseCate();
                    }
                 }
          });    

    //保存大类
    function SaveAddBigCourseCate(){
        var name = $.trim($("#coursecatename").val());
        var sortIndex=$("#sortIndex").val();
        var param={name:name,sortIndex:sortIndex};
        
          $.ajax({
              url:"${ctx}/td/courseType/checkCourseType.do",
            type:"get",
            data:param,
            success:function(data){
                if(data=="ok"){
                    $.ajax({
                         url:"${ctx}/td/courseType/insert.do",
                         type:"get",
                         data:param,
                         success:function(data){
                            if(data.result=="true"){
                                new AlertWin().initfn({
                                    "tipscon":data.resultDesc,
                                    "showtime":2000
                                });
                                 $("#addbigCategory")[0].reset();
                                 addWin.close();
                                 loadBigData();
                            }else{
                                new AlertWin().initfn({
                                    "tipscon":data.resultDesc,
                                    "showtime":2000
                                }); 
                            }
                        }
                      });
                }else{
                    addWin.close();
                    new AlertWin().initfn({
                        "tipscon":'新增失败，该课程类别已存在！',
                        "showtime":2000
                    });
                }
            }
        });
        //销毁验证信息，防止回车提交后，再次弹出时出现验证提示信息
        $("#addbigCategory").validator("destroy");
    }
    
    //保存小类
    function SaveAddSmallCourseCate(){
        var sortIndex=$("#coursesortindex").val();
        var pid= $("#pname").val();
        var sonname = $.trim($("#sonname").val());
        console.log();
        var param={sortIndex:sortIndex,parentId:pid,name:sonname};
        
          $.ajax({
              url:"${ctx}/td/courseType/checkCourseType.do",
            type:"get",
            data:param,
            success:function(data){
                if(data=="ok"){
                    $.ajax({
                         url:"${ctx}/td/courseType/insert.do",
                        type:"get",
                        data:param,
                        success:function(data){
                            if(data.result=="true"){
                                new AlertWin().initfn({
                                    "tipscon":data.resultDesc,
                                    "showtime":2000
                                });
                                $("#addsmallCategory")[0].reset();
                                addSmallWin.close();
                                loadSmallData();
                            }else{
                                new AlertWin().initfn({
                                    "tipscon":data.resultDesc,
                                    "showtime":2000
                                }); 
                            }
                        }
                     });
                }else{
                    addSmallWin.close();
                    new AlertWin().initfn({
                        "tipscon":'新增失败，该课程类别已存在！',
                        "showtime":2000
                    });
                }
            }
        });
        //销毁验证信息，防止回车提交后，再次弹出时出现验证提示信息
        $("#addsmallCategory").validator("destroy"); 
    }

HTML代码：

<!--新增课程大类-->
    <div class="dialog_coursecategory" id="addDialog" style=" 350px;">
        <div class="dialog_title" data-operateType="add">新增一级分类</div>
        <form id="addbigCategory">
            <div class="dialog_body" style="height:100px;">  
                <div class="formula_itemlist">
                    <ul class="itemli">
                        <!-- <li><span>序&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</span></li> -->
                        <input type="hidden" id="sortIndex" name="sortIndex" placeholder="请填数字"/>
                        <li><span>类别名称:</span><input type="text" id="coursecatename" data-id="id" name="coursecatename" placeholder="50字以内"/></li>
                        <input type="hidden" id="coursecatecorpId" name="corpId" />
                    </ul>                
                </div>
            </div>
            <div class="dialog_bottom">
                <button type="button" id="cancel1">取消</button>
                <button type="submit">保存</button>
            </div>
        </form>
    </div>
    
    <!--新增课程子类 -->
    <div class="dialog_coursecategory" id="addsmallDialog" style=" 350px;">
        <div class="dialog_title" data-operateType="add">新增二级分类</div>
        <form id="addsmallCategory">
            <div class="dialog_body">  
                <div class="formula_itemlist">
                    <ul class="itemli">
                        <!-- <li><span>序&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</span> -->
                        <input type="hidden" id="coursesortindex" name="coursesortindex" placeholder="请填数字"/></li>
                        <li><span>父类名称:</span><select id="pname"  name="pname" placeholder="1~100字以内"/></select></li>
                        <li><span>类别名称:</span><input type="text" id="sonname" data-id="id" name="sonname" placeholder="50字以内"/></li>
                        <input type="hidden" id="soncorpId" name="corpId" />
                    </ul>                
                </div>
            </div>
            <div class="dialog_bottom">
                <button type="button" id="cancel2">取消</button>
                <button type="submit">保存</button>
            </div>
        </form>
    </div>

 二、解决新增、修改弹窗时，验证不通过，第一次提交失败，第二次提交却可以（在弹出提示信息后面加 return;）

//新增修改 验证提交
          function createBig(){
              $("#formId").validator({
                    theme :"simple_bottom",
                    rules:{
                      name :[/^[wu4e00-u9fa5]+$/,'不能包含特殊字符'], //匹配中文、数字、字母、下划线
                      sortIndexOnly:function(){}, //sortIndex去重检索
                      nameOnly:function(){},//name去重检索
                  },
                  fields: {
                      name:"姓名:required;length[1~30];name;",
                      title:"等级:length[0~30];name;",
                      phone:"电话:required;mobile;",
                      email:"邮箱:length[0~50];email;",
                      proField:"length[0~200];",
                      intro:"length[0~200];"
                  },
                      valid: function(form){
                          var tname = $(".dialog_title").text();
                          var headImg = $("#head_img").attr("data-img");
                      if(headImg=="head_default.jpg"){
                          headImg=null;
                      }
                      
                          if(tname.indexOf("修改")>=0){
                             //修改保存
                               var labels = "";
                            var index = 0;
                            $(".labels").find("li").each(function(){
                                if(index==0){
                                    labels += "'" + $(this).attr("data-id") + "'";
                                }else{
                                    labels += ",'"+$(this).attr("data-id") + "'";
                                }
                                index++;
                            });
                            
                            var param={id:$("#id").val(),headImg:headImg,name:$.trim($("#name").val()),title:$.trim($("#title").val()),phone:$.trim($("#phone").val()),email:$.trim($("#email").val()),proField:$.trim($("#proField").val()),trainerTypeId:$("#trainerTypeId_add").val(),intro:$.trim($("#intro").val()),labels:labels };   
                              var param_a = {name:$.trim($("#name").val()),phone:$.trim($("#phone").val()),id:$("#id").val() }; 
                              $.ajax({
                                  url:"${ctx}/td/trainer/checkTrainer.do",
                                type:"get",
                                cache:false,
                                data:param_a,
                                success:function(data){
                                    if(data=="ok"){
                                        $.ajax({
                                                url:"${ctx}/td/trainer/modify.do",
                                              type:"get",
                                              data:param,
                                              success:function(data){
                                                  if(data.result=="true"){
                                                       new AlertWin().initfn({
                                                           "tipscon":data.resultDesc,
                                                           "showtime":2000
                                                       });
                                                       $("#formId")[0].reset();
                                                       addWin.close();
                                                   }else{
                                                       new AlertWin().initfn({
                                                           "tipscon":data.resultDesc,
                                                           "showtime":2000
                                                       }); 
                                                       return; //防止提交一次失败，二次提交却可以
                                                   }
                                                  $("#searchbtn").trigger("click");
                                                  getLabels();
                                              }
                                          });
                                    }else{
                                        new AlertWin().initfn({
                                             "tipscon":'修改失败，该讲师已存在！',
                                             "showtime":2000
                                         });
                                        return; //防止提交一次失败，二次提交却可以
                                    }
                                    
                                    //销毁验证信息，防止回车提交后，再次弹出时出现验证提示信息
                                      $("#formId").validator("destroy");
                                }
                          });
                            
                         }else{
                             //新增
                               var labels = "";
                            var index = 0;
                            $(".labels").find("li").each(function(){
                                if(index==0){
                                    labels += "'" + $(this).attr("data-id") + "'";
                                }else{
                                    labels += ",'"+$(this).attr("data-id") + "'";
                                }
                                index++;
                            });
                            
                              var param={headImg:headImg,name:$.trim($("#name").val()),title:$.trim($("#title").val()),phone:$.trim($("#phone").val()),email:$.trim($("#email").val()),proField:$.trim($("#proField").val()),trainerTypeId:$("#trainerTypeId_add").val(),intro:$.trim($("#intro").val()),labels:labels }; 
                            
                             var param_a = {name:$.trim($("#name").val()),phone:$.trim($("#phone").val()) }; 
                              $.ajax({
                                  url:"${ctx}/td/trainer/checkTrainer.do",
                                type:"get",
                                cache:false,
                                data:param_a,
                                success:function(data){
                                    if(data=="ok"){
                                        $.ajax({
                                                url:"${ctx}/td/trainer/insert.do",
                                              type:"get",
                                                 cache:false,
                                              data:param,
                                              success:function(data){
                                                  if(data.result=="true"){
                                                      new AlertWin().initfn({
                                                           "tipscon":data.resultDesc,
                                                           "showtime":2000
                                                       });
                                                       $("#formId")[0].reset();
                                                       addWin.close();
                                                   }else{
                                                       new AlertWin().initfn({
                                                           "tipscon":data.resultDesc,
                                                           "showtime":2000
                                                       }); 
                                                       return; //防止提交一次失败，二次提交却可以
                                                   }
                                                  $("#searchbtn").trigger("click"); 
                                                  getLabels();
                                              }
                                          });
                                    }else{
                                        new AlertWin().initfn({
                                             "tipscon":'新增失败，该讲师已存在！',
                                             "showtime":2000
                                         }); 
                                        return; //防止提交一次失败，二次提交却可以
                                    }
                                    
                                    //销毁验证信息，防止回车提交后，再次弹出时出现验证提示信息
                                      $("#formId").validator("destroy");
                                }
                          });
                              
                         }
                          
                       }
                });
          }
          
          
          //弹出新增窗口
          function addTeacher() {
              
              var html=" <i class='iconfont closeWin' id='close_add'>&#xe629;</i>";
            $("#addDialog").find(".dialog_title").attr("data-operateType","add").html("新增").append(html);
            
            $("#addtag-cancel").trigger("click"); //恢复未点击状态
              //头像
            $("#head_img").attr("src","${ctx}/static/images/common/head_default.jpg");
            $("#head_img").attr("data-img","head_default.jpg");
            $("#labels li").remove();//清空标签
            $("#trainerTypeId_add option:selected").attr("selected",false);//清空下拉框选中项
            
            addWin.showPopup();
            $("#close_add").on("click",function(){
                $("#formId")[0].reset();
                addWin.close();
            });
            
            createBig(); //初始化验证信息
            
            upLoadPic();
          }
          
        //弹出修改窗口
          function editTeacher() {
              var selectObj = table.selectedRowsIndex();                
            var selectItem = table.row(selectObj[0]);
            
            if(selectObj.length==0){
                new AlertWin().initfn({
                    "tipscon":"请先选择数据！",
                    "showtime":2000
                });
            }else if(selectObj.length>1){
                new AlertWin().initfn({
                    "tipscon":"只能选择一条数据进行修改！",
                    "showtime":2000
                });
            }else if(selectObj.length==1){
                  $("#formId").fill(selectItem);
                  var html=" <i class='iconfont'id='close_edit'>&#xe629;</i>";
                $("#addDialog").find(".dialog_title").attr("data-operateType","add").html("修改").append(html);
                
                $("#addtag-cancel").trigger("click"); //恢复未点击状态
                
                $("#id").val(selectItem.id);
                $("#name").val(selectItem.name);
                $("#title").val(selectItem.title);
                $("#recommend").val(selectItem.recommend);
                
                if(selectItem.trainerTypeId!=""){
                    $("#trainerTypeId_add").find("option[value="+selectItem.trainerTypeId+"]").attr("selected",true);
                }
                $("#phone").val(selectItem.phone);
                $("#email").val(selectItem.email);
                $("#proField").val(selectItem.proField);
                $("#intro").val(selectItem.intro);
                //头像
                if(selectItem.headImg!=""){
                    $("#head_img").attr("src","${ctx}/upload/trainer_picture/"+selectItem.headImg);
                    $("#head_img").attr("data-img",selectItem.headImg);
                }else{
                    $("#head_img").attr("src","${ctx}/static/images/common/head_default.jpg");
                    $("#head_img").attr("data-img","head_default.jpg");
                }
                
                //标签
                var trainerLabels = selectItem.labels;
                $("#tagName").val("");
                $("#labels li").remove();//清空标签
                
                if(trainerLabels!=null){
                    $.ajax({
                        url:"${ctx}/td/trainer/queryLabelListByIds.do",
                        type:"get",
                        cache:false,
                        data:{trainerLabels : trainerLabels },
                        success:function(data){
                            var bean=data.beans;
                            var html="";
                            if(bean.length!=0){
                                  for(var i=0;i<bean.length;i++){
                                      var data=bean[i];
                                      $(".labels").append("<li class='signli' data-id='"+data.id+"' data-trainerLabel='"+data.trainerLabel+"'><span>"+data.trainerLabel+"</span><i class='iconfont' onclick='delLable(this)'>&#xe629;</i></li>");
                                  }
                            }
                        }
                    });
                    
                }
                
                addWin.showPopup();
                  $("#close_edit").on("click",function(){
                    $("#formId")[0].reset();
                    addWin.close();
                });
                  
                  createBig(); //初始化验证信息
                  
                  upLoadPic();
            }
          }