使用jQuery.Validate进行客户端验证（初级篇） 不使用微软验证控件的理由

使用jQuery.Validate进行客户端验证（初级篇） 不使用微软验证控件的理由

为什么不使用微软验证控件

在ASP.NET上，我们可以使用微软提供的验证控件来进行客户端验证。但是，我们使用微软验证控件的时候需要考虑以下几个问题：

1. 微软验证控件只能用于ASP.NET Web Forms，不能用于ASP.NET MVC；
2. 微软验证控件是基于服务端的验证，即使检测到错误，也需要提交表单才能显示错误信息，严重影响用户体验；
3. 微软验证控件只能提供基本的验证功能，扩展比较麻烦。

因此，我们可以使用jQuery.Validate进行客户端验证。

使用jQuery.Validate进行客户端验证

jQuery.Validate是目前比较流行的客户端验证插件之一。该插件提供了非常完善的API，可以进行复杂的验证。

引用jQuery和jQuery.Validate

为了使用jQuery.Validate，我们需要先引用jQuery和jQuery.Validate的文件。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>

编写HTML代码

在HTML中需要添加需要验证的控件，如下所示：

<form id="form1" method="post">
    <div>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" class="required" minlength="3" maxlength="10" />
    </div>
    <div>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" class="required" minlength="6" maxlength="16" />
    </div>
    <div>
        <label for="email">邮箱：</label>
        <input type="text" id="email" name="email" class="required email" />
    </div>
    <div>
        <label for="phone">手机号码：</label>
        <input type="text" id="phone" name="phone" class="required phone" />
    </div>
    <div>
        <input type="submit" value="提交" />
    </div>
</form>

编写JavaScript代码

在页面加载完成后，需要对表单进行验证：

$(function () {
    $("form").validate({
        rules: {
            username: {
                required: true,
                minlength: 3,
                maxlength: 10
            },
            password: {
                required: true,
                minlength: 6,
                maxlength: 16
            },
            email: {
                required: true,
                email: true
            },
            phone: {
                required: true,
                phone: true
            }
        },
        messages: {
            username: {
                required: "请输入用户名",
                minlength: "用户名长度不能少于3个字符",
                maxlength: "用户名长度不能大于10个字符"
            },
            password: {
                required: "请输入密码",
                minlength: "密码长度不能少于6个字符",
                maxlength: "密码长度不能大于16个字符"
            },
            email: {
                required: "请输入邮箱",
                email: "请输入正确的邮箱"
            },
            phone: {
                required: "请输入手机号码",
                phone: "请输入正确的手机号码"
            }
        }
    });
});

在上面的代码中，我们定义了表单中每个控件的验证规则，以及错误信息。通过$("form").validate()方法来初始化表单的验证功能。

示例说明

示例一：验证表单是否为空

<form id="form1" method="post">
    <div>
        <label for="name">用户名：</label>
        <input type="text" id="name" name="name" class="required" />
    </div>
    <div>
        <label for="email">邮箱：</label>
        <input type="text" id="email" name="email" class="required email" />
    </div>
    <div>
        <input type="submit" value="提交" />
    </div>
</form>

<script>
    $(function () {
        $("form").validate();
    });
</script>

在上面的代码中，如果用户名和邮箱都没有输入，那么点击提交按钮的时候，会提示填写用户名和邮箱信息。

示例二：验证密码长度

<form id="form1" method="post">
    <div>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" class="required" minlength="6" maxlength="16" />
    </div>
    <div>
        <input type="submit" value="提交" />
    </div>
</form>

<script>
    $(function () {
        $("form").validate();
    });
</script>

在上面的代码中，如果密码长度小于6个字符或超过16个字符，那么点击提交按钮的时候，会提示密码长度不能小于6个字符或超过16个字符。