Este artículo le presentará cómo juzgar el código de ejemplo de verificación de formulario. Antes de presentar el texto principal, le presentaré el complemento.
Introducción al complemento
Tomemos una foto primero:
Descargar dirección: https://github.com/nghuuphuoc/bootstrapvalidator
Consejos de uso
Cultura china:
Después de descargar el complemento, introducir /js/bootstrapvalidator/language/zh_cn.js en el archivo, es decir, implementar la cultura china
Formulario de verificación antes de enviar:
Un ejemplo de verificación de formulario más rico: http://www.jq22.com/yanshi522, cargue directamente el código:
<! Doctype html> <html> <head> <title> bootstraPvalidator demo </title> <link rel = "Stylesheet" href = "vendor/bootstrap/css/bootstrap.css"/> <link rel = "stylesheet" href = "/csss/botstrapvalidator.css" El CSS FONTAWESED si desea usar iconos de retroalimentación proporcionados por FontaweSome-> <!-<Link rel = "Stylesheet" href = "http://netdna.bootstrapcdn.com/font-awesome/../css/font-awesat.css"/>-> <script type = "text/javascript" "" src = "Vendor/jQuery/jQuery -... Min.js"> </script> <script type = "text/javascript" src = "vendor/bootstrap/js/bootstrap.min.js"> </script> <script type = "text/javaScript" src = "dist/js/bootstraPvalidator.js"> </script> </head> <body> <div> <div> <!-form:-> <section> <div> <div> <h> registrar </h> </div> <form id = "defaultform" método = "post" action = "objetivo name="firstName" placeholder="First name" /></div><div><input type="text" name="lastName" placeholder="Last name" /></div></div><div><label>Username</label><div><input type="text" name="username" /></div></div><div><label>Email address</label><div><input type="text" name = "correo electrónico"/> </div> </div> <viv> <lelstelebel> contraseña </selebel> <viv> <input type = "contraseña" name = "contraseña"/> </div> </div> <div> <div> <label> reting Password </label> <viv> <puty type = "contraseña" name = "confirmarpassword"/> </div> </div> <div> <label> género </sel etiqueta <div 4 name = "género" valor = "masculino"/> macho </selebel> </div> <div> <label> <input type = "radio" name = "género" valor = "femenino"/> femenino </label> </div> <div> <label> name = "Birthday"/> (yyy/mm/dd) </div> </div> <div> <label> idiomas </label> <div> <label> <input type = "checkbox" name = "idiomas []" valor = "inglés"/> inglés </label> </div> <label> <input type = "checkbox" name = "idiomas []" value = "francés"/>>> French </label> </div> <viv> <label> <input type = "checkbox" name = "idiomas []" valor = "alemán"/> alemán </label> </div> <div> <label> <input type = "checkbox" name = "idiomas []" valor = "ruso"/> ruso </etiqueta> <1/div> <div> <label <label> <pely type = "checkbox" name = "name =" languiates [] "]" ") Otros </label> </div> </div> <div> <label> Lenguajes de programación </label> <div> <div> <label> <input type = "checkbox" name = "programas []" valor = "net"/> .net </label> </div> <div> <belebel> <put type = "checkbox" name = "programas []" value = "java"/> java </sel etiqueta </etiqueta> <belt -type = "checkBox" name = "programas []" value = "java"/> java </etiqueta </label> <belty <1 input/"Etiqueta" type = "checkBox" name = "programas []" value = "c"/> c/c ++ </selabel> </div> <div> <label> <input type = "checkbox" name = "programas []" valor = "php"/> php </labe> </div> <div> <label> <input type = "checkBox" name = "programas []" PERL "PERL"/> Perl </label> </div> <div> <label> <input type = "checkbox" name = "programas []" valor = "ruby"/> ruby </label> </div> <div> <label> <input type = "checkbox" name = "programas []" valor = "python"/> python </label> </div> <div> <label> <label> shapouty = "bandeero" name "name" value = "Python"/> Python </label> </div> <viv> <label> <input type = "checkbox" name = "programas []" value = "javascript"/> javascript </label> </div> </viv> <div> <lelge id = "capitchaperation"> </label> <div> <put type = "text" name = "Captcha" /> </div> </div> <div> <div> <button type = "enviar" name = "registrar" valor = "registrar"> registrar </botón> <botón type = "enviar" name = "registrar" value = "registrar 2"> registrar 2 </botón> <button type = "botón" iD = "valididebtn"> validato manual </botón> <button type = "button" button "Id" RESETBTN "RESETBTN" RESETBTN "RESETBTN" RESETBTN "RESETBT formulario </botón> </div> </form> </div> </sect> <!-: form-> </div> </div> <script type = "text/javascript"> $ (documento) .ader (function () {// Generar un captChafaFunction simple RandomNumber (min, max) {return Math.floor (Math.random () * (max-mín + 1) + 1) + 1) min);}; $ (''#captchaoperation '). html ([[randomNumber (1, 100),'+', randomNumber (1, 200),' = ']. Join (' '); $ ('#defaultForm '). BootstraPValidator ({// Live:' Desactivado ', Mensaje:' Este valor no es válido ', Toshingicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'},fields: {firstName: {validators: {notEmpty: {message: 'The first name is required and cannot be empty'}}}},lastName: {validators: {notEmpty: {message: 'The last Se requiere el nombre y no puede estar vacío '}}}}, nombre de usuario: {mensaje:' El nombre de usuario no es válido ', Validators: {noTempty: {Mensaje:' El nombre de usuario se requiere y no puede ser vacío '}, StringLength: {min: 6, max: 30, Mensaje:' El nombre de usuario debe ser más de 6 y menos de 30 caracteres de largo '}, regexp: {REGEXP: {REGEXP: {REGEXP: { /^ sor-Za-Z0-9_/.font>+$/,Message: 'El nombre de usuario solo puede consistir en alfabética, numero, dot y subscore'}, remoto: {url: 'remoto.php', mensaje: 'el nombre de usuario no está disponible'},}: {campo: 'contraseña', mensaje: 'El nombre de usuario y la contraseña no pueden ser lo mismo que el otro o menos'}}},},}: {campo: 'contraseña', mensaje: 'El nombre de usuario y la contraseña no pueden ser lo mismo que el mismo. {agealAddress: {Mensaje: 'La entrada no es una dirección de correo electrónico válida'}}}}, contraseña: {validadors: {noTempty: {Mensaje: 'La contraseña es necesaria y no puede estar vacía'}, idéntico: {campo: 'Confirmarpassword', Mensaje: 'La contraseña y su confirmación no es la misma'}, diferente: {campo: 'Username', Mensaje: 'La contraseña:' La contraseña no puede ser la contraseña no puede ser la misma. username'}}}},confirmPassword: {validators: {notEmpty: {message: 'The confirm password is required and cannot be empty'},identical: {field: 'password',message: 'The password and its confirm are not the same'},different: {field: 'username',message: 'The password cannot be the same as username'}}},birthday: {validators: {date: {formato: 'aaa yyy/mm/dd', mensaje: 'El cumpleaños no es válido'}}}, género: {validators: {noTempty: {mensaje: 'El género es requerido'}}}, 'idiomas []': {validators: {noTempty: {Message: 'Especifique al menos un idioma que puede hablar'}}}}, '': '': ':' {Choice: {Min: 2, max: 4, mensaje: 'Por favor, elija 2 - 4 lenguajes de programación en el que es bueno en'}}}, captcha: {validadors: {callback: {mensaje: 'respuesta incorrecta', callback: function (valor, validator) {var items = $ ('##CaptChaoperation'). parseInt (elementos []); value de retorno == suma;}}}}}}); // Valide el formulario manualmente $ ('#ValidateBtn'). Click (function () {$ ('#defaultform'). {$ ('#defaultForm'). data ('bootstraPValidator'). resetform (true);});}); </script> </body> </html>Mire 331 líneas, haga clic en enviar, usar
$ ('#defaultform'). bootstraPValidator ('validato');Verificación de forma de activación
Aquí hay una trampa que encontré:
La lógica predeterminada de BootstraPvalidator es girar el botón atenuado cuando la verificación del formulario falla.
Sin embargo, en el proyecto, el botón no está dentro del formulario y es enviado por AJAX a través de la vinculación del evento. Entonces la pregunta es:
El proyecto no debe ejecutar los eventos posteriores en el límite cuando falla la verificación del formulario. Baidu no pudo encontrar información relevante durante mucho tiempo, y finalmente depende de Google:
$ ("#YourForm"). Subt (function (Ev) {ev.PreventDefault ();}); $ ("#enviar"). on ("clic", function () {var bootstraPValidator = $ ("#YourForm"). Data ('bootstraPValidator'); bootstraPValidator.validate (); if (bootstraPValidator.isValid ()) $ ("#YourForm"). Subt (); Else return;});Lo anterior es el conocimiento relevante del complemento de verificación de formulario BootstraPvalidator en Bootstrap introducido 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!