当前文章: 首页 >> 软件 >> 浏览器 >> HTML密码重设模板和form表单提交前验证
«   2019年10月   »
123456
78910111213
14151617181920
21222324252627
28293031
网站分类
控制面板
您好,欢迎到访网站!
  查看权限
标签列表
最近发表

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.5.2 Zero Powered By Z-BlogPHP © 2018 jues博客 Copyright Your WebSite.Some Rights Reserved.联系站长 Themes by jues