Este artículo recomienda un bootstrapvalidator.js hecho de Twitter. Bootstrap está hecho desde Twitter, por lo que usar el validador original es más confiable. Habrá muchos modelos para buscar bootstrapvalidator en Baidu, pero solo recomiendo este:
1. Echa un vistazo
Para una presentació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 presente los siguientes tres archivos en su proyecto.
<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"> </script>3. El nombre del miembro no es la configuración del proyecto vacía
<form de acción = "$ {ctx}/login" método = "post" onSubMit = "return ValidateCallback (this)"> <div> <iv> <label> cuenta </etiqueta> <input type = "text" autofocus name = "username" placeholder = "Por favor, ingrese el número de miembro" autocompleto = "off"-bv-notempty/> </div> <div> </div> </formuldata-bv-notempty significa que el número de miembro debe usarse como una verificación vacía.
Se requiere el DIV del grupo de formulario, de lo contrario se informará el error de "demasiada recursión".
Al enviar el formulario del formulario, se ejecutará el método ValidateCallback. Este método se introduce específicamente en el paso 5.
4. Habilitar el validador de bootstrap después de que se carga la página
$ (function () {// Validate Form $ ("Form.Required-Validate"). Cada (function () {var $ form = $ (this); $ form.bootstraPValidator (); // Se corrige el validador de bootstrap repetidamente que presenta el error al servidor $ form.on ('strace.form.bv', function (e) {// preven form de mudanza E.Preventent ();); });Agregue el atributo 'class = "requerido-validato"' 'en el formulario del formulario y luego obtenga el formulario correspondiente a través de jQuery y realice la carga predeterminada de bootstraPvalidator.
Asegúrese de prestar atención a parte del código comentado en el código anterior. Para obtener más detalles, consulte lo siguiente para solucionar los errores enviados por BootstraPvalidator repetidamente. El contenido específico es el siguiente
Bootstrapvalidator es muy hermoso, pero a menudo hay intentos asesinos escondidos bajo tu hermosa cara. Es por eso que hay errores de envío repetidos .
Solución:
// Validar forme $ ("form.required-validate", $ p) .each (function () {var $ form = $ (this); $ form.bootstraPValidator (). on ('éxito.bv.bv', function (e) {// evita que el evento predeterminado cometiera e.preventDefault ();});});Establezca el método ON para BootstraPvalidator, cuya clave es Success.Form.bv y el valor es E.PreventDefault ();.
Investigación de errores:
Resultados de la encuesta:
1. Cuando no use BootstraPvalidator, no habrá ningún problema como se muestra en la figura.
2. Solo cuando haga clic en la primera vez, el envío se repetirá dos veces. Luego, después de volver a entrar en el nombre de usuario, lo enviará en una sola vez.
El error ocurre el entorno:
Copie el código de la siguiente manera: <Form Action = "$ {CTX}/MEM/LOGIN? CallBackType = Forward" Method = "Post" OnsubMit = "Devuelve ValidateCallback (this, TabajaxDone)" type = "Login">
...
<button type = "enviar"> enviar </botón>
</form>
describir:
Este es un formulario ordinario, con la dirección de solicitud en la acción, y hay un método OnSubmit en el formulario, que es principalmente para verificar el formulario, luego enviar la solicitud y finalmente devolver el método Tabajaxdone.
Análisis de errores:
1. Definitivamente no hay problema con el formulario de formulario. Si no hay validar bootstrap, no hay ningún problema.
2. No hubo ningún problema al usar jQuery Validate antes.
3. Entonces el problema solo puede ocurrir en Bootstrap Validate.
4. No hay problema con el uso predeterminado de Bootstrap Validate, porque solo se repetirá cuando el primer clic envíe.
5. Entonces esto puede ser que Bootstrap Validate tiene la solicitud de envío predeterminada.
Si observa nuevamente el objeto Validate, puede ver que hay muchos eventos por defecto, entre los cuales Formsuccess es el más sospechoso, lo que significa que puede activar la solicitud de envío nuevamente.
Depuración de errores:
// Validar forme $ ("form.required-validate", $ p) .each (function () {var $ form = $ (this); $ form.bootstraPValidator (); // .on ('succes.form.bv', function (e) {// // evita el evento predeterminado de la presentación // e.preventDefault (); //});});1. Cuando la página se carga por primera vez, BootstraPvalidator debe cargarse en el método anterior antes de que se pueda realizar la verificación de datos front-end.
2. Has visto el código comentado, tal vez puedas adivinarlo, y esa es la solución. Así es, agregue este procesamiento de eventos para formar y use E.PreventDefault (); Para evitar el envío de evento predeterminado.
5. Verifique el elemento al enviar el formulario
función ValidateCallback (formulario, devolución de llamada, confirmsg) {yunm.debug ("Ingrese en el formulario Validación y envío"); var $ form = $ (forma); var data = $ form.data ('bootstraPvalidator'); if (data) {// componentes que reparan memoria no verifican data.validate (); if (! data.isValid ()) {return false; }} $ .AJAX ({type: form.method || 'post', url: $ form.attr ("acción"), data: $ form.SerializearRay (), DataType: "Json", Cache: False, Success: Callback || Yunm.AJaxDone, Error: Yunm.AJaxerror}); devolver falso;}Después de obtener el formulario de formulario en ValidateCallback, el formulario se puede devolver a través del método ISVALID para verificar si pasa.
Después de aprobar la verificación del formulario, envíe el formulario al servidor a través de AJAX.
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.