js验证表单大全

针对“js验证表单大全”的完整攻略，我将从以下几个方面给出解答：

1. 准备工作：导入相关文件和初始化表单
2. 验证表单的常用方法：非空验证、长度验证、邮箱验证、手机验证等
3. 自定义验证方法
4. 示例说明

下面将逐一进行解答。

1.准备工作

首先，我们需要导入相关文件，一般来说，需要导入以下几个文件：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>

接着，我们需要初始化表单。初始化表单常用的方法是使用jQuery选择器选中表单，然后调用validate()方法，例如：

$(document).ready(function(){
    $("form").validate();
});

此时，表单已经被初始化了，可以进行验证了。

2.常用验证方法

接下来，我们可以调用表单验证的常用方法来实现表单验证。

2.1.非空验证

为了确保用户输入的内容不能为空，我们可以使用required属性来进行验证，例如：

<input type="text" name="username" required>

此时，表单中的username输入框就会被要求必须填写。

2.2.长度验证

如果用户输入的内容需要符合一定长度范围，我们可以使用minlength和maxlength属性来进行验证，例如：

<input type="password" name="password" minlength="6" maxlength="20">

此时，表单中的password输入框就要求密码长度在6到20之间。

2.3.邮箱验证

如果我们需要验证用户输入的邮箱是否符合格式要求，可以使用jQuery Validation插件中的email方法，例如：

<input type="email" name="email" required>

此时，表单中的email输入框就会被要求必须输入正确的邮箱格式。

2.4.手机验证

如果我们需要验证用户输入的手机号码是否符合格式要求，可以使用jQuery Validation插件中的mobile方法，例如：

<input type="tel" name="phone" required mobile>

此时，表单中的phone输入框就会被要求必须输入正确的手机号码。

3.自定义验证方法

除了使用常用方法进行表单验证之外，我们还可以自定义验证方法，来进行更加灵活的验证。

3.1.自定义方法

我们可以使用addMethod()方法来添加自定义方法，例如：

$.validator.addMethod("password", function(value, element) { 
    return /^[A-Za-z0-9]+$/g.test(value);
}, "密码只能由字母和数字组成");

这个自定义方法用于验证密码是否只由数字和字母组成。其中，第一个参数是方法名称，第二个参数是验证函数，第三个参数是验证未通过的提示信息。

3.2.自定义规则

我们也可以添加自定义规则，例如：

$.validator.addClassRules("password", {
    password: true,
    minlength: 6,
    maxlength: 20
});

这个自定义规则用于验证密码是否只由数字和字母组成，并且长度在6到20之间。其中，第一个参数是类名，第二个参数是规则，可以包含多个验证方法。

4.示例说明

下面给出两个示例，分别是登录表单验证和注册表单验证。

4.1.登录表单验证

<form>
    <label for="username">用户名：</label>
    <input type="text" name="username" id="username" required><br>
    <label for="password">密码：</label>
    <input type="password" name="password" id="password" minlength="6" maxlength="20"><br>
    <button type="submit">登录</button>
</form>
<script>
$(document).ready(function(){
    $("form").validate({
        rules: {
            username: {
                required: true
            },
            password: {
                required: true,
            }
        },
        messages: {
            username: {
                required: "请输入用户名"
            },
            password: {
                required: "请输入密码",
            }
        }
    });
});
</script>

此时的登录表单，要求用户名必填，密码必须在6到20个字符之间。

4.2.注册表单验证

<form>
    <label for="email">邮箱：</label>
    <input type="email" name="email" id="email" required><br>
    <label for="phone">手机号：</label>
    <input type="tel" name="phone" id="phone" required mobile><br>
    <label for="password">密码：</label>
    <input type="password" name="password" id="password" minlength="6" maxlength="20"><br>
    <button type="submit">注册</button>
</form>
<script>
$.validator.addMethod("password", function(value, element) { 
    return /^[A-Za-z0-9]+$/g.test(value);
}, "密码只能由字母和数字组成");
$.validator.addClassRules("password", {
    password: true,
    minlength: 6,
    maxlength: 20
});
$(document).ready(function(){
    $("form").validate({
        rules: {
            email: {
                required: true,
                email: true
            },
            phone: {
                required: true,
                mobile: true
            },
            password: {
                required: true,
            },
        },
        messages: {
            email: {
                required: "请输入邮箱",
                email: "请输入正确的邮箱"
            },
            phone: {
                required: "请输入手机号码",
                mobile: "请输入正确的手机号码"
            },
            password: {
                required: "请输入密码",
            },
        }
    });
});
</script>

此时的注册表单，要求邮箱和手机号必填，且符合相应的格式要求，密码只能由数字和字母组成，且长度在6到20个字符之间。

综上所述，以上就是关于“js验证表单大全”的完整攻略。