当前文章: 首页 >> 软件 >> 浏览器 >> HTML密码重设模板和form表单提交前验证
聚划算
«   2020年5月   »
123
45678910
11121314151617
18192021222324
25262728293031
网站分类
    海外云服务器CPS_轻量拓展全民云计算企业云服务器云盾证书
标签列表
最近发表
友站访问排行

HTML密码重设模板和form表单提交前验证

HTML密码重设模板和form表单提交前验证

代码:

<!DOCTYPE html>
<html>
<head>
    <title>密码重设</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<script type="application/javascript">
    function submit_check() {
        $pwd1 = $("#pwd1").val();
        $pwd2 = $("#pwd2").val();

        //检测密码是否为空
        if (0 >= $pwd1.length) {
            alert("密码不能为空!!!");
            return false;
        }
        //检测密码长度
        if (6 > $pwd1.length) {
            alert("密码太过简单!!!");
            return false;
        }
        //检测两次密码是否一致
        if ($pwd1 != $pwd2) {
            alert("两次密码不一致!!!");
            return false;
        }
        return true;
    }
</script>

<div class="container">
    <h2>密码重置</h2>
    <p>请在以下输入框输入新密码,单击提交进行密码重设:</p>
    <form action="password_reset.php" method="post" onsubmit="return submit_check();">
        <?php echo '<input type="hidden" name="id", value="' . $id . '" />'; ?>
        <?php echo '<input type="hidden" name="key", value="' . $key . '" />'; ?>
        <div class="form-group">
            <label for="usr">新密码:</label>
            <input type="password" class="form-control" name="password" placeholder="输入新密码" id="pwd1">
        </div>
        <div class="form-group">
            <label for="pwd">确认密码:</label>
            <input type="password" class="form-control" placeholder="再次输入新密码" id="pwd2">
        </div>
        <button type="submit" class="btn">提交</button>
    </form>
</div>

</body>
</html>


效果:






声明:本站原创文章,转载、复制、使用等请注明出处。
标题HTML密码重设模板和form表单提交前验证
作者jues
地址: http://blog.jues.org.cn/post/html-mi-ma-zhong-she-mo-ban-he-form-biao-dan-ti-jiao-qian-yan-zheng.html
1楼
  • 网站建设 2018-11-26 16:24:21  回复
  • 您好,麻烦加我qq:3460002950,我要购买友链

发表评论:

Powered By Z-BlogPHP 1.6.0 Valyria Powered By Z-BlogPHP © 2018 jues博客 Copyright Your WebSite.Some Rights Reserved.联系站长 Themes by jues

分享:

支付宝

微信