Bootstrap Validator Demo 

<!DOCTYPE html>
<html>

<!-- http://localhost.zero.com:10000/BootstrapValidatorDemo.html -->
<head>
    <title>Bootstrap Validator Demo</title>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">

    <meta name="author" content="Louis"/>
    <meta name="keywords" content="874 words, alice"/>
    <meta name="description" content="150 words"/>
    <meta name="renderer" content="webkit|ie-comp|ie-stand"/>

    <link rel="stylesheet" href="lib/bootstrap-3.3.5/css/bootstrap.css"/>
    <link rel="stylesheet" href="lib/bootstrapvalidator-0.5.3/css/bootstrapValidator.css"/>
    <link rel="stylesheet" href="css/DefaultStyle.css"/>

    <style type="text/css">
        #form1 {
            width: 300px; padding: 20px; margin: 10px auto; border: 1px solid rgb(216,216,216); 
        }
    </style>
</head>

<body>
<form id = "form1" onsubmit="return false;">
    <span id="spanResult">Result</span>
    <div class="form-group"> 
        <label>User ID</label> 
        <input type="text" class="form-control" name="userId" value=""/> 
    </div> 
    <div class="form-group"> 
        <label>User Name</label> 
        <input type="text" class="form-control" name="userName" value="AA张三"/> 
    </div> 
    <div class="form-group"> 
        <label>Email address</label> 
        <input type="text" class="form-control" name="email" value="alice@g.cn"/> 
    </div> 
    <div class="form-group"> 
        <label>Logo image</label> 
        <input name="imgLogo" type="file"/>
    </div>

    <div class="form-group"> 
        <button id="btnSubmit" class="btn btn-primary">Submit</button> 
    </div>        
</form>

<!-- Note: bootstrap-3.3.5 should includs font folder -->
<script type="text/javascript" src="lib/jquery-1.11.3.js"></script>
<script type="text/javascript" src="lib/bootstrap-3.3.5/js/bootstrap.js"></script>
<script type="text/javascript" src="lib/bootstrapvalidator-0.5.3/js/bootstrapValidator.js"></script> 
<script type="text/javascript" src="js/Utils.js"></script>

<script type = "text/javascript">
    $(function() {
        init();
    });

    function init() {
        attachButtonEvent();
        setFormValidator();
    }

    function attachButtonEvent() {
        $("#btnSubmit").click(function() {
            $('#form1').bootstrapValidator("validate");
            //$('#form1').data('bootstrapValidator').validate();  

            if ($('#form1').data('bootstrapValidator').isValid()) {
                getUser1();
            }
        });
    }

    function getUser1() {
        $.ajax({
            type: "GET",
            url: "/SpringRestDemoAPI/dummy/getUser1",
            data: $('#form1').serialize(), //e.g. 'userId=112&userName=Alice广东'
            success: function (result) {
                //debugger;
                $("#spanResult").text(result.data.userName);
            }
        });
    }

    function setFormValidator() {
        $('#form1').bootstrapValidator({
            message: 'This value is not valid',
            submitButtons: "#btnSubmit",
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                userId: {
                    message: 'UserID 验证失败',
                    validators: {
                        notEmpty: {
                            message: 'UserID 不能为空'
                        }
                    }
                },
                userName: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱地址不能为空'
                        },
                        emailAddress: {}
                    }
                },
                imgLogo: {
                    validators: {
                        notEmpty: {
                            message: '请选择Logo图片(jpg,png)'
                        },
                        file: { 
                            extension: 'jpg,png'
                        }
                    }
                }
            }
        });
    }
</script>

</body>
</html>

 

posted @ 2018-04-08 08:27  Zenna  阅读(213)  评论(0)    收藏  举报