This article will introduce you to how to judge the example code of form verification. Before introducing the main text, I will introduce you to the plug-in.
Plugin introduction
Let's take a picture first:
Download address: https://github.com/nghuuphuoc/bootstrapvalidator
Usage Tips
Chinese culture:
After downloading the plug-in, introduce /js/bootstrapValidator/language/zh_CN.js into the file, that is, implement Chinese culture
Verification form before submission:
A more richer form verification example: http://www.jq22.com/yanshi522, directly upload the code:
<!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 FontAwesome CSS if you want to use feedback icons provided by FontAwesome --><!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/../css/font-awesome.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>Sign up</h></div><form id="defaultForm" method="post" action="target.php"><div><label>Full name</label><div><input type="text" 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="email" /></div></div><div><label>Password</label><div><input type="password" name="password" /></div></div><div><label>Retype password</label><div><input type="password" name="confirmPassword" /></div></div><div><label>Gender</label><div><label><input type="radio" name="gender" value="male" /> Male</label></div><div><label><input type="radio" name="gender" value="female" /> Female</label></div><div><label><input type="radio" name="gender" value="other" /> Other</label></div></div><div><label>Birthday</label><div><input type="text" name="birthday" /> (YYY/MM/DD)</div></div><div><label>Languages</label><div><label><input type="checkbox" name="languages[]" value="english" /> 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" /> Russian</label></div><div><label><input type="checkbox" name="languages[]" value="other" /> Other</label></div></div><div><label>Programming Languages</label><div><div><label><input type="checkbox" name="programs[]" value="net" /> .Net</label></div><div><label><input type="checkbox" name="programs[]" value="java" /> Java</label></div><div><label><input type="checkbox" name="programs[]" value="c" /> C/C++</label></div><div><label><input type="checkbox" name="programs[]" value="php" /> PHP</label></div><div><label><input type="checkbox" name="programs[]" value="perl" /> Perl</label></div><div><label><input type="checkbox" name="programs[]" value="ruby" /> Ruby</label></div><div><label><input type="checkbox" name="programs[]" value="python" /> Python</label></div><div><label><input type="checkbox" name="programs[]" value="python" /> Python</label></div><div><label><input type="checkbox" name="programs[]" value="javascript" /> Javascript</label></div></div><div><label id="captchaOperation"></label><div><input type="text" name="captcha" /></div></div><div><div><button type="submit" name="signup" value="Sign up">Sign up</button><button type="submit" name="signup2" value="Sign up 2">Sign up 2</button><button type="button" id="validateBtn">Manual validate</button><button type="button" id="resetBtn">Reset form</button></div></form></div></section><!-- :form --></div></div><script type="text/javascript">$(document).ready(function() {// Generate a simple captchafunction randomNumber(min, max) {return Math.floor(Math.random() * (max - min + 1) + min);};$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));$('#defaultForm').bootstrapValidator({// live: 'disabled',message: 'This value is not valid',feedbackIcons: {valid: 'glyphicon 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 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',message: 'The username is not available'},different: {field: 'password',message: 'The username and password cannot be the same as each other'}}},email: {validators: {emailAddress: {message: 'The input is not a valid email address'}}}},password: {validators: {notEmpty: {message: 'The password is required and cannot 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: {message: 'Wrong answer',callback: function(value, validator) {var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[]) + parseInt(items[]);return value == sum;}}}}}});// Validate the form manually$('#validateBtn').click(function() {$('#defaultForm').bootstrapValidator('validate');});$('#resetBtn').click(function() {$('#defaultForm').data('bootstrapValidator').resetForm(true);});});</script></body></html>Look at 331 lines, click Submit, use
$('#defaultForm').bootstrapValidator('validate');Trigger form verification
Here is a pitfall I encountered:
The default logic of bootstrapValidator is to turn the button grayed out when form verification fails.
However, in the project, the button is not inside the form, and is submitted by ajax through event binding. Then the question is:
The project needs to not execute the bound subsequent events when form verification fails. Baidu couldn't find relevant information for a long time, and finally it depends on Google:
$("#yourform").submit(function(ev){ev.preventDefault();});$("#submit").on("click", function(){var bootstrapValidator = $("#yourform").data('bootstrapValidator');bootstrapValidator.validate();if(bootstrapValidator.isValid())$("#yourform").submit();else return;});The above is the relevant knowledge of the form verification plug-in bootstrapValidator in Bootstrap introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!