thinkphp5 Example of asynchronous mailbox authentication using bootstrapvalidator

This article introduces an example of thinkphp5 using bootstrapvalidator to asynchronously verify mailboxes, and shares it with you as follows:

js Authentication

/**
 * Created by HONGXIN on 2017-10-23.
 */
$(function () {
  $('form').bootstrapValidator({

    message: 'This value is not valid',
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },

    live: 'disabled',// After validation fails, the Submit button remains optional 

    fields: {
      email: {
        message: ' User name authentication failed ',// Default 
        verbose: false,
        validators: {
          notEmpty: {
            message: ' Mailbox cannot be empty '
          },
          emailAddress: {
            message: ' The mailbox address is in the wrong format '
          },
          remote: {
            url: '/ajax_email',
            message:" This mailbox is already registered ",
            type: "post",
            dataType: 'json',
            data: {
              // What is passed by default is the value of the input box 
            },
            delay: 500,// Delay effect 
          },
        }
      },
      password: {
        validators: {
          notEmpty: {
            message: ' Mailbox address cannot be empty '
          },
          stringLength: {
            min: 6,
            max: 18,
            message: ' User name length must be in 6 To 18 Between bits '
          },
        },
      },
      password2: {
        validators: {
          notEmpty: {
            message: ' Confirm password cannot be blank '
          },
          identical: {
            field: 'password',
            message: ' Two passwords must 1 To '
          }
        }
      },
      username:{
        validators: {
          notEmpty: {
            message: ' User name cannot be empty '
          },
          stringLength: {
            min: 2,
            max: 8,
            message: ' User name length must be in 2 To 8 Between bits '
          }
        }
      }

    }
  });
});

TP5 treatment

  public function ajax_email(){
    // The message Can be empty, which replaces JS Verified message Attribute 
    echo json_encode(['valid'=>false,'message'=>' Incorrect verification code ']);

  }

Several Points for Attention in js Verification

verbose: false, which means js verifies legality and then asynchronous background verification, so as to reduce the pressure on the server data: {}, the default is to pass the value of the input box, so 1 generally does not need to write this property, or it can be empty

Attention points in the background

Note that it is not return but echo Returns the json format {'valid': true [, 'message': 'Validation succeeded']}

Reference link: remote verification experience with bootstrapvalidator

Reference link: BootstrapValidator ultra-detailed tutorial