JS实现的简单表单验证功能完整实例

2023年5月28日上午11:30 • JavaScript

下面是JS实现的简单表单验证功能完整实例的攻略。

标题

JS实现的简单表单验证功能完整实例

步骤说明

第一步：HTML部分

在HTML页面中，需要根据需求设置表单元素，包括表单元素的类型、属性以及相关样式。示例如下：

<!DOCTYPE html>
<html>
<head>
    <title>表单验证</title>
    <meta charset="utf-8">
</head>
<body>
    <form id="myform" action="#" method="post">
        <label>用户名：</label>
        <input type="text" id="username" name="username"><br>
        <label>密码：</label>
        <input type="password" id="password" name="password"><br>
        <label>确认密码：</label>
        <input type="password" id="repassword"><br>
        <input type="button" id="submitBtn" value="提交">
    </form>
    <script type="text/javascript" src="form.js"></script>
</body>
</html>

第二步：JavaScript部分

JavaScript代码部分是实现表单验证的核心部分。示例如下：

var btn = document.querySelector("#submitBtn"),
    username = document.getElementById("username"),
    password = document.getElementById("password"),
    repassword = document.getElementById("repassword");

// 点击提交按钮进行表单验证
btn.onclick = function() {
    if (username.value === "") {
        alert("请输入用户名！");
        return false;
    }
    if (password.value === "") {
        alert("请输入密码！");
        return false;
    }
    if (repassword.value === "") {
        alert("请确认密码！");
        return false;
    }
    if (password.value != repassword.value) {
        alert("两次密码不一致，请重新输入！");
        return false;
    }
    alert("提交成功！");
    return true;
}

第三步：运行验证

在浏览器中打开HTML页面，输入各个表单元素的内容，如果验证通过，则会弹出“提交成功”的弹窗。如果有表单元素为空或两次密码输入不一致，则会弹出相应的提示框。当全部表单都通过验证后，系统就会提交表单内容。

示例说明：

示例1：

现在要求用户输入用户名和密码，但不要求确认密码。如果用户名或密码为空，需要弹出提示框。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>表单验证</title>
    <meta charset="utf-8">
</head>
<body>
    <form id="myform" action="#" method="post">
        <label>用户名：</label>
        <input type="text" id="username" name="username"><br>
        <label>密码：</label>
        <input type="password" id="password" name="password"><br>
        <input type="button" id="submitBtn" value="提交">
    </form>
    <script type="text/javascript" src="form.js"></script>
</body>
</html>

var btn = document.querySelector("#submitBtn"),
    username = document.getElementById("username"),
    password = document.getElementById("password");

// 点击提交按钮进行表单验证
btn.onclick = function() {
    if (username.value === "") {
        alert("请输入用户名！");
        return false;
    }
    if (password.value === "") {
        alert("请输入密码！");
        return false;
    }
    alert("提交成功！");
    return true;
}

示例2：

现在要求用户输入用户名、密码和确认密码，并且验证两次密码输入是否一致。如果任意一个表单为空或两次密码输入不一致，则需要弹出相应的提示框。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>表单验证</title>
    <meta charset="utf-8">
</head>
<body>
    <form id="myform" action="#" method="post">
        <label>用户名：</label>
        <input type="text" id="username" name="username"><br>
        <label>密码：</label>
        <input type="password" id="password" name="password"><br>
        <label>确认密码：</label>
        <input type="password" id="repassword"><br>
        <input type="button" id="submitBtn" value="提交">
    </form>
    <script type="text/javascript" src="form.js"></script>
</body>
</html>

var btn = document.querySelector("#submitBtn"),
    username = document.getElementById("username"),
    password = document.getElementById("password"),
    repassword = document.getElementById("repassword");

// 点击提交按钮进行表单验证
btn.onclick = function() {
    if (username.value === "") {
        alert("请输入用户名！");
        return false;
    }
    if (password.value === "") {
        alert("请输入密码！");
        return false;
    }
    if (repassword.value === "") {
        alert("请确认密码！");
        return false;
    }
    if (password.value != repassword.value) {
        alert("两次密码不一致，请重新输入！");
        return false;
    }
    alert("提交成功！");
    return true;
}