В этой статье рекомендуется Bootstrapvalidator.js, сделанный из Twitter. Bootstrap сделан из Twitter, поэтому использование оригинального валидатора является более заслуживающим доверия. На Baidu будет много моделей для поиска Bootstrapvalidator, но я только рекомендую это:
1. Посмотрите
Для простого введения здесь только пустая проверка.
Bootstrapvalidator официальный адрес загрузки
2. Ссылка на ресурсы
После загрузки пакета ресурсов вы можете увидеть следующий каталог.
Затем введите следующие три файла в ваш проект.
<link type = "text/css" rel = "styleSheet" href = "$ {ctx} /components/validate/css/bootstrapvalidator.css"/> <script type = "text/javascript" src = "$ {ctx} /components/validate/js/bootstrapvalidator.js"> </script> <script type = "text/javascript" src = "$ {ctx} /components/validate/js/language/zh_cn.js">3. Имя участника не является пустой конфигурацией проекта
<form action = "$ {ctx}/login" method = "post" onsubmit = "return validatecallback (this)"> <div> <div> <babel> account </label> <input type = "text" autofocus name = "username" Placeholder = "Пожалуйста, введите номер члена" AutoComplete = "OFF" DIV-NOTEMPEEMP/> <//> </divty-notemper/> <//> <//> </divty-notemper/> <//> </divty-notemper/> <//> </divty-notemper.Data-BV-Notempty означает, что номер элемента должен использоваться в качестве пустой проверки.
Div of Form Group требуется, в противном случае сообщается об ошибке «слишком много рекурсии».
При отправке формы будет выполнен метод ValidateCallback. Этот метод специально введен на шаге 5.
4. Включить валидатор начальной загрузки после загрузки страницы
$ (function () {// validate form $ ("form.required-validate"). Каждый (function () {var $ form = $ (this); $ form.bootstrapvalidator (); // Исправить валидатор Bootstrap многократно подчиняет ошибку на сервер $ form.on ('success.form.bv', function (e) { / / предотвращает ошибку form emisse e.frevent;); });Добавьте атрибут 'class = "обязательный валидат" в форме формы, а затем получите соответствующую форму формы через jQuery, и выполните загрузку загрузки по умолчанию.
Обязательно обратите внимание на некоторые кода, прокомментированные в приведенном выше коде. Для получения подробной информации, пожалуйста, обратитесь к следующему, чтобы неоднократно исправить ошибки, представленные Bootstrapvalidator. Конкретный контент заключается в следующем
Bootstrapvalidator очень красивый, но под вашим прекрасным лицом часто есть убийственные намерения. Вот почему есть повторные ошибки подчинения .
Решение:
// проверка формы $ ("form.Required-validate", $ p) .irecal (function () {var $ form = $ (this); $ form.bootstrapvalidator (). On ('success.form.bv', function (e) {// предотвратить событие по умолчанию от совершения e.preventdefault ();});});Установите метод ON для Bootstrapvalidator, ключом которой является успех. Формирование. И значение e.preventDefault ();.
Расследование ошибок:
Результаты опроса:
1. Когда вы не используете Bootstrapvalidator, не будет проблем, как показано на рисунке.
2. Только когда вы нажимаете на первый раз, представление будет повторена дважды. Затем, после повторного входа в имя пользователя, вы отправите его за одно время.
Ошибка происходит в среде:
Скопируйте код следующим образом: <form action = "$ {ctx}/mem/login? Callbacktype = forward" method = "post" onsubmit = "return validatecallback (это, tabajaxdone)" type = "login">
...
<button type = "Отправить"> Отправить </button>
</form>
описывать:
Это обычная форма формы, с адресом запроса в действии, и в форме есть метод Onsubmit, который в основном предназначен для проверки формы, затем отправьте запрос и, наконец, вызовет метод TabaJaxDone.
Анализ ошибок:
1. Определенно не проблема с формой. Если нет никакой проверки начальной загрузки, нет никаких проблем.
2. Не было никаких проблем при использовании jQuery Validate ранее.
3. Тогда проблема может произойти только на начальной загрузке.
4. Нет проблем с использованием по умолчанию проверки начальной загрузки, потому что он будет повторяться только при первом щелчке.
5. Тогда это может быть тем, что Bootstrap Validate имеет запрос по умолчанию.
Если вы снова посмотрите на объект Validate, вы увидите, что по умолчанию есть много событий, среди которых FormUccess является наиболее подозрительным, что означает, что он может снова запустить запрос на отправку.
Отладка ошибок:
// проверка формы $ ("form.required-validate", $ p) .ireck (function () {var $ form = $ (this); $ form.bootstrapvalidator (); // .on ('success.form.bv', function (e) {// // Предотвращение представления события по умолчанию // e.preventDef (); //});1. Когда страница загружается в первый раз, Bootstrapvalidator должен быть загружен в приведенном выше методе, прежде чем можно будет выполнить проверку данных передней части.
2. Вы видели закомментированный код, возможно, вы можете догадаться, и это решение. Правильно, добавьте эту обработку события, чтобы сформировать и использовать e.preventdefault (); Чтобы предотвратить представление события по умолчанию.
5. Проверьте элемент при отправке формы
function validateCallback (форма, обратный вызов, подтверждениемсг) {yunm.debug («Включите в валидацию и подчинение формы»); var $ form = $ (form); var Data = $ form.data ('bootstrapvalidator'); if (data) {// Компоненты, которые восстанавливают память, не проверяют data.validate (); if (! data.isvalid ()) {return false; }} $. вернуть false;}После получения формы в ValidateCallback форма может быть возвращена через метод Isvalid, чтобы проверить, пройдет ли она.
После того, как проверка формы передается, отправьте форму на сервер через Ajax.
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.