Este artículo recomienda un BootstrapValidator creado por Twitter. Bootstrap en sí está hecho por Twitter, por lo que es más confiable usar el validador original. Busque BootstrapValidator de Baidu, habrá muchos modelos, pero solo recomiendo este (de repente siento una pequeña sensación de "biblioteca [Steve Curry] soplando").
Recomendación de tutorial relacionado: "tutorial de arranque"
### 1. Un vistazo rápido
Para una introducción simple, aquí hay solo un cheque vacío.
Dirección de descarga oficial de BootstrapValidator
### 2. Referencia de recursos Después de
descargar el paquete de recursos, puede ver el siguiente directorio.
Luego, importe los siguientes tres archivos a su proyecto.
1
2
3
### 三. El nombre del miembro no está vacío. Configuración del proyecto
1
2
3
4
5
6
7
8
9
Cuenta
<input class = "form-control" type = "text" autofocus = "" name = "username" placeholder = "Ingrese el número de membresía" autocomplete = "off"
data-bv-notempty />
data-bv-notempty significa que el número de membresía debe marcarse como vacío.
Se requiere la p de form-group; de lo contrario, se informará del error "demasiada recursividad".
El método validateCallback se ejecutará cuando se envíe el formulario. Este método se introduce específicamente en el quinto paso.
### Cuatro. Después de que se cargue la página, habilite el validador de arranque
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$ (function () { // validar formulario $ ("formulario.required-validate") .each (function () { var $ form = $ (this); $ form.bootstrapValidator (); // Corregir el validador de arranque para enviar errores repetidamente al servidor $ form.on ('success.form.bv', function (e) { / / Evitar el envío de formularios
e.preventDefault ();
});
});
}); Agregue el atributo
' class = "required-validate"' al formulario del formulario, y luego obtenga el formulario correspondiente a través de jquery, y cárguelo con el bootstrapValidator predeterminado.
Asegúrese de prestar atención a la parte comentada del código anterior. Para obtener más detalles, consulte Solucionar los errores repetidos enviados por BootstrapValidator.
### 五. Elementos de validación cuando se envía el formulario
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function validateCallback (form, callback, confirmMsg) { YUNM. debug ("Ingrese a la validación y envío del formulario");
var $ formulario = $ (formulario);
var datos = $ formulario.data ('bootstrapValidator');
if (datos) { // Reparar los componentes de la memoria no validan data.validate (); if (! data.isValid ()) { return false; } } $ .ajax ({ type: form.method || 'POST', url: $ form.attr ("action"), data: $ form.serializeArray (), dataType: "json", cache : falso, éxito: devolución de llamada || YUNM.ajaxDone, error: YUNM.ajaxError}); return falso;} Después de obtener el formulario en validateCallback, el método isValid puede devolver si la verificación del formulario pasó. Una vez validado el formulario, el formulario se envía al servidor a través de ajax.