Recentemente, existem muitos usos Bootstrap. Navegando pelo documento de bootstrap, descobri que o plug-in do Popover é particularmente adequado para instruções para erros de verificação de formulários.
Como é feito com muita frequência, foi recentemente selado e transformado em um plug-in jQuery. Através deste plug-in, basta definir o data-vaild = "verificando regras" data-errmsg = "mensagem de erro" na tag html. Por que precisamos escrever regras de verificação na tag HTML? Como também o usei para verificar o plano de fundo (o plano de fundo não usa o nó, estou usando o ASP agora e publicarei um artigo especial para anotar os princípios depois de terminar meu trabalho).
<input id = "u_exam_idnumber" name = "u_exam_idnumber" espaço de espaço (por favor, insira o número do ingresso de admissão para o exame de entrada da escola secundária "Data-vaild ="^/d {5,20} $ "data-errmsg =" O número da ingresso é incorreto e pode conter apenas números "O efeito final é o seguinte:
O código do plug -in é o seguinte:
"use strict";/*jQuery+Bootstrap verification form by Miaoqiyuan.cn principle: http://www.miaoqiyuan.cn/p/jquery-bootstrap-vaild demonstration: http://www.miaoqiyuan.cn/products/vaild/index.html Source code: http://www.miaoqiyuan.cn/products/vaild/jquery.vaild.js*/(function tiver Regexp ($ (_ this) .data ("Vaild")); if (padrony.test ($ (_ this) .val ()) ) {$ (_ this) .parent (). removeclass ("has-error"). addclass ("has-success"); $ (_ this) .popover ("destruir");} else {$ (_ this) .parent (). addclass ("has-error"). "top"). Dados ("posicionamento", "top"). Dados ("contêiner", "corpo"). Dados ("conteúdo", $ (_ this) .Data ("errmsg"). true;}}); $. checkResult;} retornar checkResult;}); para (var i = 0; i <_this.length; i ++) {$ (_ this [i]). Blur (function () {$.É muito simples de chamar, basta usar o seguinte código:
<Cript> $ ("formulário"). Vaild (); </sCript>Quando o formulário perde o foco, se não for legal, um erro será solicitado diretamente. Ao clicar em enviar, se houver um item de formulário ilegal, o formulário será impedido de continuar a enviar.
O fundo padrão do popover é branco e não pode servir como um aviso. Além disso, a configuração de preenchimento é muito grande e ocupa muito espaço. Finalmente, ajuste o CSS para alcançar o efeito das capturas de tela.
/*Refatorar popover*/. Popover {Background:#c00; cor: #fff;}. Popover .popover-content {preenchimento: 1px 5px;}. Popover.top> .arrow: After {Border-top-color:#c00;}/*refator bootstrap defensor defensor*/. Selecione {Background-Color:#f2dede;}. Entrada de sucesso, .has-success textarea, .has-success Select {Background-Color:#dff0d8}O acima é o plug-in de inicialização de bootstrap introduzido pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!