jQuery.validate 表单动态验证

本文介绍如何使用jQuery.validate插件进行动态表单验证,包括动态添加表单元素及验证规则,确保每次添加新行时都能实时更新验证逻辑。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

实际上jQuery.validate提供了动态校验的方法。而动态拼JSON串的方式是不支持动态校验的。牺牲jQuery.validate的性能优化可以实现(jQuery.validate的性能优化见图1.2 jQuery.validate源码)。
也可以选择使用jQuery.validate提供的动态校验方法。

图1.1 需要校验的HTML页面
js文件内容如下:
var oTab = document.getElementById('addAppDetailTab');
//获取表格的行数
var id = oTab != null ? oTab.tBodies[0].rows.length : 0;
$(function() {
//点击添加,为表格追加一行
    $('#addAppDetailBtn').click(function () {
        var oTr = document.createElement('tr');
        var oTd = document.createElement('td');
        oTd.appendChild(oTr);
        oTab.appendChild(oTr);
        createTD(oTab);
    });
});
//为表格追加一行的方法
function createTD(oTab) {
    //var id = $('#addAppDetailTab').attr('tabTrIndex');
    //id = id ? id : 1;
    $('#addAppDetailTab').attr('tabTrIndex', id);
    var oTr = document.createElement('tr');
    var oTd = document.createElement('td');
    oTd.innerHTML = '<div class="td validation-box"><input class="form-control" style="width:70px" value="" id="appDetailVOList[' + id + '].version" name="appDetailVOList[' + id + '].version"></div>';
    oTr.appendChild(oTd);
     
    var oTd = document.createElement('td');
    oTd.innerHTML = '<div class="td validation-box"><input class="form-control" style="width:120px" onclick="WdatePicker({skin:\'mag\',dateFmt:\'yyyy-MM-dd HH:mm:ss\'})" value="" id="appDetailVOList[' + id + '].updateTime" name="appDetailVOList[' + id + '].updateTime"></div>';
    oTr.appendChild(oTd);
     
    var oTd = document.createElement('td');
    oTd.innerHTML = '<div class="td validation-box"><input class="form-control wdate" style="width:50px" value="" name="appDetailVOList[' + id + '].appSize"><span>MB</span></div>';
    oTr.appendChild(oTd);
     
    var oTd = document.createElement('td');
    //添加beetl表达式
    var copy = $('#platformListDiv').clone();
    copy.find(".select-text").attr("id""appDetailVOList[" + id + "].platform");
    copy.find(".select-text").attr("name""appDetailVOList[" + id + "].platform");
     
    copy.appendTo(oTd);
    oTr.appendChild(oTd);
     
    var oTd = document.createElement('td');
    oTd.innerHTML = '<div class="td validation-box"><input class="form-control" style="width:200px" value="" name="appDetailVOList[' + id + '].url"></div>';
    oTr.appendChild(oTd);
     
     
    var oTd = document.createElement('td');
    oTd.innerHTML = '<div class="td"><a href="javascript:;" id="deleteAppVersion_' + id + '" name="deleteAppVersion_' + id + '">删除</a></div>';
    oTr.appendChild(oTd);
     
    oTd.getElementsByTagName('a')[0].onclick = function() {
        var appNum = oTab != null ? oTab.tBodies[0].rows.length : 0;
        var id = $(this).attr('id');
        var trIndex = id.substring(id.indexOf('_') + 1, id.length);
        $('#addAppDetailTab').attr('tabTrIndex', trIndex);
        if (appNum >= 2) {
            oTab.tBodies[0].removeChild(this.parentNode.parentNode.parentNode);
        else {
            $(this).parent().addClass('validation-box');
            $(this).after(getValidShowErrorHtml("必须填写一行APP版本信息", $(this).attr('name')));
        }
        $('#addAppDetailBtn').show();
    }
    oTab.tBodies[0].appendChild(oTr);
    id ++;
}
 
//保存表单信息的方法
function save() {
    doAppValidate('app_submit_form');
  var flag = $("#app_submit_form").valid(); 
  if(!flag){
        return;
  }
 var dataArray = formArrayUtil($("#app_submit_form").serializeArray())[0];
 console.log(dataArray);
}
 
 
/**
 * 校验  
 * @param formid
 */
/**
 * desc:特殊字符验证
 */
jQuery.validator.addMethod("specialCharValidate"function(value, element, param) {
    var pattern = new RegExp("[`~!@%#$^&*()=|{}':;', \\[\\]<>/? \\.;:%……+¥()【】‘”“'。,、?]"); 
    return this.optional(element)||!pattern.test(value) ; 
}, "请不要输入特殊字符");
 
jQuery.validator.addMethod("positiveNumValidate"function(value, element, param) {
    var strRegex = "^[0-9]+(.[0-9]{2}|.[0-9])?$";
    var pattern = new RegExp(strRegex);
    if (value != "") {
        if (!pattern.test(value)) {
            return false;
        }
    }
    return true;
}, "请输入正数(小数或整数)");
 
 
var rules4Volidate = {
    name : {
        required : true,
        maxlength : 24
    },
    icon : {
        required : true,
        maxlength : 100
    },
    desc : {
        required : true,
        maxlength : 100
    },
    author : {
        required : true,
        maxlength : 24
    },
    email : {
        required : true,
        email : true
    },
    webUrl : {
        maxlength : 100,
        url : true
    },
    reqdata : {
        required : true
    },
    jcaptchaCode : {
        required : true
    }
};
 
var messages4Volidate = {
    name : {
        required : "请输入应用名称",
        maxlength : "名称长度不能超过24个字符"
    },
    icon : {
        required : "请选择应用图标",
    },
    desc : {
        required : "请输入应用描述",
        maxlength : "应用描述不能超过100个字符"
    },
    author : {
        required : "请填写开发者"
    },
    email: {
        required : "请填写开发者邮箱",
        email : "请输入正确的email地址"
    },
    webUrl : {
        maxlength : "下载链接不能超过100个字符",
        url : "请输入合法的URL"
    },
    reqdata : {
        required : "请填写所用数据"
    },
    jcaptchaCode : {
        required : "请填写验证码"
    }
};
 
//动态改变rules4Volidate(JSON格式) 的值
function getRules(formid) {
    if ($("#" + formid).find("tr").length > 0) {
        // 开始逐行验证
        $("#" + formid).find("tr").each(
            function (index, tr) {
                $(this).find("input").each(function() {
                    var nameValue = $(this).attr('name');
                     
                    var idValue = this;
                    if (nameValue.indexOf("].version") != -1) {
                        rules4Volidate[nameValue] = {required : true, maxlength : 12, positiveNumValidate : true};
 
                        messages4Volidate[nameValue] = {required : "请正确填写APP版本", positiveNumValidate: "请输入正数(小数或整数)"};
                    else if (nameValue.indexOf("].updateTime") != -1) {
                        rules4Volidate[nameValue] = {required : true};
 
                        messages4Volidate[nameValue] = {required : "请正确填写APP版本"};
                    else if (nameValue.indexOf("].appSize") != -1) {
                        rules4Volidate[nameValue] = {required : true, maxlength : 6, positiveNumValidate: true};
 
                        messages4Volidate[nameValue] = {required : "请正确填写APP大小", maxlength : "APP大小长度不能超过6位", appSizeValidate: "请输入正数(小数或整数)"};
                    else if (nameValue.indexOf("].platform") != -1) {
                        rules4Volidate[nameValue] = {required : true};
 
                        messages4Volidate[nameValue] = {required : "请正确填写APP运行平台"};
                    else if (nameValue.indexOf("].url") != -1) {
                        rules4Volidate[nameValue] = {required : true, maxlength : 100, url : true};
 
                        messages4Volidate[nameValue] = {required : "请正确填写APP下载地址", maxlength : "APP下载地址长度不能超过6位", url : "请输入合法的URL地址"};
                    }
                });
            }
        );
    }
}
 
function doAppValidate(formid){
//获取当前rules4Volidate 的值
    getRules(formid);
/*删除jQuery.volidate上一次表单验证添加的validator数据,不删除的话第二次校验不生效。原因如下图代码*/
    $("#" + formid).removeData("validator");//这个是动态拼串的方式生效的关键
    $("#" + formid).validate({rules : rules4Volidate, messages: messages4Volidate, errorPlacement : validErrorFunction,
        success : validSuccessFunction});
}

图1.2 jQuery.validate源码
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值