js表单验证实例讲解

下面是一份关于“JS表单验证实例讲解”的攻略，包括两个示例说明。

1. 什么是JS表单验证？

JS表单验证是一种验证表单数据输入是否符合规范的技术，它可以帮助开发者避免用户输入错误的数据，提高网站的安全性和易用性。

2. JS表单验证的实现方法

通常，JS表单验证可以通过以下方法实现：

使用HTML5表单元素的验证功能：例如使用<input>元素的required、pattern等属性。
使用JS编写表单验证函数：例如在表单提交时，使用JS代码检查用户是否填写了必填项、输入是否符合特定规范。

以下是一个简单的示例，演示如何使用JS编写表单验证函数。此示例检查用户是否在表单中填写了必填项并且输入是否格式正确。

<!DOCTYPE html>
<html>
<head>
    <title>表单验证</title>
    <script>
        function validate() {
            // 获取表单元素
            var name = document.forms["myForm"]["name"];
            var email = document.forms["myForm"]["email"];

            // 验证必填项是否有内容
            if (name.value == "") {
                alert("请输入您的姓名！");
                name.focus();
                return false;
            }
            if (email.value == "") {
                alert("请输入您的电子邮件地址！");
                email.focus();
                return false;
            }

            // 验证电子邮件地址是否合法
            var email_pattern = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
            if (!email_pattern.test(email.value)) {
                alert("请输入有效的电子邮件地址！");
                email.focus();
                return false;
            }

            // 验证通过
            alert("验证通过！");
            return true;
        }
    </script>
</head>
<body>
    <form name="myForm" onsubmit="return validate()">
        <label>姓名：</label>
        <input type="text" name="name"><br><br>
        <label>电子邮件地址：</label>
        <input type="text" name="email"><br><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

在上面的示例中，我们使用了onsubmit事件来触发验证函数。函数中使用document.forms方法获取表单元素，检查是否输入内容，以及验证电子邮件地址格式是否正确。

3. 示例说明

示例一

假设我们有一个注册表单，要求用户输入用户名、密码、确认密码和电子邮件地址。这些输入框需要进行以下验证：

用户名：输入不能为空且长度不能超过20个字符。
密码：输入不能为空且长度不能少于6个字符。
确认密码：输入不能为空且必须和密码输入框中的内容相同。
电子邮件地址：输入不能为空且必须为有效的电子邮件地址。

下面是一个实现这些验证功能的示例代码：

<!DOCTYPE html>
<html>
    <head>
        <title>注册表单</title>
        <script>
            function validate() {
                var username = document.forms["myForm"]["username"];
                var password = document.forms["myForm"]["password"];
                var confirm_password = document.forms["myForm"]["confirm_password"];
                var email = document.forms["myForm"]["email"];

                // 验证用户名
                if (username.value.trim() == "") {
                    alert("请输入用户名！");
                    username.focus();
                    return false;
                }
                if (username.value.length > 20) {
                    alert("用户名长度不能超过20个字符！");
                    username.focus();
                    return false;
                }

                // 验证密码
                if (password.value.trim() == "") {
                    alert("请输入密码！");
                    password.focus();
                    return false;
                }
                if (password.value.length < 6) {
                    alert("密码长度不能少于6个字符！");
                    password.focus();
                    return false;
                }

                // 验证确认密码
                if (confirm_password.value.trim() == "") {
                    alert("请再次输入密码！");
                    confirm_password.focus();
                    return false;
                }
                if (confirm_password.value != password.value) {
                    alert("两次输入的密码不一致！");
                    confirm_password.focus();
                    return false;
                }

                // 验证电子邮件地址
                var email_pattern = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
                if (email.value.trim() == "") {
                    alert("请输入电子邮件地址！");
                    email.focus();
                    return false;
                }
                if (!email_pattern.test(email.value)) {
                    alert("请输入有效的电子邮件地址！");
                    email.focus();
                    return false;
                }

                alert("验证通过！");
                return true;
            }
        </script>
    </head>
    <body>
        <form name="myForm" onsubmit="return validate()">
            <label>用户名：</label>
            <input type="text" name="username"><br><br>
            <label>密码：</label>
            <input type="password" name="password"><br><br>
            <label>确认密码：</label>
            <input type="password" name="confirm_password"><br><br>
            <label>电子邮件地址：</label>
            <input type="text" name="email"><br><br>
            <input type="submit" value="注册">
        </form>
    </body>
</html>

在这个示例中，我们定义了一个名为validate()的函数，该函数内部执行了以上各项验证，并通过alert()方法输出是否验证通过。

示例二

假设我们需要验证用户在输入“微信号”时，只能输入由2-5个字母、数字、或下划线组成的内容。为了解决这个问题，我们可以使用JS正则表达式。

下面是使用JS正则表达式实现这个功能的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>微信号输入验证</title>
        <script>
            function validate() {
                var wechat = document.forms["myForm"]["wechat"];

                // 验证微信号
                var wechat_pattern = /^\w{2,5}$/;
                if (!wechat_pattern.test(wechat.value)) {
                    alert("微信号格式不正确！");
                    wechat.focus();
                    return false;
                }

                alert("验证通过！");
                return true;
            }
        </script>
    </head>
    <body>
        <form name="myForm" onsubmit="return validate()">
            <label>微信号：</label>
            <input type="text" name="wechat"><br><br>
            <input type="submit" value="验证">
        </form>
    </body>
</html>

在这个示例中，我们定义了一个名为wechat_pattern的正则表达式来验证微信号的输入内容。如果输入内容不符合这个规则，就会出现验证失败，并弹出一条警告信息。