bootstrap validator discuz 使用实例

摘要:bootstrap validator discuz 使用实例...

作者:LoveCode标签:bootstrap,validator,discuz,使用实例


bootstrap validator discuz 使用实例如下:


discuz后端:

<?php
/**
 * FileName: validator.php
 * User: Aaron
 * Date: 2016/08/8/15/16
 * Time: 11:23
 */

define('APPTYPEID', 88);
define('CURSCRIPT', 'validator');

require './source/class/class_core.php';

$discuz = C::app();
$cachelist = array('grouptype', 'groupindex', 'diytemplatenamegroup');
$discuz->cachelist = $cachelist;
$discuz->init();

$modarray = array('index', 'my', 'attentiongroup');
$mod = !in_array($_G['mod'], $modarray) ? 'index' : $_G['mod'];
define('CURMODULE', $mod);

runhooks();

//检测用户名是否存在
$username = $_POST['username'];
$isUser = DB::fetch_all("SELECT username FROM ".DB::table('common_member')." WHERE username='".$username."'");
empty($isUser) ? $isAvailable = true : $isAvailable = false;

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

?>

前端代码:

<div class="registerForm">
    <form id="registerForm" method="post" class="form-horizontal" action="">
        <div class="form-group  has-feedback">
            <label class="col-sm-4 control-label">用户名</label>
            <div class="col-sm-5">
                <input type="text" class="form-control" name="username" placeholder="输入3-15个字符"/>
            </div>
        </div>

        <div class="form-group  has-feedback">
            <label class="col-sm-4 control-label">邮箱</label>
            <div class="col-sm-5">
                <input type="text" class="form-control" name="email" placeholder="格式:xxx@xxx.xxx"/>
            </div>
        </div>

        <div class="form-group  has-feedback">
            <label class="col-sm-4 control-label">密码</label>
            <div class="col-sm-5">
                <input type="password" class="form-control" name="password" placeholder="输入6-18个字符"/>
            </div>
        </div>

        <div class="form-group  has-feedback">
            <label class="col-sm-4 control-label">确认密码</label>
            <div class="col-sm-5">
                <input type="password" class="form-control" name="confirmPassword" placeholder="输入相同密码"/>
            </div>
        </div>

        <div class="form-group  has-feedback">
            <label class="col-sm-4 control-label">验证码</label>
            <div class="col-sm-5">
                <!--{if $secqaacheck || $seccodecheck}-->
                <!--{block sectpl}--><div class="rfm"><table><tr><th><span class="rq">*</span><sec>: </th><td><sec><br /><sec></td></tr></table></div><!--{/block}-->
                <!--{template common/seccheck}-->
                <!--{/if}-->
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-lg-offset-3">
                <button type="submit" class="btn btn-danger" name="submit">确认注册</button>
                <button type="button" class="btn btn-warning" id="resetBtn">重新填写</button>
                <button type="button" class="btn btn-info" id="resetBtn">关闭窗口</button>
            </div>
        </div>
    </form>
</div>
<script>
//    var memberRegister = jQuery(".members .register-grids");
//    var marginLeft = -(parseInt(memberRegister.css('width')))/2;
//    memberRegister.css({marginLeft:marginLeft+"px"});
//
//    var body = jQuery("body");
//    var marginTop = -(parseInt(memberRegister.css("height")))/2;
//    memberRegister.css({marginTop:marginLeft+"px"});
</script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        $('#registerForm').bootstrapValidator({
//        live: 'disabled',
            message: '输入的值无效',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '用户名无效',
                    validators: {
                        notEmpty: {
                            message: '用户名不得为空'
                        },
                        stringLength: {
                            min: 3,
                            max: 15,
                            message: '用户名字符长度3-15'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: '用户名只能由字母 数字 . _ 组成'
                        },
                        remote: {
                            url: '$_G["siteurl"]validator.php',
                            message: '用户名已存在'
                        },
                        different: {
                            field: 'password',
                            message: '用户名和密码不得相同'
                        }
                    }
                },
                email: {
                    validators: {
                        emailAddress: {
                            message: '邮箱格式不正确'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不得为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '用户名字符长度6-18'
                        },
                        different: {
                            field: 'username',
                            message: '密码不能和用户名相同'
                        }
                    }
                },
                confirmPassword: {
                    validators: {
                        notEmpty: {
                            message: '请再次输入密码/不得为空'
                        },
                        identical: {
                            field: 'password',
                            message: '2次输入的密码不相同'
                        },
                        different: {
                            field: 'username',
                            message: '密码不能和用户名相同'
                        }
                    }
                }
            }
        });

        $('#resetBtn').click(function() {
            $('#registerForm').data('bootstrapValidator').resetForm(true);
        });
    });
</script>


参数详细解说:

OptionEquivalent HTML attributeTypeDescription
messagedata-bv-remote-messageStringThe error message
url (*)data-bv-remote-urlStringThe remote URL that responses an encoded JSON of array containing thevalid key
namedata-bv-remote-nameStringThe name of field which need to validate
datan/aObjectThe data sent to remote URL.
You don't need to use this option if there is only field, defined as field name, sent to the remote URL.

name参数例子:
JS部分:
<script>$(document).ready(function() {
    $('#registrationForm').bootstrapValidator({
        fields: {
            username: {
                message: 'The username is not valid',
                validators: {                    // The validator will create an Ajax request
                    // sending { username: 'its value' } to the back-end
                    remote: {
                        message: 'The username is not available',
                        url: '/path/to/backend/'
                    }
                }
            }
        }
    });
});
</script>

后端部分:
<?php
// The back-end then will determine if the username is available or not,
// and finally returns a JSON { "valid": true } or { "valid": false }
// The code bellow demonstrates a simple back-end written in PHP

// Get the username from request
$username = $_POST['username'];

// Check its existence (for example, execute a query from the database) ...
$isAvailable = true; // or false

// Finally, return a JSON
echo json_encode(array(
    'valid' => $isAvailable,
));

HTML部分:
<form id="registrationForm" class="form-horizontal">
    <! -- Other fields -->

    <div class="form-group">
        <label class="col-lg-3 control-label">Username</label>
        <div class="col-lg-5">
            <input type="text" class="form-control" name="username" />
        </div>
    </div>
</form>


data参数例子:
HTML部分:
<form id="registrationForm" class="form-horizontal">
    <! -- Other fields -->

    <div class="form-group">
        <label class="col-lg-3 control-label">Username</label>
        <div class="col-lg-5">
            <input type="text" class="form-control" name="username" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-lg-3 control-label">Email</label>
        <div class="col-lg-5">
            <input type="text" class="form-control" name="email" />
        </div>
    </div>
</form>

JS部分:
<script>
$(document).ready(function() {
    $('#registrationForm').bootstrapValidator({
        fields: {
            username: {
                message: 'The username is not valid',
                validators: {
                    // Send { username: 'its value', type: 'username' } to the back-end
                    remote: {
                        message: 'The username is not available',
                        url: '/path/to/backend/',
                        data: {
                            type: 'username'
                        }
                    }
                }
            },
            email: {
                message: 'The email address is not valid',
                validators: {
                    // Send { email: 'its value', type: 'email' } to the back-end
                    remote: {
                        message: 'The email is not available',
                        url: '/path/to/backend/',
                        data: {
                            type: 'email'
                        }
                    }
                }
            }
        }
    });
});
</script>

后端部分:
<?php
// The code bellow demonstrates a simple back-end written in PHP

// Determine which field you want to check its existence
$isAvailable = true;
switch ($_POST['type']) {
    case 'email':
        $email = $_POST['email'];
        // Check the email existence ...
        $isAvailable = true; // or false
        break;

    case 'username':
    default:
        $username = $_POST['username'];
        // Check the username existence ...
        $isAvailable = true; // or false
        break;
}

// Finally, return a JSON
echo json_encode(array(
    'valid' => $isAvailable,
));


CopyRight © 2017 荒山本的官方网站 粤ICP备16049175号 All Right Service 网站地图(xml) 网站地图(html)