weixin_44983534
若是前生未有缘
采纳率100%
2021-01-12 13:33

简单的jQuery表单验证失败

刚自学jQuery进行表单验证    就第一个用户名就失败了     按钮提交后直接就跳转了  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册账号</title>
    <link rel="stylesheet" type="text/css" href="css.css"/>
    <script type="text/javascript" src="script/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            //给注册绑定单击事件
            $("#sub_btn").click(function () {
                //获取用户输入框内容
             var usernameText = $("#username").val();
                //创建正则表达式
             var usernamePatt = /^\w{5,12}$/;
             if (!usernamePatt.test(usernameText)){
                $("span.errorMsg").text("用户名不合法");
                return false;
             }
                $("span.errorMsg").text("");
            });
        });
    </script>
    </style>
</head>
<body>

        <div class="form" id="center">
            <form action="http://localhost:8080">
                <label>用户名称:</label>
                <input class="itxt" type="text" name="username" placeholder="请输入用户名" autocomplete="off" >
                <span class="errorMsg"></span><br>
                <label>用户密码:</label>
                <input type="password" name="password" placeholder="请输入密码"><br>
                <label>确认密码:</label>
                <input type="password" name="repassword" placeholder="请再次输入密码"><br>
                <label>电子邮件:</label>
                <input type="text" name="email" placeholder="请输入电子邮件"><br>
                <label>验证码:</label>
                <input type="text" id="code" placeholder="请输入验证码"><br>
                <input type="submit" id="sub_btn" value="注册">
            </form>
        </div>
</body>
</html>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答

  • json_ligege JSON_L 3月前

    你的代码有两个问题:

    1.style标签不完整

    2.用户名称的输入框未加id,而jquery获取的时候使用的是id选择器;

    附修改后的代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册账号</title>
        <script type="text/javascript" src="../jquery-3.2.1.js"></script>
        <style></style>
    </head>
    <body>
    <div class="form" id="center">
        <form action="http://localhost:8080">
            <label>用户名称:</label>
            <input class="itxt" type="text" id="username" name="username" placeholder="请输入用户名" autocomplete="off">
            <span class="errorMsg"></span><br>
            <label>用户密码:</label>
            <input type="password" name="password" placeholder="请输入密码"><br>
            <label>确认密码:</label>
            <input type="password" name="repassword" placeholder="请再次输入密码"><br>
            <label>电子邮件:</label>
            <input type="text" name="email" placeholder="请输入电子邮件"><br>
            <label>验证码:</label>
            <input type="text" id="code" placeholder="请输入验证码"><br>
            <input type="submit" value="注册" id="sub_btn">
        </form>
    </div>
    <script type="text/javascript">
        $(function () {
            //给注册绑定单击事件
            $("#sub_btn").click(function () {
                //获取用户输入框内容
                var usernameText = $("#username").val();
                //创建正则表达式
                var usernamePatt = /^\w{5,12}$/;
                if (!usernamePatt.test(usernameText)) {
                    $("span.errorMsg").text("用户名不合法");
                    return false;
                }
                $("span.errorMsg").text("");
            });
        });
    </script>
    </body>
    </html>

    效果:

    点赞 评论 复制链接分享
  • weixin_44218644 朱澎波 3月前

    需要阻止下表单默认事件

    点赞 1 评论 复制链接分享
  • zhshchilss zhshchilss 3月前

    搜索一下onsubmit

    点赞 评论 复制链接分享