Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to do BootstrapValidator form verification in detail". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

First, introduce js and css files

When we start the project, we need to import the following two files: bootstrapValidator.js and bootstrapValidator.css. We need to introduce it in pages with jquery and bootstrap.

Second, write html

We write the form form in the html file in the project, add form controls, and if we want to add validation rules to a field, we need a package by default. Inside, the tag must have a name attribute, and the value inside is used to match the field. The code is as follows:

Username Email address

Third, add rule verification

1. Add to the html tag, and the code is as follows:

Username

2. Add the js file as follows:

$(function () {$("# form-test") .bootstrapValidator ({live: 'disabled',// verification opportunity. Enabled verifies when the content changes (default), disabled and submitted submit and revalidate excluded: [': disabled',': hidden',': not (: visible)'], / / exclude controls that do not need verification For example, the disabled or hidden submitButtons:'# btn-test',// specifies the submit button, which becomes disabled if verification fails, but I failed to try. On the contrary, the non-submit button will also be submitted to the action specified page message: 'generic validation failure message', / / it seems that feedbackIcons: {/ / various icons displayed according to the verification results valid: 'glyphicon glyphicon-ok', invalid:' glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh'} Fields: {text: {validators: {notEmpty: {/ / Detection is not empty, radio is also available message: 'text box must be entered'} StringLength: {/ / Detection length min: 6, max: 30, message: 'length must be between 6-30'} Regexp: {/ / regular verification regexp: / ^ [a-zA-Z0-9 _\.] + $/, message: 'the characters entered do not meet the requirements'}, remote: {/ / send the content to the specified page for verification Return the verification result For example, query whether the user name exists url: 'specify page', message: 'The username is not available'}, different: {/ / compare the same content with the specified text box field:' specify the text box name' Message: 'cannot be the same as the specified text box'}, emailAddress: {/ / verify email address message: 'not the correct email address'} Identical: {/ / whether it is the same as the content of the specified control For example, two passwords are inconsistent field: 'confirmPassword',// specified control name message:' inconsistent input'}, date: {/ / verify the specified date format format: 'YYYY/MM/DD' Message: 'incorrect date format'}, choice: {/ / the quantity selected by the check control min: 2, max: 4 Message:'2-4 options must be selected'}) Click ("# btn-test") .click (function () {/ / non-submit button to verify). If it is submit, you do not need this sentence to directly verify $("# form-test") .bootstrapValidator ('validate'). / / submit verification if ($("# form-test"). Data ('bootstrapValidator'). IsValid () {/ / get the verification result. If successful, execute the following code alert ("yes"); / / actions after successful verification, such as ajax}};})

Front-end custom verification rules

1. Callback custom verification

The custom verification of the front end of Bootstrapvalidator is callback, and the code is as follows:

"rowkey": {message: 'rowkey verification failed', validators: {stringLength: {max: 1000, message: 'rowkey cannot exceed 1000 characters'}, callback: {callback: function (value, validator) $field) {if ($('input: radioradio[ name = "databaseType"]: checked'). Val () = = "Hbase" & & value = = "") {return {valid: false Message: 'rowkey cannot be empty'} else {return true}}

2. Extend the validators method of plug-ins

This method is to put the methods commonly used in the project into a separate js to achieve the effect we need, the code is as follows:

$(function () {$. Fn.bootstrapValidator.validators.checkIdCard = {/ * @ param {BootstrapValidator} form validation instance object * @ param {jQuery} $field jQuery object * @ param {Object} form validation configuration item value * @ returns {boolean} * / validate: function (validator, $field, options) {/ / debugger Try {return checkIdCardNo ($field.val ());} catch (e) {console.error (e);} return false;}};} (window.jQuery))

3. Custom verification of remote backend

We know that the custom verification at the front end of Bootstrapvalidator is remote, which is often used in database weight checking. The code is as follows:

"tableName": {message: 'table name verification failed', validators: {notEmpty: {message: 'table name cannot be empty'}, stringLength: {max: 100, message: 'table name cannot exceed 100 characters'}, remote: {message: 'table name repeats' Url: 'check', data:', / / the value of the validation field is passed to the backend delay: 2000 / / by default. This attribute must be added, otherwise the user will enter a word and visit the background once, which will consume a lot of system resources.

Backend part of the code:

/ / detect whether the new metaTableName duplicates def check () {def map = new HashMap () def result = service.check (params.name) if (result) {map.put ("valid", true)} else {map.put ("valid") False)} render (map as JSON) / / Note that the format passed from the back end to the front end must be a json object with a valid attribute before it can be recognized by validator. / / if any other value is returned, the page verification will not get the verification result so that it cannot be verified} {"valid": false} / / is invalid. If the verification fails to pass {"valid": true} / /, the verification is passed.

5. Common events

1. Get a validator object or instance

Our method typically initializes validator with a direct call to $(form) .bootstrapValidator (options). After the initial, there are two ways to get our validator object or instance, as follows:

Method 1:

/ / Get plugin instance var bootstrapValidator = $(form) .data ('bootstrapValidator'); / / and then call method bootstrapValidator.methodName (parameters)

Method 2:

$(form) .bootstrapValidator (methodName, parameters)

What is obtained in this way is the jquery object representing the current form, which can be called by passing the method name and parameter into the bootstrapValidator method, respectively.

The two methods are used as follows:

/ / The first way $(form) .data ('bootstrapValidator') .updateStatus (' birthday', 'NOT_VALIDATED') .validateField (' birthday'); / / The second one $(form) .bootstrapValidator ('updateStatus',' birthday', 'NOT_VALIDATED') .bootstrapValidator (' validateField', 'birthday')

2. Reset a single validation field validation rule

$(formName) .data ("bootstrapValidator") .updateStatus ("fieldName", "NOT_VALIDATED", null)

3. Reset all validation rules of the form

$(formName) .data ("bootstrapValidator") .resetForm ()

4. Manual touch order verification

/ / trigger all validation $(formName) .data ("bootstrapValidator") .validate (); / / trigger validation of the specified field $(formName) .data ("bootstrapValidator") .validateField ('fieldName')

5. Get the current form status

Var flag = $(formName) .data ("bootstrapValidator") .isValid ()

6. Get the verification object according to the specified field name

/ / element = jq object / nullvar element = $(formName) .data ("bootstrapValidator"). GetFieldElements ('fieldName'); that's all for BootstrapValidator form validation. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.