I wrote a login verification with bootstrap date a few days ago. Here's a small note
First, we need to introduce
Bootstrappvalidator. CSS / / can not be imported
jquery-2.1.0.min.js
bootstrap.min.js
bootstrapValidator.js
The following is the verification method. The name attributes of the two text boxes verified are loginName and password (remember to use the name attribute for the text box, otherwise the verification is invalid)
function validate(){ $('form').bootstrapValidator({ message: 'This value is not valid',//Default prompt feedbackIcons: {//Prompt Icon valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { loginName: { message: 'User name verification failed', validators: { notEmpty: { message: 'User name cannot be empty' } } }, password: { validators: { notEmpty: { message: 'Password cannot be empty' } } } } }).on('success.form.bv',function(e){ formsub(); e.preventDefault();//Prevent automatic submission }); }function formsub(){ var flag = $('form').data("bootstrapValidator").isValid();//Calibration qualification if(flag){ var load = top.layer.load(); var $form = $('#form'); $.ajax({ url:$form.attr('action'), data:$form.serialize(), type:'post', beforeSend:function(){ layer.msg('Logging in'); }, success:function(data){ if(data=="success"){ setTimeout(function(){ layer.close(load); layer.msg('Login successfully'); setAndRemoveCookie();//Whether to write cookie },1000); window.location.href=path+'/department/choose.do'; /* setTimeout(function(){ //Login back },2000); */ }else{ layer.close(load); layer.msg('Authentication failed,Please check whether the user name or password is correct!',{ time:3500 //3.5 Seconds later }); /* setTimeout(function(){ },1000); */ } }, error:function(e){ layer.msg('Make a mistake o(╥﹏╥)o,Please contact backstage!',{ btn:'I got it!' }); layer.close(load); } }) } }
There was a problem in the form validation before. When I click to log in, only when I click for the first time, ajax requests the background to return the user name / password error message normally
But if I make a mistake on purpose and click again, I will find that the background enters twice. At this time, ajax directly enters the error blank page returned
I checked the data on the Internet and said that there is a default commit behavior in bootstrap date, so I added the following code
e.preventDefault(); / / prevent automatic submission
This code can only be added at the end of the line, otherwise when you click login, there will be no response for the first time