html使用bootstrapValidator.js报错
云何平
1.按照网上找的都写上了
$("#email-form").bootstrapValidator({
live: 'disabled',//验证时机，enabled是内容有变化就验证(默认)，disabled和submitted是提交再验证
excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件，比如被禁用的或者被隐藏的
submitButtons: '#btn-test',//指定提交按钮，如果验证失败则变成disabled，但我没试成功，反而加了这句话非submit按钮也会提交到action指定页面
message: '通用的验证失败消息',//好像从来没出现过
feedbackIcons: {//根据验证结果显示的各种图标
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstname: {
message: '用户名验证失败',
validators: {
notEmpty: { //不能为空
message: 'First Name不能为空'
},
// remote: { //后台验证，比如查询用户名是否存在
// url: 'student/verifyUsername',
// message: '此用户名已存在'
// }
stringLength: {//检测长度
min: 6,
max: 30,
message: '长度必须在6-30之间'
},
regexp: {//正则验证
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '所输入的字符不符要求'
},
}
},
lastname: {
message: 'Last Name',
validators: {
notEmpty: { //不能为空
message: 'Last Name不能为空'
},
// remote: { //后台验证，比如查询用户名是否存在
// url: 'student/verifyUsername',
// message: '此用户名已存在'
// }
stringLength: {//检测长度
min: 6,
max: 30,
message: '长度必须在6-30之间'
},
regexp: {//正则验证
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '所输入的字符不符要求'
},
}
},
PhoneNumber: {
message: 'Phone Number',
validators: {
notEmpty: { //不能为空
message: 'Phone Number不能为空'
},
// remote: { //后台验证，比如查询用户名是否存在
// url: 'student/verifyUsername',
// message: '此用户名已存在'
// }
stringLength: {//检测长度
min: 11,
max: 11,
message: '请输入正确手机号码'
},
regexp: {//正则验证
regexp: /^1\d{10}$/,
message: '所输入的字符不符要求'
},
}
},
Email: {
message: 'Email验证失败',
validators: {
notEmpty: { //不能为空
message: 'Email不能为空'
},
emailAddress: { //验证email地址
message: '不是正确的Email地址'
},
}
},
CompanyName: {
message: 'Last Name',
validators: {
notEmpty: { //不能为空
message: 'Last Name不能为空'
},
// remote: { //后台验证，比如查询用户名是否存在
// url: 'student/verifyUsername',
// message: '此用户名已存在'
// }
stringLength: {//检测长度
min: 6,
max: 30,
message: '长度必须在6-30之间'
},
regexp: {//正则验证
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '所输入的字符不符要求'
},
}
},
Country: {
message: 'Country',
validators: {
notEmpty: { //不能为空
message: 'Country不能为空'
},
// remote: { //后台验证，比如查询用户名是否存在
// url: 'student/verifyUsername',
// message: '此用户名已存在'
// }
}
},
WebsiteURL: {
message: '请输入网址',
validators: {
notEmpty: { //不能为空
message: '链接地址不能为空'
},
// remote: { //后台验证，比如查询用户名是否存在
// url: 'student/verifyUsername',
// message: '此用户名已存在'
// }
regexp: {//正则验证
regexp:
/^((https?|ftp|news):\/\/)?([a-z]([a-z0-9\-]*[\.。])+([a-z]{2}|aero|arpa|biz|com|coop|edu|gov|info|int|jobs|mil|museum|name|nato|net|org|pro|travel)|(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))(\/[a-z0-9_\-\.~]+)*(\/([a-z0-9_\-\.]*)(\?[a-z0-9+_\-\.%=&]*)?)?(#[a-z][a-z0-9_]*)?$/,
message: '所输入的字符不符要求',
},
}
},
ContactReason: {
message: '请输入文本',
validators: {
notEmpty: { //不能为空
message: '不能为空'
},
// remote: { //后台验证，比如查询用户名是否存在
// url: 'student/verifyUsername',
// message: '此用户名已存在'
// }
stringLength: {//检测长度
min: 6,
max: 300,
message: '长度必须在6-300之间'
},
}
},
Help: {
message: '请输入问题',
validators: {
// remote: { //后台验证，比如查询用户名是否存在
// url: 'student/verifyUsername',
// message: '此用户名已存在'
// }
}
},
}
}); document.getElementById("btn-test").onsubmit=function (){
/*手动验证表单，当是普通按钮时。*/
$('#email-form').data('bootstrapValidator').validate();
if(!$('#email-form').data('bootstrapValidator').isValid()){
$(".w-form-fail").hide();
console.log('zzaa')
$(".w-form-done").show();
console.log('z试试zaa')
}
};html
<form id="email-form" name="email-form" method="get" >
<div class="section-7 wf-section input-group">
<label for="firstname" class="field-label form-label">First Name</label>
<input
type="text" class="fields w-input form-control" maxlength="256" name="firstname"
data-bv-field="firstname"
placeholder="" id="firstname"
data-bv-validator="dsfsd"
/>
</div>
<div class="section-7 wf-section input-group">
<label for="lastname" class="field-label">Last Name</label>
<input data-bv-field="lastname"
data-bv-validator="dsfsd"
type="text" class="fields w-input" maxlength="256" name="lastname"
placeholder="" id="lastname"
/>
</div>
<div class="section-8 wf-section">
<button id="btn-test" type="submit" value="Submit" data-wait="Please wait..."
class="submit-button w-button"
/>
</div>
</form>
<div class="success-message w-form-done" tabindex="-1" role="region"
aria-label="Email Form success">
<div>Thank you! Your submission has been received!</div>
</div>引用也是先jq - boostraps - bootstrapValidator.js 真的不知道为什么报这个错
bootstrapValidator.js:359 Uncaught TypeError: Cannot read properties of undefined (reading 'find')
at b.updateStatus (bootstrapValidator.js:359:31)
at b.validateField (bootstrapValidator.js:327:102)
at b.validate (bootstrapValidator.js:303:53)
at HTMLFormElement.<anonymous> (bootstrapValidator.js:60:39)
at HTMLFormElement.dispatch (jQuery3.6.1.js:2:43064)
at y.handle (jQuery3.6.1.js:2:41048)
类似资料：