表单验证:nice Validator

时间:2015-03-26 19:50:58   收藏:0   阅读:322

 

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>

 

效果如图:

技术分享

 

二、销毁验证信息:

      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 :[/^[\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>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

原文:http://www.cnblogs.com/mingyue1818/p/4369210.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!