Peachhh777 2022-10-30 06:35 采纳率: 71.4%
浏览 27
已结题

在html的form中使用JavaScript限制密码长度

关于在html的form中使用JavaScript限制密码长度
请问如何在html的form里实现:限制密码长度为九位字母以内?
已经在html中插入了jquery包,但是在js中输入限制密码长度的代码没有反应,谢谢各位了~

以下是我的代码
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Start the order</title>
    <link rel="stylesheet" href="order.css">
</head>
<body>
    <div id="container">
        <div id="login-wrapper">
    <div class="page">
        <h1>Login</h1>
        <form name="login-form" method="post" autocomplete="off">
            <p class="success login-success"></p>
            

            <label id="input">Username <span>Please enter your username</span></label>
            <input type="text" name="username" id="input">
            <p class="error username-error"></p>

            <label id="input">Password <span>Please enter your password</span></label>
            ****<input type="password" name="password" id="input">****
            <p class="error password-error"></p>

            <div id="select">
                <select name="select" placeholder="Please choose the size of the burger" id="select">
                    <option>Please choose the size of the burger</option>
                    <option>6oz Larger  7.00 euro</option>
                    <option>10oz Extra-Larger   9.00 euro</option>
                    <option class="pwd">16oz Supersize  17.50 euro</option>
                </select>
            </div>

            <div>Please choose the number of the burger</div>
        <input type="number"
        min="1";
        max="100"
        step="1"
        value="1" id="input">

        <input type="text" name="Discount Code" placeholder="Discount Code" id="input">

        <a href="menu.html">
            <input type="submit" name="login-submition" value="login" id="btn">
            <p class="error login-error"></p>
    </a>
    </div>
</div>
</div>
</div>
****<script type="text/javascript" src="jquery-3.1.1.min.js"></script>****
<script src="order.js"></script>
        </form>
</body>
</html>

javascript

function showError(errorElement, errorMessage){
    document.querySelector("." + errorElement).classList.add("display-error");
    document.querySelector("." + errorElement).innerHTML = errorMessage;
}

function clearError(){
    let errors = document.querySelectorAll(".error");
    for(let error of errors){
        error.classList.remove("display-error");
    }
}

let form = document.forms['login-form'];
form.onsubmit = function(event){

    clearError();

    if(form.username.value === ""){
        showError("username-error","Please check your username");
        return false;
    }

    if(form.password.value === ""){
        showError("password-error","Please check your password");
        return false;
    }

    event.preventDefault();
}

****function pankong(){
    var pwd = document.getElementsByName("pwd")[0].value;
}

if (pwd.length > 9){
    alert("Password should not be more than nine charators");
}else{
    var j = /^[0-9a-zA-Z]+$/;
    if(j.test(pwd)){
        document.tijiao.submit();
    }else{
        alert("Please enter in charactors");
    }
}****

if(window.history.replaceState){
    window.history.replaceState(null,null,window.location.href)
}
  • 写回答

3条回答 默认 最新

  • 人间小美味695 2022-10-30 07:25
    关注

    长度可以用maxlength属性,字母或数字用正则验证一下

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 11月23日
  • 已采纳回答 11月15日
  • 创建了问题 10月30日

悬赏问题

  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络,如何解决?
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构,按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分
  • ¥15 delphi webbrowser组件网页下拉菜单自动选择问题