Beispiel dafür, wie tp5 Bootstrapvalidator verwendet, um E-Mails asynchron zu überprüfen

In diesem Artikel wird ein Beispiel für die Verwendung von BootstrapValidator zur asynchronen Überprüfung der E-Mail-Adresse vorgestellt. Die Details sind wie folgt:

JS-Überprüfung

/**
 * 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',//验证失败后，提交按钮仍然是可选状态

    fields: {
      email: {
        message: '用户名验证失败',//默认
        verbose: false,
        validators: {
          notEmpty: {
            message: '邮箱不能为空'
          },
          emailAddress: {
            message: '邮箱地址格式有误'
          },
          remote: {
            url: '/ajax_email',
            message:"此邮箱已经注册",
            type: "post",
            dataType: 'json',
            data: {
              //默认传递的就是输入框的值
            },
            delay: 500,//延迟效果
          },
        }
      },
      password: {
        validators: {
          notEmpty: {
            message: '邮箱地址不能为空'
          },
          stringLength: {
            min: 6,
            max: 18,
            message: '用户名长度必须在6到18位之间'
          },
        },
      },
      password2: {
        validators: {
          notEmpty: {
            message: '确认密码不能为空'
          },
          identical: {
            field: 'password',
            message: '两次密码必须一致'
          }
        }
      },
      username:{
        validators: {
          notEmpty: {
            message: '用户名不能为空'
          },
          stringLength: {
            min: 2,
            max: 8,
            message: '用户名长度必须在2到8位之间'
          }
        }
      }

    }
  });
});

TP5-Verarbeitung

  public function ajax_email(){
    //该message可以为空，它替换JS验证的message属性
    echo json_encode(['valid'=>false,'message'=>'验证码不正确']);

  }

Einige Aufmerksamkeitspunkte für die JS-Überprüfung

1. ausführlich: falsch, Dies bedeutet, dass die asynchrone Hintergrundüberprüfung durchgeführt wird, nachdem die JS-Überprüfung zulässig ist, wie folgt: Reduzieren Sie den Serverdruck

2. data: {}, der Wert des Eingabefelds wird standardmäßig übergeben, also im Allgemeinen dort Es ist nicht nötig, dieses Attribut zu schreiben, oder es kann leer sein

Hinweise zum Hintergrund

1. Beachten Sie, dass es nicht zurückgegeben wird aber Echo

2. JSON-Format zurückgeben {'valid': true[,'message':'Verifizierung erfolgreich']🎜>

Das obige ist der detaillierte Inhalt vonBeispiel dafür, wie tp5 Bootstrapvalidator verwendet, um E-Mails asynchron zu überprüfen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!