Эта статья представит вас, как судить пример кодекса проверки формы. Прежде чем представить основной текст, я познакомлю вас с плагином.
Введение плагина
Сначала сделаем снимок:
Адрес загрузки: https://github.com/nghuuphuoc/bootstrapvalidator
Советы по использованию
Китайская культура:
После загрузки плагина, введите /дж/bootstrapvalidator/language/zh_cn.js в файл, то есть реализовать китайскую культуру
Форма проверки перед отправкой:
Более богатый пример проверки формы: http://www.jq22.com/yanshi522, напрямую загрузить код:
<! Doctype html> <html> <head> <title> Demo </title> </till> <link rel = "href =" поставщик/начальная загрузка/css/bootstrap.css "/> <link rel =" styleshept "href =" dist/csss/bootstrapvalidator.cesss "/ontawawshavalator. CSS, если вы хотите использовать значки обратной связи, предоставленные Fontawesome-> <!-<link rel = "styleSheet" href = "http://netdna.bootstrapcdn.com/font-awesome/../css/font-awesome.css"/>-> <script type = "javascript" src = "vendor/jquery/jquery -... min.js"> </script> <script type = "text/javascript" src = "Vendor/bootstrap/js/bootstrap.min.js"> </script> <script type = "text/javascript" src = "dist/js/bootstrapvalidator.js"> </script> </head> <body> <div> <div> <!-Форма:-> <section> <div> <div> <h> Зарегистрируйтесь </h> </div> <form id = "default forcom name = "FirstName" Placeholder = "Имя"/> </div> <div> <input type = "text" name = "lastname" Placeholder = "Фамилия"/> </div> </div> <div> <babel> username </label> <div> <input type = "text" name = "username"/> </div> </div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> type = "text" name = "email"/> </div> </div> <div> <babel> пароль </label> <div> <input type = "password" name = "password"/> </div> </div> <div> <babel> pressword </label> <div> <input = "Пароль" = " /></div></div><div><label>Gender</label><div><label><input type="radio" name="gender" value="male" /> Male</label></div><div><label><input type="radio" name="gender" value="female" /> Female</label></div><div><label><input type="radio" name="gender" value = "sother"/> Другое </label> </div> </div> <div> <babel> день рождения </label> <div> <input type = "text" name = "День рождения"/> (yyy/mm/dd) </div> </div> <div> <babel> langues </label> <div> <babel> <input = "name" name = "/value" vally "/" "/"/" Английский </label> </div> <babel> <input type = "fackbox" name = "languages []" value = "french"/> french </label> </div> <div> <babel> <input type = "fackbox" name = "languages []" value = "nember"/> nember </label> </div> <div> <pabel> <input type = "name" label> </div> <div> <pabel> <input type = "name" lackage> "label>" Российский </label> </div> <div> <babel> <input type = "fackbox" name = "languages []" value = "fore"/> Другое </label> </div> </div> <div> <babel> Языки программирования </label> <div> <div> <babel> <spint type = "chackbox" = "name =" value = "net"/net "/net"/net "/> net"/> net "/> net"/> net "/> net"/> net "/> net"/> net "/> net". .Net</label></div><div><label><input type="checkbox" name="programs[]" value="java" /> Java</label></div><div><label><input type="checkbox" name="programs[]" value="c" /> C/C++</label></div><div><label><input type="checkbox" name="programs[]" value="php" /> PHP</label></div><div><label><input type="checkbox" name="programs[]" value="perl" /> Perl</label></div><div><label><input type="checkbox" name="programs[]" value="ruby" /> Ruby</label></div><div><label><input type = "fackbox" name = "programs []" value = "python"/> python </label> </div> <div> <label> <input type = "fackbox" name = "programs []" value = "python"/> python </label> </div> <div> <label> <input type = "checkbox" name = "[]" value = "value ="/value = "jovaScript =" value = "joVas ="/"jovas =" "value ="/"joVas ="/"" jovas = "/" "value ="/"jovas ="/"" Javascript </label> </div> </div> <div> <label id = "captchoperation"> </label> <div> <input type = "text" name = "captcha"/> </div> </div> <div> <div> <button type = "Отправить" name = vallup = "подписать up up"> warm up up </butut 2 "> Зарегистрируйтесь 2 </button> <button Type =" button "id =" validateBtn "> Ручное подтверждение </button> <button Type =" button "id =" ResetBtn "> Form> </button> </div> </form> </div> </section> <!-: form-> </div> </div> <script =" " Простой капхафункциональный случайный (min, max) {return math.floor (math.random () * (max - min + 1) + min);}; $ ('#captchoperation'). html ([Randomnumber (1, 100), ' +', Randomnumber (1, 200), '=']. ')); $ ('#defaultform '). Bootstrapvalidator ({// live: «Отключено», сообщение: «Это значение недопустимо», отзывы: {allod:' glyphicon glyphicon-ok ', Invalid:' glyphicon Glyphicon-Remove ', Validating:' glyphicon Glyphon-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re-re. {FirstName: {validators: {notempty: {message: 'первое имя требуется и не может быть пустым'}}}}, lastname: {validators: {notempty: {message: 'Требуется фамилия и не может быть пусто и не может быть пустым '}, stringlength: {min: 6, max: 30, сообщение: «Имя пользователя должно быть более 6 и меньше 30 символов в длину'}, regexp: {regexp: /^ba-za-z0-9_/.cy+/, message: 'username может состоять только из Alphatication, number, dot и ulderscore, remore-lepement, remorecore, remorecore, remorecore, remoercore, remorecore, orementcore,' 'remote.php', сообщение: «Имя пользователя недоступно '}, разные: {Поле:« Пароль », сообщение:« Имя пользователя и пароль не могут быть такими же, как друг друга'}}}, электронная почта: {validators: {emailaddress: {valdation: {notempement respalls: {notemp: {notemp: {notemp: {notemp: {notemp: {notemp: {notemp: notemp: {notemp: {notemp: {notempemp: {notempemp: {notempemp: {notemp: {notemb empty '}, идентично: {field:' sonformpassword ', сообщение: «Пароль и его подтверждение не одинаковы'}, разные: {Поле:« Имя пользователя », Сообщение:« Пароль не может быть таким же, как имени пользователя »}}}}, подтверждение wardpass: {valdators: {notempty: {Сообщение: и его подтверждение не одно и то же «}, другое: {Field: 'username', сообщение:« Пароль не может быть таким же, как имен пользователя '}}}, день рождения: {validators: {date: {format:' yyyy/mm/dd ', сообщение:' День рождения не действителен '}}}, гендер: {valdators: notempty: {notempty: {notempty: {notEmpt Обязательно '}}},' languages [] ': {validators: {notempty: {сообщение:' Пожалуйста, укажите хотя бы один язык, на котором вы можете говорить '}}},' программы [] ': {validators: {Выбор: {min: 2, max: 4, Сообщение:' Пожалуйста, выберите 2 - языки программирования. {Сообщение: «Неправильный ответ», обратный вызов: function (значение, валидатор) {var elects = $ ('#captchoperation'). html (). split ('' '), sum = parseint (items []) + parseint (элементы []); return value == sum;}}}}}}}); // // clack wardate ()}}}}}}}}}}}}}}}}}}}} {$ ('#defaultform'). Bootstrapvalidator ('validate');}); $ ('#resetbtn'). Click (fundation () {$ ('#defaultform'). Data ('bootstrapvalidator'). resetform (true);});}); </script> </body> </html>Посмотрите на 331 строки, нажмите «Отправить», используйте
$ ('#defaultform'). bootstrapvalidator ('validate');Проверка формы триггера
Вот ловушка, с которой я столкнулся:
Логика по умолчанию Bootstrapvalidator состоит в том, чтобы выключить кнопку серого цвета, когда проверка формы не удается.
Однако в проекте кнопка не находится внутри формы и отправляется Ajax через привязку событий. Тогда вопрос:
Проект не должен выполнять связанные последующие события, когда проверка формы не удается. Байду не мог найти соответствующую информацию в течение долгого времени, и, наконец, это зависит от Google:
$ ("#yourform"). Recod (function (ev) {ev.preventDefault ();}); $ ("#отправить"). On ("click", function () {var bootstrapvalidator = $ ("#yourform"). data ('bootstrapvalidator'); bootstrapvalidator.validate (); if (bootstrapvalidator.isvalid ()) $ ("#yourform"). upper (); else return;});Выше приведено соответствующее знание подключаемого модуля Form Provification Bootstrapvalidator в Bootstrap, представленном вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!