Bootstrap笔记----- validate表单验证04

1、准备工做

1.1下载地址：(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip)

2.2引入必要文件：下面箭头指向的

2.3编写表单  注意表单id  和 input框的name 这两个与验证想绑定的

<form id="form-registered">
                <div class="form-group">
                    <label class="control-label col-xs-2">姓名:</label>
                    <div class="col-xs-10">
                        <input type="text" name="username"  placeholder="注册用户名" class="form-control">
                    </div>
                </div>
                <br> <br>
                <div class="form-group">
                    <label class="control-label col-xs-2">密码:</label>
                    <div class="col-xs-10">
                        <input type="text" name="password"  placeholder="注册密码" class="form-control">
                    </div>
                </div>

                <br> <br>
                <button class="btn" id="btn-Registered">注册</button>

            </form>

3.3编写js并引入  下面是验证username 与password的js 验证成功后ajax提交

$(function () {
    $("#form-registered").bootstrapValidator({
        live: 'enabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证
        excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件，好比被禁用的或者被隐藏的
        submitButtons: '#btn-Registered',//指定提交按钮，若是验证失败则变成disabled，但我没试成功，反而加了这句话非submit按钮也会提交到action指定页面
        message: '通用的验证失败消息',//好像历来没出现过
        feedbackIcons: {//根据验证结果显示的各类图标
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {

            username: {
                validators: {
                    notEmpty: {//检测非空,radio也可用
                        message: '用户名不能为空'
                    },
                    stringLength: {//检测长度
                        min: 4,
                        max: 30,
                        message: '长度必须在4-30之间'
                    },
                    regexp: {//正则验证
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: '所输入的字符不符要求'
                    },
                    remote: {//将内容发送至指定页面验证，返回验证结果，好比查询用户名是否存在
                        url: '指定页面',
                        message: 'The username is not available'
                    },
                    different: {//与指定文本框比较内容相同
                        field: '指定文本框name',
                        message: '不能与指定文本框内容相同'
                    },
                    emailAddress: {//验证email地址
                        message: '不是正确的email地址'
                    },
                    identical: {//与指定控件内容比较是否相同，好比两次密码不一致
                        field: 'confirmPassword',//指定控件name
                        message: '输入的内容不一致'
                    },
                    date: {//验证指定的日期格式
                        format: 'YYYY/MM/DD',
                        message: '日期格式不正确'
                    },
                   choice: {//check控件选择的数量
                        min: 2,
                        max: 4,
                        message: '必须选择2-4个选项'
                    }
                }
            },
            password: {
                message: '秘密失败',
                validators: {
                    notEmpty: {
                        message: '密码不能为空'
                    }
                }
            },
        }
    });
    $("#btn-Registered").click(function () {//非submit按钮点击后进行验证，若是是submit则无需此句直接验证
        $("#form-registered").bootstrapValidator('validate');//提交验证
        if ($("#form-registered").data('bootstrapValidator').isValid()) {//获取验证结果，若是成功，执行下面代码
            alert("yes");//验证成功后的操做，如ajax
            var username=$("input[name='username']").val();
            var password=$("input[name='password']").val();
            $.ajax({
                type : 'post',
                url : '/shiro/addUser?username='+username+'&password='+password+'',
                dataType:'json',

                success : function(result) {
                    console.info(result);
                }
            })
        }
    });
});