纵有疾风起
人生不言弃
首页 > 博客 > 正文

表单验证：nice Validator

2020-11-23 分类：博客 阅读(158) 评论(0) 扫描二维码 隐藏侧边

 

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

一、自定义验证规则：

//大类表单新增修改验证提交
          $("#addbigCategory").validator({ theme :"simple_bottom", rules:{ coursecatename :[/^[\w\u4e00-\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 :[/^[\w\u4e00-\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>

 

效果如图：

表单验证：nice Validator插图

 

二、销毁验证信息：

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

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

　　

　　

       表单验证：nice Validator插图1

 

解决这个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 :[/^[\w\u4e00-\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 :[/^[\w\u4e00-\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="width: 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="width: 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 :[/^[\w\u4e00-\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' οnclick='delLable(this)'>&#xe629;</i></li>");
                                  }
                            }
                        }
                    });
                    
                }
                
                addWin.showPopup();
                  $("#close_edit").on("click",function(){
                    $("#formId")[0].reset();
                    addWin.close();
                });
                  
                  createBig(); //初始化验证信息
                  
                  upLoadPic();
            }
          }

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/mingyue1818/p/4369210.html

原文链接：https://blog.csdn.net/weixin_30342827/article/details/96513811

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

AD：【更多看点】学生“冒死”偷拍老师，当看到最后一个，网友：这谁能顶得住

 收藏 (0)
未经允许不得转载：起风网 » 表单验证：nice Validator
分享到： 生成海报

deee

相关推荐

评论 抢沙发

评论前必须登录！

立即登录