The overall

Organizer: Zheng Hui Contact information: QQ: 8042965 Email: [email protected]

I. Introduction of page reference plug-in

1. CSS plug-ins

<link rel="stylesheet" href="Plug-in/survey/CSS/bootstrap the bootstrap - 3.3.7. CSS" />

<! BootstrapValidator is a form validation component based on bootstrap.
<link rel="stylesheet" href="plug-in/survey/dist/css/bootstrapValidator.css"/>
Copy the code

2. JS plug-ins

 <script type="text/javascript" src="Plug-in/survey/js/jquery/jquery - 1.12.4. Min. Js." "></script>

<script type="text/javascript" src="Plug-in/survey/js/bootstrap/bootstrap - 3.3.7. Js." "></script> 

<script src="plug-in/ace/datatables/dataTables.bootstrap.min.js"></script>

<! Form validation component -->
<script type="text/javascript" src="plug-in/survey/dist/js/bootstrapValidator.js"></script>
Copy the code

2. Introduction of general methods

Note: When using the bootstrapValidator plugin, you need to validate data such as input. It must be wrapped by: form-group, otherwise it cannot be verified.

For example: This format is fixed

1. HTML writing format

<-- This notation does not apply to the Summit button to submit data. The default form is submitted using an input button of type sumbit. The use of Submit is prohibited because ajax requests are required. Then manually trigger validation in submit --><form id="zhform" onsubmit="return false" action="# #" class="form-horizontal" >< - has to be<div class="form-group" > </div>Wrap or there is no prompt icon effect --><div class="form-group" ><-- must have a name value because it is validated by the name value. --><input type="text" class="number"  id="username" name="username"  />
    </div>
</form>
Copy the code

2. Form validation function format

/* Form validation */
function formValidator() {
    //#zhform is the id of a from form
	$('#zhform').bootstrapValidator({
        //live: 'disabled', // The three authentication modes will take effect after the comment is removed
        container: '#messages'.// Where do I display the prompt
        message: 'Verification failed'.// Common prompt
        feedbackIcons: {  // Prompt icon
            valid: 'glyphicon glyphicon-ok'.invalid: 'glyphicon glyphicon-remove'.validating: 'glyphicon glyphicon-refresh'
        }, 
        fieldsName to validate (must be input name value): {validators: {
        			notEmpty: { // Cannot be null
        				message: "Latitude and longitude cannot be empty!" // Prompt message
        			},
        			digits: { // Can only be a number
        				message: "Latitude and longitude are numbers only!"
        			},
        			between: { // Control the number between
                        min: -90.max: 90.message: 'Longitude range must be between: -90.0 and 90.0'}}}... . .// For more rules, please visit Baidu}})}Copy the code

2. Initialize

$(function() {...// Initialize the form validation ruleformValidator(); . });Copy the code

Three, around the pit necessary

regexp: { // Use re
    regexp: / ^ (+ -)? ([0-9] * \.? [0-9] + | [0-9] + \.? [0-9]*)([eE][+-]? [0-9] +)? $/.// Verify if it is a number
    message: 'Please enter integer or decimal'
}
Copy the code

Fourth, common re

1. Verify whether it is a positive integer

regexp: { // Use re
    regexp: /^[1-9]\d*$/.// Verify that it is a positive integer
    message: 'Enter an integer'
}
Copy the code

2, verify whether the number (integer, decimal)

 regexp: { // Use re
     regexp: / ^ (+ -)? ([0-9] * \.? [0-9] + | [0-9] + \.? [0-9]*)([eE][+-]? [0-9] +)? $/.// Verify if it is a number
     message: 'Enter integer or decimal'
 }
Copy the code

3. Verify positive integers

 regexp: { // Use re
     regexp: /^\d+$/.// Verify that it is a positive integer
     message: 'Enter a positive integer'
 }
Copy the code