Este artigo apresentará como julgar o código de verificação do código de formulário. Antes de apresentar o texto principal, apresentarei o plug-in.
Introdução ao plug -in
Vamos tirar uma foto primeiro:
Endereço para download: https://github.com/nghuuphuoc/bootstrapValidator
Dicas de uso
Cultura chinesa:
Depois de baixar o plug-in, apresente /js/bootstrapvalidator/language/zh_cn.js no arquivo, ou seja, implemente a cultura chinesa
Formulário de verificação antes do envio:
Um exemplo de verificação de formulário mais rico: http://www.jq22.com/yanshi522, envie diretamente o código:
<!DOCTYPE html><html><head><title>BootstrapValidator demo</title><link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/><link rel="stylesheet" href="dist/css/bootstrapValidator.css"/><!-- Include the CSS Fontawesome Se você quiser usar ícones de feedback fornecidos por Fontawesome-> <!-<link rel = "Stylesheet" href = "http://netdna.bootstrapcdn.com/font-awesome/../css/font-ewert.css"/>-<script type = "" src = "Vendor/jQuery/jQuery -... min.js"> </script> <script type = "text/javascript" src = "vendor/bootstrap/js/bootstrap.minmin.js"> </cript> <script type = "text/javascript" src = "dist/js/bootstrapValidator.js"> </script> </head> <body> <div> <div> <!-form:-> <section> <div> <div> <h> Sinalizar </hivn </div </div> <formig od = "default" = "Post" Action = "Target.php"> Nome = "FirstName" PlanteHolder = "Primeiro nome"/> </div> <div> <input type = "text" name = "lastName" PaceHolder = "Sobrenome"/> </div> </div> <div> <belt> <eplupt> </DIVN> </DIVN> </DIVN> </LABEL> </LABEL> </Div) <sput Type = "Text" = "Username"/</> </> </> </Div </Div </Div </ type = "text" name = "email"/> </div> </div> <div> <brety> senha </crety> <div> <input type = "seveda" name = "senha"/> </div> </div> <div> <belt> retoppe a senha </celt> <div> <input type = "senha" = "confirmpasspord" /> </div> </div> <div> <brety> gênero </crety> <div> <belty> <input type = "radio" name = "gênero" value = "masculino"/> masculino </cret> </div> <div> <bel> value = "Outro"/> Outros </crety> </div> </div> <div> <brety> aniversário </crety> <div> <input type = "text" name = "anerthing"/> (yyy/mm/dd) </div> </div> <div> <div> <belages> linguagens </elatel> <div> <batel> <nput> "Languster" ") English</label></div><label><input type="checkbox" name="languages[]" value="french" /> French</label></div><div><label><input type="checkbox" name="languages[]" value="german" /> German</label></div><div><label><input type="checkbox" name="languages[]" value="russian" /> Russo </viel> </div> <div> <belt> <input type = "caixa de seleção" name = "linguagens []" value = "outro"/> outros </abely> </div> </div> <div> <belt> Linguagens de programação </celt> <div> <div> <bel> <bel type = "Checkbox Name =" Programas [] "" "" .NET </etiqueta> </div> <div> <belty> <input type = "caixa de seleção" name = "programs []" value = "java"/> java </label> </div> <div> <bretty> <input type = "CheckBox" name = "programs []" = "c"/> c/c++</"> <//" value = "php"/> php </elabel> </div> <div> <belt> <input type = "caixa de seleção" name = "programs []" "value =" perl "/> perl </etiqueta> </div> <div> <belt> <bel> </type type =" caixa de seleção "name =" programas "" = "ruby> </> </> </> </" name = "programas []" value = "python"/> python </elabel> </div> <div> <belt> <input type = "caixa de seleção" name = "programs []" value = "python"/> python </elabel> </div> <div> <bel> <but type = "check" name = "" programas [] " Javascript </elabel> </div> </div> <div> <gravador id = "captchaoperation"> </label> <div> <input type = "text" name = "captcha"/> </div> </div> <div> <div> <button type = "submit" name = "signop" = "Signp up"> sinping up <//"> </button typen =" submit "=" signop "=" up up "> 2 "> Inscreva-se 2 </button> <button type =" button "id =" validateBtn "> validate manual </button> <botão tipo =" button "id =" resetbtn "> redefinir formulário </button> </div> </script> </div> text/j/j) </j) <) <) <) (/divr> </script typen" (/j/j/j) </j) <) <) <) (/div> </script typet = ") </section> <!-: forma </divr> </script <. um simples captchafunction RandomNumber (min, max) {return Math.floor (Math.random () * (max - min + 1) + min);}; $ ('#captchaoperation'). html ([RandomNumber (1, 100), ' +', RandomNumber (1, 200), '=']. ')); $ ('#defaultForm '). bootstrapValidator ({// vive:' desativado ', mensagem:' Este valor não é válido ', feedbackicons: {válido:' glificon glyphicon-ok ', inválido:' glyphicon glyphicon-remove ', validante:' Glyficon » {validators: {notEmpty: {message: 'The first name is required and cannot be empty'}}}},lastName: {validators: {notEmpty: {message: 'The last name is required and cannot be empty'}}}},username: {message: 'The username is not valid',validators: {notEmpty: {message: 'The username is required and cannot be empty'},stringLength: {min: 6,max: 30,message: 'The username must be more than 6 and less than 30 characters long'},regexp: {regexp: /^[a-zA-Z0-9_/.]+$/,message: 'The username can only consist of alphabetical, number, dot and underscore'},remote: {url: 'Remote.php', Mensagem: 'O nome de usuário não está disponível'}, diferente: {field: 'senha', mensagem: 'O nome de usuário e a senha não podem ser os mesmos que não são necessários: e email: {{emailAddress: {Mensagem:' A entrada não é um e -mail '}}}}}}}}}}}}}} be empty'},identical: {field: 'confirmPassword',message: 'The password and its confirm are not the same'},different: {field: 'username',message: 'The password cannot be the same as 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: {format: 'YYYY/MM/DD',message: 'The birthday is not valid'}}},gender: {validators: {notEmpty: {message: 'The gender is required'}}},'languages[]': {validators: {notEmpty: {message: 'Please specify at least one language you can speak'}}},'programs[]': {validators: {choice: {min: 2,max: 4,message: 'Please choose 2 - 4 programming languages you are good at'}}},captcha: {validators: {callback: {mensagem: 'Resposta errada', retorno de chamada: function (valor, validador) {var itens = $ ('#Captchaoperation'). html (). split (''), sum = parseInt (itens []) + parseint (itens []); {$ ('#defaultForm'). bootstrapValidator ('validate');}); $ ('#resetbtn'). clique (function () {$ ('#defaultForm'). Data ('bootstrapValidator')Veja 331 linhas, clique em enviar, use
$ ('#defaultForm'). bootstrapValidator ('validate');VERIFICAÇÃO DO FORMULHO DE TRATE
Aqui está uma armadilha que encontrei:
A lógica padrão do bootstrapValidator é virar o botão acinzentado quando a verificação do formulário falhar.
No entanto, no projeto, o botão não está dentro do formulário e é enviado pelo AJAX por meio da ligação do evento. Então a pergunta é:
O projeto não precisa executar os eventos subsequentes ligados quando a verificação do formulário falha. O Baidu não conseguiu encontrar informações relevantes por um longo tempo e, finalmente, depende do Google:
$ ("#YourForm"). Submit (function (ev) {ev.preventDefault ();}); $ ("#submit"). $ ("#YourForm"). Data ('bootstrapValidator'); bootstrapValidator.validate (); if (bootstrapValidator.isValid ()) $ ("#yourform"). submmit (); else return;});O acima exposto é o conhecimento relevante do inicializador de plug-in de verificação do formulário no 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!