Este artigo recomenda um bootstrapValidator.js feito do Twitter. O bootstrap é feito do Twitter, portanto, o uso do validador original é mais confiável. Haverá muitos modelos para procurar o BootstrapValidator no Baidu, mas eu recomendo apenas este:
1. Dê uma olhada
Para uma introdução simples, aqui está apenas uma verificação vazia.
Endereço de download oficial bootstrapValidator
2. Referência de recursos
Depois de baixar o pacote de recursos, você pode ver o seguinte diretório.
Em seguida, apresente os três arquivos a seguir no seu projeto.
<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/validado/js/language/zh_cn.js"> </script>3. O nome do membro não está vazio de configuração do projeto
<form action = "$ {ctx}/login" method = "post" onSubMit = "Return validateCallback (this)"> <div> <div> <belty> conta </label> <input type = "text" autofocus name = "userName" someholder = "digite o número do membro" AUTOCOMLETE = "OFF"-NN-NNOMN (DATS-NOTN "Data-BV notempty significa que o número do membro deve ser usado como uma verificação vazia.
A Div of Form-Group é necessária, caso contrário, o erro "Recursão demais" será relatado.
Ao enviar o formulário, o método ValidateCallback será executado. Este método é introduzido especificamente na etapa 5.
4. Ativar validador de bootstrap após o carregamento da página
$ (function () {// valide o formulário $ ("form.Required-validate"). cada (function () {var $ form = $ (this); $ form.bootstrapValidator (); // corrija o bootstrap validator) para o severmorl «; para o servidor; });Adicione o atributo 'Class = "Requerir-Validate"' no formulário e, em seguida, obtenha o formulário correspondente através do jQuery e execute a carga padrão do BootstrapValidator nele.
Certifique -se de prestar atenção a alguns do código comentados no código acima. Para detalhes, consulte o seguinte para corrigir os bugs enviados pelo BootstrapValidator repetidamente. O conteúdo específico é o seguinte
O BootstrapValidator é muito bonito, mas muitas vezes há intenções assassinas escondidas sob seu lindo rosto. É por isso que existem bugs de envio repetidos .
Solução:
// valide o formulário $ ("form.Required-validate", $ p) .EECH (function () {var $ form = $ (this); $ form.bootstrapValidator (). on ('succcess.form.bv', function (e) {// impedir o evento padrão de cometer E.PreventDefault ();});});Defina o método on para o bootstrapValidator, cuja chave é sucesso.Form.BV e Value é E.PreventDefault ();.
Investigação de bugs:
Resultados da pesquisa:
1. Quando você não usa BootstrapValidator, não haverá problema, como mostrado na figura.
2. Somente quando você clicar na primeira vez, o envio será repetido duas vezes. Então, depois de entrar novamente no nome de usuário, você o enviará em uma única vez.
O bug ocorre ambiente:
Copie o código da seguinte forma: <formulário de formulário = "$ {ctx}/mem/login? CallbackType = Forward" Method = "Post" OnsubMit = "Return Validatecallback (this, Tabajaxdone)" Type = "Login">
...
<button type = "envie"> envie </botão>
</morm>
descrever:
Este é um formulário comum, com o endereço de solicitação na ação, e existe um método onSubmit no formulário, que é principalmente para verificar o formulário, enviar a solicitação e, finalmente, ligar de volta o método Tabajaxdone.
Análise de bug:
1. Definitivamente, não há problema com o formulário. Se não houver validação de bootstrap, não há nenhum problema.
2. Não houve problema ao usar o jQuery validar antes.
3. Em seguida, o problema só pode acontecer no Validate Bootstrap.
4. Não há problema com o uso padrão do Validate Bootstrap, porque ele só será repetido quando o primeiro clique em enviar.
5. Então, pode ser que o Validate de Bootstrap tenha a solicitação de envio padrão.
Se você olhar para o objeto Validate novamente, poderá ver que existem muitos eventos por padrão, entre os quais as formas são as mais suspeitas, o que significa que ele pode acionar a solicitação de envio novamente.
Depuração de insetos:
// valide o formulário $ ("form.Required-validate", $ p) .Each (function () {var $ form = $ (this); $ form.bootstrapValidator (); // .on ('success.form.form.bv', function (e) {// // prevenir o default submission //.eventDefault;1. Quando a página é carregada pela primeira vez, o BootstrapValidator precisa ser carregado no método acima antes que a verificação de dados do front-end possa ser executada.
2. Você viu o código comentado, talvez possa adivinhar, e essa é a solução. É isso mesmo, adicione este processamento de eventos para formar e usar e.preventDefault (); Para impedir o envio padrão do evento.
5. Verifique o item ao enviar o formulário
função validateCallback (formulário, retorno de chamada, confirmmsg) {yunm.debug ("Entre no formulário Validação e submissão"); var $ form = $ (form); var dados = $ form.data ('bootstrapValidator'); if (dados) {// componentes que reparam a memória não verificam data.validate (); if (! data.isvalid ()) {return false; }} $ .ajax ({type: form.method || 'post', url: $ form.attr ("ação"), dados: $ form.SerializeArray (), Datatype: "JSON", cache: false, sucessor: chamada || yunm.ajaxdone, erro: yun.ajaxerror}); retornar false;}Após obter o formulário de formulário no validateCallback, o formulário pode ser retornado através do método ISValid para verificar se ele passa.
Depois que a verificação do formulário for passada, envie o formulário ao servidor através do AJAX.
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.