表单校验方法

注：自定义表单校验方式，适用于多模块集联切换相关等复杂场景。

1.html 示例

 　　　　　　　　　　　　<div class="jui-form-item J_commodityLabels" data-labels="$!commodity.commodityLabelIds">
                        <label class="jui-input-label"><span class="jui-label-required">标签</span></label>
                        <div class="jui-input-text">
                            <div class="label-group J_labelGroup" data-category="$!categoryItem.categoryId">
                                <span>
                                    #foreach($!labelItem in $!frontCategory.commodityLabels)
                                    <label><input type="checkbox"  value="$!labelItem.labelId" data-name="$!item.name"><span>$!labelItem.name</span></label>
                                    #end
                                </span>
                            </div>
                        </div>
                        <input type="hidden" name="labelIds" class="J_labelIds judge-item" value=""/>
                        <div class="jui-form-tip" data-tip="" data-tipNull="未选择标签"></div>
                    </div>
　　　　　　　　　　　　<div class="jui-form-item J_appArea">
                        <label class="jui-input-label"><span class="jui-label-required">选择应用</span></label>
                        <div class="select-area jui-input-text fn-clear">
                            <select name="appId" id="J_appList" data-value="$!commodity.appId" class="select-md judge-item">
                                <option value="">- 请选择 -</option>
                                #foreach($!isvAppInfo in $!isvAppInfos)
                                <option value="$!isvAppInfo.appId">$!isvAppInfo.appName</option>
                                #end
                            </select>
                        </div>
                        <div class="jui-form-tip" data-tip="创建成功后不能修改" data-tipNull="未选择应用">创建成功后不能修改</div>
                    </div>
　　　　　　　　　　　　<div class="jui-form-item ">
                        <label class="jui-input-label"><span class="jui-label-required">副标题</span></label>
                        <textarea name="subtitle" class="jui-input judge-item blur-item" maxlength="100" placeholder="请输入副标题"  >#SHTML($!commodity.subtitle)</textarea>
                        <div class="jui-form-tip" data-tip="请说明该的功能和价值，不超过10个字" data-tipNull="未填写副标题">请说明该的功能和价值，不超过10个字</div>
                    </div>

2.js示例

 judgeControl:{
        init:function(){
            this.judgeInputText();
        },

        //标签校验
        judgeLabel: function(){
            var lableIds=[];
            $(".J_labelGroup input").each(function(i,ele){
                if($(ele).prop("checked")){
                    lableIds.push($(ele).val());
                }
            });
            if(lableIds.length > 0){
                $(".J_labelIds").val(lableIds);
            }

        },

        //所有可输入项校验
        judgeInputText:function(){
            var _this=this;
            $(".blur-item").blur(function(){
                 _this.judgeItem( $(this) );
            });
            //清掉错误
            $(".blur-item").on("focus",function(){
                Page.hideError($(this));
            });
            //标签勾选去错误提示
            $(".J_labelGroup label").on("click",function(){
                $(".J_labelIds").closest(".jui-form-item").removeClass("jui-form-item-error").find(".jui-form-tip").html("");
            });

        },
        //集中校验全部可提交项
        judgeAll:function(){
            var _this=this;
          this.judgeLabel();
          $(".judge-item").each(function(){
              _this.judgeItem( $(this) );
          })
        },
        clearJudgeFlg:function(object){
            for(var i in object){
                object[i].removeClass("jui-form-item-error");
            }
        },
        judgeItem:function(object){
            var val=object.val(),
                error="jui-form-item-error",
                errorTip=object.closest(".jui-form-item").find(".jui-form-tip"),
                nullFalseStr=errorTip.attr("data-tipNull")||"该内容未填写",
                falseStr=errorTip.attr("data-tipError")||"该内容填写格式错误，请重填",//请按格式输入正确的内容,价格范围在10.00-99999.99之间,最多保留两位小数
                trueStr=(errorTip.attr("data-tip")?errorTip.attr("data-tip"):"");
            if(object.is("div")){
                return false;
                //某些控件会获取原html的全部样式
            }

            if(val.trim() === "" ){
                //return false;
                object.closest(".jui-form-item").addClass(error);
                errorTip.html(nullFalseStr);

            }else{
                var regstr=object.data("reg");
                if(regstr){
                    //存在特殊规则校验
                    var reg=new RegExp(regstr);

                    if( reg.test(val ) ){
                        object.closest(".jui-form-item").removeClass(error);
                        errorTip.html(trueStr);

                    }else{

                        object.closest(".jui-form-item").addClass(error);
                        errorTip.html(falseStr);

                    }
                    //交易加上固价格加上范围
                    var priceRange = $("input[name='sellingPrice']").val();
                    if(priceRange < 10 || priceRange > 99999.99){
                        object.closest(".jui-form-item").addClass(error);
                        errorTip.html(falseStr);
                    }
                }else{
                    object.closest(".jui-form-item").removeClass(error);
                    errorTip.html(trueStr);
                }
            }
        }

    },    

 emoji 校验规则

/ud83c[udc00-udfff]|ud83d[udc00-udfff]|[u2600-u27ff]/g