jquery----用户密码验证

最新推荐文章于 2024-06-11 06:30:23 发布

weixin_30929195

最新推荐文章于 2024-06-11 06:30:23 发布

阅读量239

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yanxiaoge/p/10574610.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业1</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <style>
        .container {
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <form action="#"  novalidate>
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" class="form-control" id="username" placeholder="username">
                    <span id="helpBlock" class="help-block"></span>
                </div>
                <div class="form-group">
                    <label for="Password">密码</label>
                    <input type="password" class="form-control" id="Password" placeholder="Password">
                    <span id="helpBlock2" class="help-block"></span>
                </div>
                <button type="submit" class="btn btn-default submit">提交</button>
            </form>
        </div>
    </div>
</div>
<script src="jquery.min.js"></script>
<script src="bootstrap.js"></script>
<script>
    $(".submit").on("click",function () {
        $("form .form-group").removeClass("has-error");
        $("form span").text("");
        $(":input").each(function () {
            if ($(this).val().length===0){
                console.log($(this).next().html())
                console.log($(this).prev()[0].innerHTML)
                var name =  $(this).prev().text();
                $(this).parent().addClass("has-error");
                $(this).next().text(name+"不能为空");
                return false
            }
        });
    return false
    })


</script>
</body>
</html>

转载于:https://www.cnblogs.com/yanxiaoge/p/10574610.html