bootstrapValidator 表单验证_validators notempty stringlength-优快云博客

本文链接：https://blog.youkuaiyun.com/jacksosion/article/details/81776167

本文介绍了一个使用Bootstrap Validator插件进行表单验证的例子，包括对用户名、电话号码、电子邮件等字段的有效性验证，以及如何通过Ajax提交表单数据。

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

$(function () {
$('form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
linkman: {
message: '用户名验证失败',
validators: {
notEmpty: {
message: '不能为空'
},
}
},
tel: {
validators: {
notEmpty: {
message: '电话号码不能为空'
},
regexp: {
regexp: /^1\d{10}$/,
message: '手机号码不正确，请重新输入'
}
}
},
email: {
validators: {
notEmpty: {
message: '邮箱不能为空'
},

regexp: {
regexp: /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/,
message: 'Email格式不正确，例如yike@123.com'
}
}
},
talker_info: {
validators: {
notEmpty: {
message: '不能为空'
},
stringLength: {
   min: 0,
max: 300,
message: '0/300个字符'
}
}
},
summary: {
validators: {
notEmpty: {
message: '不能为空'
},
stringLength: {
   min: 0,
max: 300,
message: '0/300个字符'
}
}
},
field: {
validators: {
notEmpty: {
message: '不能为空'
},
stringLength: {
   min: 0,
max: 300,
message: '0/100个字符'
}
}
},
account: {
validators: {
notEmpty: {
message: '不能为空'
},
stringLength: {

}
}
},
theme: {
validators: {
notEmpty: {
message: '不能为空'
},
stringLength: {
   min: 0,
max: 50,
message: '0/50个字符'
}
}
},
act_time: {
validators: {
notEmpty: {
message: '不能为空'
}
}
},
address: {
validators: {
notEmpty: {
message: '不能为空'
}
}
},
title: {
validators: {
notEmpty: {
message: '不能为空'
}
}
},
}
})
function GetQueryString(name) {
       var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
       var r = window.location.search.substr(1).match(reg);
       if(r != null) return unescape(r[2]);
       return null;
   }
   // 调用方法
   var ssid = GetQueryString("ssid");

   $(".btn").click(function(){
       var flag = $('#defaultForm').data("bootstrapValidator").isValid();//校验合格
       if(flag){
           var $form = $('#defaultForm');
               $.ajax({
                   type:"post",
                   url:"https://dev-api.yiketalks.com/v4/talker/talkerApply",
                   data:$("#defaultForm").serialize(),
                   headers: {
                       "Accept": "text/plain; charset=utf-8",
       //               "Content-Type": "text/plain; charset=utf-8",
                       "ssid": ssid
                   },
                   async:true,
                   success: function (result) {
                       $(".concentBox").css("display","none");
                       $('.jsrz_main_check').css("display","block");