vue 结合bootstrapValidator动态验证(包含动态数组)

本文介绍如何在Vue项目中结合bootstrapValidator实现动态验证,包括一般元素的验证和动态数组元素的验证。通过设置反馈图标,展示校验状态。在处理动态数组时,注意key的设置以避免渲染问题,并绑定unique的name属性以确保校验正确。同时,展示了新增、删除元素及保存操作的处理方式。这是一个Java开发者兼职前端工作时的开发记录。
摘要由CSDN通过智能技术生成

这里写自定义目录标题


vue mounted方法中 声明 form1为form元素id,fields中为需校验元素name属性及校验方法,在页面ajax请求前调用

		var bootstrapValidator1 = $("#form1").data('bootstrapValidator');
        bootstrapValidator1.validate();
       
        if(!bootstrapValidator1.isValid()){
            alert('请完善输入项');
            return;
        }

可实现一般元素检验,feedbackIcons 设置校验码不通过X号、校验通过√号的显示效果
在这里插入图片描述

mounted:function(){
    $("#form1").bootstrapValidator({
        message:'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields:{
            sendIp:{
                validators:{
                    notEmpty:{
                        message:'不能为空'
                    },
                    regexp: 
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值