MENU

Bootstrapvalidator 用户后端实时检查

• September 23, 2020 • Read: 98 • 教程

Bootstrapvalidator 用户后端实时检查

https://www.bootcdn.cn/jquery.bootstrapvalidator/0.5.3/

表单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用户注册</title>
        <link rel="stylesheet" type="text/css" href="./css/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="./css/bootstrapvalidator-0.5.3/css/bootstrapValidator.min.css">
        <script type="text/javascript" src="./js/jQuery_v3.5.1.js"></script>
        <script type="text/javascript" src="./css/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="./css/bootstrapvalidator-0.5.3/js/bootstrapValidator.min.js"></script>
    </head>
    <body>
        <div class="caption margin">
            <h3 class="text-center">用户注册</h3>
            <form action="" method="post" class="form-horizontal">
                <div class="form-group">
                    <label class="col-md-3 control-label">用户名</label>
                    <div class="col-md-6">
                        <input type="text" class="form-control" name="username" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">Email</label>
                    <div class="col-md-6">
                        <input type="text" class="form-control" name="email" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">密码</label>
                    <div class="col-md-6">
                        <input type="text" class="form-control" name="pwd" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">确认密码</label>
                    <div class="col-md-6">
                        <input type="text" class="form-control" name="pwd1" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-6 col-md-offset-3">
                        <button id="btn" type="submit" class="btn btn-primary btn-block active">提交</button>
                    </div>
                </div>
            </form>
        </div>
    </body>
</html>
<script type="text/javascript">
    $(function() {
        $('form').bootstrapValidator({
            //默认提示
            message: 'This value is not valid',
            // 表单框里右侧的icon
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            submitHandler: function(validator, form, submitButton) {
                // 表单提交成功时会调用此方法
                // validator: 表单验证实例对象
                // form jq对象 指定表单对象
                // submitButton jq对象 指定提交按钮的对象
            },
            fields: {
                username: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: { //不能为空
                            message: '用户名不能为空'
                        },
                        remote: { //后台验证,比如查询用户名是否存在
                            type: 'POST',
                            url: 'user_check.php',
                            message: '此用户名已存在',
                            delay: 1000
                            // url: 'student/verifyUsername',
                            // message: '此用户名已存在'
                        }
                    }
                },
                email: {
                    message: 'Email验证失败',
                    validators: {
                        notEmpty: {
                            message: 'Email不能为空'
                        },
                        emailAddress: { //验证email地址
                            message: '不是正确的email地址'
                        },
                        remote: {
                            type: 'POST',
                            url: 'user_check.php',
                            message: 'The email is not available',
                            delay: 2000
                        }
                    }
                },
                pwd: {
                    message: '密码验证失败',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: { //检测长度
                            min: 6,
                            message: '密码小于6个字符'
                        },
                    }
                },
                pwd1: {
                    message: '密码验证失败',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: { //检测长度
                            min: 6,
                            message: '密码小于6个字符'
                        },
                        identical: { //与指定控件内容比较是否相同,比如两次密码不一致
                            field: 'pwd', //指定控件name
                            message: '两次密码不一致'
                        }
                    }
                }
            }
        });

        $("#btn").click(function() {
            //非submit按钮点击后进行验证,如果是submit则无需此句直接验证
            $("form").bootstrapValidator('validate'); //提交验证
            if ($("form").data('bootstrapValidator').isValid()) {
                //获取验证结果,如果成功,执行下面代码
                alert("yes"); //验证成功后的操作,如ajax
            }
        });
    })
</script>

后端PHP

<?php
  //user_check.php
include "conn.php";
header('Content-type: application/json');

$valid = true;//用户名可用
// 查询用户是否存在
if(isset($_POST['username'])){
    $sql = "SELECT * FROM crm_users WHERE username='{$_POST['username']}'";
    //查到数据返回false,bool取反;
    $valid = !(bool) $db->read_one($sql);
    // var_dump($valid);
    // $valid = false;
}
if(isset($_POST['email'])){
    $sql = "SELECT * FROM crm_users WHERE email='{$_POST['email']}'";
    $valid = !(bool) $db->read_one($sql);
}

echo json_encode(
    array(
        'valid' => $valid,
    )
);
?>

X1wAqV

dh6hjz

您的大名:
万水千山总是情,给个打赏行不行。 打赏
- - - The END - - -
  • 文章标题:Bootstrapvalidator 用户后端实时检查
  • 文章链接:https://gxusb.com/124.html
  • 版权所有:本文版权归Get-林林小窝 所有,转载请注明出处!除特殊注明外(如有侵权,请联系 gxggxl@qq.com ),本站原创内容均采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可
  • 广而告之

    Last Modified: October 5, 2020
    Archives QR Code
    QR Code for this page
    Tipping QR Code
    Leave a Comment