bootstrap之invalid-feedback

表单检验提示框

代码

 <form  target="addacform" action="/zhou/register" id="addaccountform" name="addaccountform" method="post" onsubmit="return checkzhucepasswd()" >
                        <div class="form-group">
                            <label  class="control-label">账号:</label>
                            <input type="text" class="form-control" id="accountform" name="accountname" >
                            <div class="invalid-feedback">账号不能为空</div>
                        </div>
                        <div class="form-group">
                            <label  class="control-label">真实姓名:</label>
                            <input type="text" class="form-control" id="truenameform"  name="name" >
                            <div class="invalid-feedback">姓名不能为空,且大于等于两个字符</div>
                        </div>
                        <div class="form-group">
                            <label  class="control-label">请输入密码:</label>
                            <input type="password" class="form-control" id="newpasswdform" name="password" onkeyup="value=value.replace(/[^A-Za-z0-9]/g,'')" onpaste="value=value.replace(/^A-Za-z0-9]/g,'')" oncontextmenu = "value=value.replace(/[^A-Za-z0-9]/g,'')" onblur="value=value.replace(/[^A-Za-z0-9]/g,'')" autocomplete="off">
                            <div class="invalid-feedback">密码必须在6~10位之间</div>
                        </div>
                        <div class="form-group">
                            <label  class="control-label">请输入确认密码:</label>
                            <input type="password" class="form-control" id="new2passwdform" name="new2passwd" onkeyup="value=value.replace(/[^A-Za-z0-9]/g,'')" onpaste="value=value.replace(/^A-Za-z0-9]/g,'')" oncontextmenu = "value=value.replace(/[^A-Za-z0-9]/g,'')" onblur="checkeqpasswd()" autocomplete="off">
                            <div class="invalid-feedback">两次密码必须相同 且在6~10位之间</div>
                        </div>
                        <div class="form-group">
                            <label  class="control-label">请输入部门:</label>
                            <select name="department" id="departmentform" class="form-control">
                                <option value="XXX1">XXXX1</option>
                                <option value="XXX2">XXX2</option>
                                <option value="XXX3">XXX3</option>
                            </select>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary" id="accountzc">确定</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </form>




<!--注册新用户-->
<script>

    $(function () {
        var flagAccount=false;
        var flagTure=false;
        var flagPas=false;
        var flagPass=false;
        /*验证用户名*/
        var accountForm,truenameForm,passWordForm,passWordForms;
        /*验证工资号*/
        $("#accountform").change(function(){
            accountForm=$("#accountform").val();
            if(accountForm.length<3){
                $("#accountform").removeClass("form-control is-valid")
                $("#accountform").addClass("form-control is-invalid");
                flagAccount=false;
            }else{
                $("#accountform").removeClass("form-control is-invalid")
                $("#accountform").addClass("form-control is-valid");
                flagAccount=true;
            }
        })
        /*验证姓名*/
        $("#truenameform").change(function(){
            truenameForm=$("#truenameform").val();
            if(truenameForm.length<2){
                $("#truenameform").removeClass("form-control is-valid")
                $("#truenameform").addClass("form-control is-invalid");
                flagTure=false;
            }else{
                $("#truenameform").removeClass("form-control is-invalid")
                $("#truenameform").addClass("form-control is-valid");
                flagTure=true;
            }
        })
        /*验证密码*/
        $("#newpasswdform").change(function(){
            passWordForm=$("#newpasswdform").val();
            if(passWordForm.length<6||passWordForm.length>10){
                $("#newpasswdform").removeClass("form-control is-valid")
                $("#newpasswdform").addClass("form-control is-invalid");
                flagPas=false;
            }else{
                $("#newpasswdform").removeClass("form-control is-invalid")
                $("#newpasswdform").addClass("form-control is-valid");
                flagPas=true;
            }
        })
        /*验证确认密码*/
        $("#new2passwdform").change(function(){
            passWordForms=$("#new2passwdform").val();
            if((passWordForm!=passWordForms)||(passWords.length<6||passWords.length>10)){
                $("#new2passwdform").removeClass("form-control is-valid")
                $("#new2passwdform").addClass("form-control is-invalid");
                flagPass=false;
            }else{
                $("#new2passwdform").removeClass("form-control is-invalid")
                $("#new2passwdform").addClass("form-control is-valid");
                flagPass=true;
            }
        })
        $("#accountzc").click(function(){
            if(flagAccount&&flagTure&&flagPas&&flagPass){
                alert(flagAccount&&flagTure&&flagPas&&flagPass)
                return true;
            }else{
                if(!flagAccount){
                    $("#accountform").addClass("form-control is-invalid");
                }
                if(!flagTure){
                    $("#truenameform").addClass("form-control is-invalid");
                }
                if(!flagPas){
                    $("#newpasswdform").addClass("form-control is-invalid");
                }
                if(!flagPass){
                    $("#new2passwdform").addClass("form-control is-invalid");
                }
                return false;
            }
        })
    })

  $("#accountzc").click(function () {
        $("#addaccountform").ajaxForm(function (data) {
            if (data==200){
                setTimeout(
                    function(){
                        xtip.msg('新增用户成功',{icon:'s'})
                    },100);
                setTimeout(function(){window.location.reload(); },800);
                // alert('新增用户成功');
                // window.location.reload();
            }else if(data==0){
                setTimeout(
                    function(){
                        xtip.msg('新增用户失败',{icon:'e'})
                    },100);
                setTimeout(function(){window.location.reload(); },800);
                // alert("新增用户失败");
                // window.location.reload();
            }else if (data==1){
                setTimeout(
                    function(){
                        xtip.msg('该账户已存在',{icon:'w'})
                    },100);
                setTimeout(function(){window.location.reload(); },800);
                // alert("该账户已存在");
                //  window.location.reload();
            }
        })
    })

</script>