表单验证与前端交互-优快云博客

本文链接：https://blog.youkuaiyun.com/inter_native/article/details/78245834

本文介绍了一个使用HTML和jQuery实现的表单验证案例。该案例涵盖了电子邮件格式、昵称长度及密码强度的有效性检查，并通过图标反馈验证结果。此外，还实现了两次密码输入的一致性校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.min.js"></script>
    <style>
        table {
            border: 1px solid #999;
            border-collapse: collapse;
        }

        td {
            padding: 10px;
            height: 50px;
            border: 1px solid #999;
        }

        tr td:first-child {
            text-align: right;
            background-color: aqua;
        }

        input {
            background-color: aqua;
            border: 1px solid #999;
            float: left;
        }

        div {
            display: inline;
            float: left;
            margin-left: 10px;
        }

        button {
            width: 100px;
            margin-left: 250px;
            margin-top: 10px;
        }

        img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
            margin-top: 5px;
        }
    </style>
    <script>
        $(function () {
            $("img").hide();
            $("#email").blur(function () {
                $("img").hide();
                /*验证emial*/
                if ($("#email").val().indexOf("@") != -1) {
                    $("#dui").show();
                    $("#emid").text("用户可用");
                } else {
                    $("#cuo").show();
                    $("#emid").text("Email错误");
                }
            });
            /*验证昵称*/
            $("#name").blur(function () {
                if ($("#name").val().length < 4) {
                    $("#nameid").text("用户输入信息错误");
                } else {
                    $("#nameid").text("用户输入正确");
                }
            });
            /*验证密码格式*/
            var $pass = "";
            $("#password").blur(function () {
                if ($("#password").val().length < 6) {
                    $("#pass").text("用户密码不可用");
                } else {
                    $pass = $("#password").val();
                    $("#pass").text("用户密码可用");
                }
            });
            /*验证两次密码是否一致*/
            $("#repass").blur(function () {
                if ($("#repass").val() == $pass) {
                    $("#press").text("用户密码输入正确");
                } else {
                    $("#press").text("用户两次密码不一致");
                }
            });
            /*验证点击*/
            $("#add").click(function () {
                /*表单符合要求*/
                if ($("#email").val().indexOf("@") != -1 && $("#name").val().length >= 4 && $("#password").val().length >= 6 && $("#repass").val() == $pass) {
                    alert("用户表单符合要求");
                } else {
                    alert("用户表单有误");
                }
            });
        })

    </script>
</head>
<body>

<table>
    <tr>
        <td>请填写你的Eamil地址：</td>
        <td><input type="text" id="email">
            <div>请填写有效的Email地址，在下一步您将用此邮箱接收验邮件。<br><img src="cuo.gif" id="cuo">
                <img src="dui.gif" id="dui"><span id="emid"></span></div>
        </td>
    </tr>
    <tr>
        <td>设置您在当当网的昵称：</td>
        <td><input type="text" id="name">
            <div>您的昵称可以由小写英文字母、中文、数字组成。<br>长度4-20个字符，一个汉字为两个字符。<br><span id="nameid"></span></div>
        </td>
    </tr>
    <tr>
        <td>设置密码：</td>
        <td><input type="password" id="password">
            <div>您的密码可以由大小写英文字母，数字组成，长度6-20位<br><span id="pass"></span></div>
        </td>
    </tr>
    <tr>
        <td>再次输入您设置的密码:</td>
        <td><input type="password" id="repass">
            <div><span id="press"></span></div>
        </td>
    </tr>
</table>

<button id="add">注册</button>
</body>
</html>

Jquery表单验证