TP5使用bootstrapvalidator进行异步验证邮箱

yexiaobai 发布于2019-06-28 14:06 / 2620人阅读

摘要：验证验证失败后，提交按钮仍然是可选状态用户名验证失败默认邮箱不能为空邮箱地址格式有误此邮箱已经注册默认传递的就是输入框的值延迟效果邮箱地址不能为空用户名长度必须在到位之间确认密码不能为空两次密码必须一致用户名不能为空用户名长度必须

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超详细教程

专线服务 idc机房托管异步验证 validate异步验证对邮箱空间进行清理用户证件信息进行验证

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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