Недавно есть много использования начальной загрузки. Просматривая документ Bootstrap, я обнаружил, что плагин Popover особенно подходит для подсказок для ошибок проверки формы.
Поскольку это производится очень часто, он был недавно запечатан и превращается в плагин jQuery. Через этот плагин просто определите Data-vaild = «Правила проверки» data-errmsg = «Сообщение об ошибке» в теге HTML. Зачем нам нужно писать правила проверки в тег HTML? Поскольку я также использовал его для проверки фона (фон не использует узел, я использую ASP Now, и я опубликую специальную статью, чтобы записать принципы после того, как закончу свою работу).
<input id = "u_exam_idnumber" name = "u_exam_idnumber" Placeholder = "Пожалуйста, введите номер входного билета для вступительного экзамена в средней школе" Data-vaild = "^/d {5,20} $"Окончательный эффект заключается в следующем:
Код плагина заключается в следующем:
«Используйте строго»;/*jQuery+Форма проверки начальной загрузки по miaoqiyuan.cn http://www.miaoqiyuan.cn/products/vaild/jquery.vaild.js*/(function(jquery)? Regexp ($ (_ this) .data ("vaild")); if (pattern.test ($ (_ this) .val ()) {$ (_ this) .parent (). removeClass ("has-error"). addClass ("has-success"); $ (_ this) .popover ("Drest");} else {$ (_ this) .parent (). addClass ("has-error"). «TOP»). DATA («размещение», «top»). DATA («контейнер», «body»). Data («Контент», $ (_ This) .data ("errmsg")). Popover ({"Trigger": "Руководство"}). Popover ("show"); return false;} else {$ (_ this) True;}}); $. fn.extend ({vaild: function () {$ (this). checkResult;} return checkResult;}); for (var i = 0; i <_this.length; i ++) {$ (_ this [i]). blur (function () {$. vaild (this);});}});}});}) (jquery);Это очень просто позвонить, просто используйте следующий код:
<Script> $ ("form"). vaild (); </script>Когда форма теряет фокус, если она не является законной, ошибка будет непосредственно вызвана. При нажатии на отправку, если есть незаконная форма формы, форма будет предотвращена продолжение отправки.
Фон по умолчанию Попора белый и не может служить предупреждением. Более того, настройка прокладки слишком велика и занимает слишком много места. Наконец, отрегулируйте CSS для достижения эффекта скриншотов.
/*Refactor Popover*/. Popover {founal:#C00; Color: #fff;}. Popover .popover-content {Padding: 1px 5px;}. Popover.top>. Выберите {founal-color:#f2dede;}. Ввод HAS-SUCCESS, .HAS-SUCCESS TEXTAREA, .HAS-SUCCESS SELECT {FOOLANE-Color:#DFF0D8}Выше приведено плагин Bootstrap Popover, представленный вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!