当前位置: 首页 > 工具软件 > validator.js > 使用案例 >

html使用bootstrapValidator.js报错

云何平
2023-12-01

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)

 类似资料: