bootstrap表单带验证

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gyz418/p/5342090.html

文章标签：

#javascript #ViewUI

本文介绍如何利用Bootstrap快速创建一个带有验证功能的用户注册表单。通过HTML、CSS及JavaScript实现表单输入验证，确保用户正确填写邮箱、用户名及密码。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="../bootstrap/html5shiv.min.bootstrap"></script>
    <script src="../bootstrap/respond.min.bootstrap"></script>
    <![endif]-->
    <script src="../scripts/jquery-1.12.2.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">

    <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
            <h2 class="page-header">注册</h2>
            <form class="form-horizontal" action="bootstrap表单带验证.html" method="get">
                <div class="form-group has-feedback">
                    <label for="email" class="col-sm-2 control-label">Email </label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="email" placeholder="Email" required>
                        <span class=""></span>
                    </div>
                </div>
                <div class="form-group has-feedback">
                    <label for="username" class="col-sm-2 control-label">username</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="username" placeholder="username" required>
                        <span class=""></span>
                    </div>
                </div>
                <div class="form-group has-feedback">
                    <label for="password" class="col-sm-2 control-label">password</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="password" placeholder="password" required>
                        <span class=""></span>
                    </div>
                </div>
                <p class="text-right">
                    <button id="btnSubmit" type="submit" class="btn btn-primary">submit</button>
                    <button type="reset" class="btn btn-danger">reset</button>
                </p>
            </form>
        </div>
    </div>

</div>
<script>
    function checkInput(txt){
        if(txt.val()==""){
//            alert(txt.parent().parent().html());  alert  html
            txt.parent().parent()           /*找到父类 先删除样式，再添加样式*/
                    .removeClass()
                    .addClass("form-group has-error has-feedback");
            txt.next().removeClass()
                    .addClass("glyphicon glyphicon-remove form-control-feedback");
            return false;
        }else{
            txt.parent().parent().removeClass().addClass("form-group has-success has-feedback");
            txt.next().removeClass().addClass("glyphicon glyphicon-ok form-control-feedback");
            return true;
        }
    }
    function checkBind(id){
        $(id).bind("blur", function () {
            checkInput(id);
        });
    }
    $().ready(function () {
        checkBind($("#email"));
        checkBind($("#username"));
        checkBind($("#password"));
    /*    $("#email").bind("change", function () {
            checkInput($("email"));
        });*/

     /*   $("#email").change(function () {checkInput($("#email"));});
        $("#username").change(function () {checkInput($("#username"));});
        $("#password").change(function () {checkInput($("#password"));});*/

        $("#btnSubmit").bind('click', function () {
            if(checkInput($("#email"))&&checkInput($("#username"))&&checkInput($("#password"))){
                return true;
            }
            return false;
        })
    });
</script>

</body>
</html>