Recientemente, hay muchos usos Bootstrap. Al navegar por el documento de arranque, descubrí que el complemento Popover es particularmente adecuado para las indicaciones para los errores de verificación de formulario.
Debido a que se hace con mucha frecuencia, se selló recientemente y se convirtió en un complemento jQuery. A través de este complemento, simplemente defina Data-Vaild = "Comprobaciones de reglas" data-ermmsg = "mensaje de error" en la etiqueta HTML. ¿Por qué necesitamos escribir reglas de verificación en la etiqueta HTML? Debido a que también lo usé para verificar el fondo (el fondo no usa el nodo, estoy usando ASP ahora, y publicaré un artículo especial para escribir los principios después de terminar mi trabajo).
<input id = "u_exam_idnumber" name = "u_exam_idnumber" positor de posición = "Ingrese el número de ticket de admisión para el examen de ingreso de la escuela secundaria" Data-Vaild = "^/D {5,20} $" Data-Errmsg = "El número de ticket de admisión es incorrecto, y solo puede contener números"El efecto final es el siguiente:
El código del complemento es el siguiente:
"Use estricto";/*jQuery+bootstrap Form de miaoqiyuan.cn Principio: http://www.miaoqiyuan.cn/p/jquery-bootstrap-vaild demostración: http://wwww.miaoqiyuan.cn/products/Vaild/index. http://www.miaoqiyuan.cn/products/Vaild/jquery.vaild.js*/(function(jquery){$.extend({Vaild: function (_this) {if (!! $ (_ this) .data ("Vaild") {Var Pattern = new Regexp ($ (_ esto) .data ("vaild")); if (patrón.test ($ (_ esto) .val ()) ) {$ (_ this) .Parent (). RemoveClass ("HaS-Serror"). AddClass ("HA-Success"); $ (_ esto) .Popover ("Destroy");} else {$ (_ this) .Parent (). AddClass ("Haserror"). RemoveClassSss (ha-Sucess "); $ (_ (_). "top"). data ("colocación", "top"). data ("contenedor", "cuerpo"). data ("content", $ (_ this) .data ("errmsg")). popover ({"disparador": "manual"}). popover ("show); return false;}} else {$ (_ this). verdadero;}}); $. fn.extend ({Vaild: function () {$ (this) .each (function (index, _this) {$ (_ this) .subMit (function () {var chechResult = true; for (var i = 0; i <_this.length; i ++) {chechResult = $ .vaild (_ _ _ _ _ _th) checkResult;} return checkResult;}); for (var i = 0; i <_this.length; i ++) {$ (_ this [i]). Blur (function () {$. Vaild (this);});}});}});}) (jQuery);Es muy simple de llamar, solo usa el siguiente código:
<Script> $ ("Forma"). Vaild (); </script>Cuando el formulario pierde el enfoque, si no es legal, se solicitará directamente un error. Al hacer clic en Enviar, si hay un elemento de formulario ilegal, el formulario se evitará que continúe enviando.
El fondo predeterminado de Popover es blanco y no puede servir como advertencia. Además, la configuración del relleno es demasiado grande y ocupa demasiado espacio. Finalmente, ajuste el CSS para lograr el efecto de las capturas de pantalla.
/*Refactor Popover*/. Popover {fondo:#c00; color: #fff;}. POPOVER .POPOVER-Content {Padding: 1px 5px;}. Popover.top> .arw: After {border-top-color:#c00;}/*refactor bootstap error predeterminado apot*/. Seleccione {Color de fondo:#F2Dede;}. Entrada de ha-exuces,.Lo anterior es el complemento Bootstrap Popover presentado por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!