JqueryValidate 动态添加验证

简介: 在 JavaScript Function 中动态添加验证/** * 设置隐藏域 限制前两位数字 */function setProductNo() { var $value = $("#product option:selected").
  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);
                }
            }
        }
    })
目录
相关文章
|
4月前
|
JavaScript 前端开发 安全
使用jQuery Validate进行表单验证
使用jQuery Validate进行表单验证
|
1月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery Validate
jQuery Validate
52 4
|
5月前
|
JavaScript 前端开发 开发者
使用jQuery Validate进行表单验证详解
使用jQuery Validate进行表单验证详解
|
4月前
|
JavaScript 前端开发 CDN
使用jQuery Validate进行表单验证详解
使用jQuery Validate进行表单验证详解
|
JavaScript 前端开发
Form表单利用Jquery Validate验证以及ajax提交
Form表单利用Jquery Validate验证以及ajax提交
85 0
|
JavaScript 前端开发
将jquery validate校验框架的remote异步验证设置为同步校验
将jquery validate校验框架的remote异步验证设置为同步校验
343 0
将jquery validate校验框架的remote异步验证设置为同步校验
|
JavaScript
关于JQuery validate表单校验插件对级联下拉框的校验问题
关于JQuery validate表单校验插件对级联下拉框的校验问题
248 0
关于JQuery validate表单校验插件对级联下拉框的校验问题
|
JavaScript 数据安全/隐私保护
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
123 0
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
|
JavaScript 前端开发
jquery validate初上手
jquery validate初上手
132 0
jquery validate初上手
|
JavaScript 前端开发
jQuery validate之remote
jQuery validate之remote
245 0