美文网首页
JqueryValidate 动态添加验证

JqueryValidate 动态添加验证

作者: 赛亚人之神 | 来源:发表于2017-10-25 13:31 被阅读4次
    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);
                    }
                }
            }
        })
    

    相关文章

      网友评论

          本文标题:JqueryValidate 动态添加验证

          本文链接:https://www.haomeiwen.com/subject/jejqpxtx.html