JqueryValidate 動態添加驗證

  1. 在 JavaScript Function 中動態添加驗證
/**
  * 設置隱藏域 限制前兩位數字
  */
function setProductNo() {
    var $value = $("#product option:selected").attr("preNo");
    $value = $value ? $value : "";
    $("#preNo").val($value);
    $("#labelProduct").html("軟件號前兩位:" + $value);

    jQuery.validator.addMethod("checkPreNo",function(value,element,params) {
        // 未設定產品值,直接跳過驗證
        if (!$value) {
            return true;
        }

        if (value.length > 2) {
            if ($value == value.substring(0, 2)) {
                return true;
            }
        } else {
            if ($value == value) {
                return true;
            }
        }
        return false;
    },$.validator.format("<span style='color:red'>軟件號前兩位必須是"+ $value +" </span>"));
}

頁面上的 html 片段如下

<select name="product" id="product" onchange="setProductNo();">
  <option value="">請選擇</option>
</select>
<label for="product" id="labelProduct"></label>
  1. 在 Ajax 回調中直接加入驗證,用普通的 rules 可能加載不上驗證,需要使用 setTimeout 延遲加載
$.ajax({
        url: "getJsonCustomerUpgradeProduct.do",
        cache:false,
        type: "post",
        async: false,
        dataType: "json",
        data: param,
        success: function(data){
            console.log(JSON.stringify(data))
            if (data.success=='true') {
                var items = data.items;
                var content = "<option value=\"\">請選擇</option>";
                for (var i = 0;items && i < items.length; i++) {
                    var item = items[i];
                    content += "<option id='"+ item.id +"' >" + item.name + "</option>"
                }
                $("#" + param.htmlId).html(content);
                $("#" + param.htmlId).select2();

                if (data.showUpgradePruduct) {
                    $("#"+param.rowId).show();
                    setTimeout(function() {
                        $("#upgradeProduct").rules("add", {required: true});
                    }, 0);
                    $("#"+param.showStopAccount).hide();
                } else {
                    $("#"+param.rowId).hide();
                    setTimeout(function() {
                        $("#upgradeProduct").rules("remove", "required");
                    }, 0);
                }
            }
        }
    })
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 工廠模式類似于現實生活中的工廠可以產生大量相似的商品,去做同樣的事情,實現同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 7,842評論 2 17
  • 前端開發面試知識點大綱: HTML&CSS: 對Web標準的理解、瀏覽器內核差異、兼容性、hack、CSS基本功:...
    秀才JaneBook閱讀 2,562評論 0 25
  • 最近在閱讀這本Nicholas C.Zakas(javascript高級程序設計作者)寫的最佳實踐、性能優化類的書...
    undefinedR閱讀 2,173評論 0 30
  • 她只是沉睡一會兒,待到春江水暖,在來百花爭艷。
    慎思篤行月閱讀 822評論 0 1
  • 。。啦啦啦啦 我是賣報的小行家
    jaskz閱讀 146評論 0 0