TP5使用bootstrapvalidator進行異步驗證郵箱

yexiaobai 發布于2019-06-28 14:06 / 2727人閱讀

摘要：驗證驗證失敗后，提交按鈕仍然是可選狀態用戶名驗證失敗默認郵箱不能為空郵箱地址格式有誤此郵箱已經注冊默認傳遞的就是輸入框的值延遲效果郵箱地址不能為空用戶名長度必須在到位之間確認密碼不能為空兩次密碼必須一致用戶名不能為空用戶名長度必須

js驗證

/**
 * 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處理

    public function ajax_email(){
        //該message可以為空，它替換JS驗證的message屬性
       echo json_encode(["valid"=>false,"message"=>"驗證碼不正確"]);

    }

js驗證幾個注意點

verbose: false,代表js驗證合法后再異步后臺驗證，這樣減少服務器壓力

data: {} ,默認傳遞的就是輸入框的值，所以一般不用寫該屬性，或者為空即可

后臺注意點

注意不是return而是echo

返回json格式 {"valid":true[,"message":"驗證成功"]}

參考鏈接：使用bootstrapvalidator的remote驗證經驗

參考鏈接：bootstrapvalidator remote $.ajax請求

參考鏈接：BootstrapValidator超詳細教程

云服務器 GPU云服務器異步驗證 validate異步驗證對郵箱空間進行清理用戶證件信息進行驗證

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/25977.html

前端框架快速開發靜態頁面

摘要：框架開發解放了生產力，讓一個靜態頁面效果更逼真，也讓用戶體驗逐漸上去，但是目前對網站的需求主要還是為了展示和宣傳一些東西，反觀教育機構和政府部門的網站都是偏動畫少，體現了公關的嚴肅性。 showImg(https://segmentfault.com/img/remote/1460000009262879?w=1183&h=522); 前言最近很久沒有寫文章，不忙也忙的生活節奏，博客...

李世贊 2019-08-29 12:31 評論0 收藏0
前端框架快速開發靜態頁面

摘要：框架開發解放了生產力，讓一個靜態頁面效果更逼真，也讓用戶體驗逐漸上去，但是目前對網站的需求主要還是為了展示和宣傳一些東西，反觀教育機構和政府部門的網站都是偏動畫少，體現了公關的嚴肅性。 showImg(https://segmentfault.com/img/remote/1460000009262879?w=1183&h=522); 前言最近很久沒有寫文章，不忙也忙的生活節奏，博客...

wenzi 2019-08-22 11:03 評論0 收藏0
前端框架快速開發靜態頁面

摘要：框架開發解放了生產力，讓一個靜態頁面效果更逼真，也讓用戶體驗逐漸上去，但是目前對網站的需求主要還是為了展示和宣傳一些東西，反觀教育機構和政府部門的網站都是偏動畫少，體現了公關的嚴肅性。 showImg(https://segmentfault.com/img/remote/1460000009262879?w=1183&h=522); 前言最近很久沒有寫文章，不忙也忙的生活節奏，博客...

mozillazg 2019-08-01 16:47 評論0 收藏0
【Java EE】從零開始寫項目【總結】

摘要：目前該功能并未完善，敬請期待。反正每次都會有新的東西補充上去一開始我本來想做的是可以使用微信登陸，也可以使用賬戶郵箱登陸，也可以使用短信登陸的。后來發現微信登陸要企業認證，做不了。從零開發項目概述最近這一直在復習數據結構和算法，也就是前面發出去的排序算法八大基礎排序總結，Java實現單向鏈表，棧和隊列就是這么簡單，十道簡單算法題等等... 被虐得不要不要的，即使是非常簡單有時候繞半...

imtianx 2019-08-16 11:12 評論0 收藏0