j2ee 简单网站搭建：（八）使用 jquery-validate 实现页面验证入门-CSDN博客

为什么80%的码农都做不了架构师？>>>

jquery validate 除基本的验证外，可以通过自己定义验证方法实现开发者自己的验证逻辑。jquery validate 的验证是通过对需要验证的 form 进行绑定，然后对绑定的 form 中的对应控件定义验证规则，例如不可控、输入数字或者自定义验证函数，在被绑定的 form 进行提交 submit 时进行验证，如果不满足条件会阻止提交并紧跟控件显示错误信息，因此无论是被绑定的 form 还是需要验证的控件都需要定义 id 和 name 属性，并且两个属性的值应该保持一致。

jquery 核心库版本 v3.1.0
jquery validate 版本 v1.16.0

jquery validate 的官方网址为 https://jqueryvalidation.org/
jquery 的官方网址为 http://jquery.com/
请下载两个 javascript 库的压缩包版本，本例中 jquery 和 jquery validate 两个库都放在 src/main/webapp/vendor 文件夹下，每个库单独存放各自文件夹，加入后如下图所示：

一建立用来测试的 html 页面，本例中使用 jquery-validate.html 页面，页面中主要添加以下内容:

1 在 html 页面头部引用的 javascript 文件。
2 在页面最下方 </body> 节点上方加入对 jquery 和 jquery validate 的引用和 javascript 代码逻辑。参看众多 javascript 代码写在 html 页面最下边的原因是提升页面加载速度，如果 JavaScript 执行时间长就会出现白页面，但将代码放在下边可以将页面整体显示后再执行 javascript 代码，提升用户感知。本例的页面中包含最普通的不能为空验证以及自定义用户名是否存在的方法进行验证的例子，其它验证数字范围、输入必须是数字等验证请自行在网上查找向相关资料。

<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>jquery - validate 验证</title>

</head>

<body>

    <form id="loginform" name="loginform" role="form" method="post">
        <fieldset>
            <div class="form-group">
                <input placeholder="username" id="username" name="username" type="text" autofocus>
            </div>
            <div class="form-group">
                <input placeholder="password" id="password" name="password" type="password">
            </div>
            <input type="submit" id="loginbutton" name="loginbutton" value="login" />
        </fieldset>
    </form>                 

    <!-- jQuery -->
    <script src="vendor/jquery/jquery.min.js"></script>

    <!-- jquery-validation JavaScript -->
    <script src="vendor/jquery-validation/jquery.validate.min.js"></script>
    <script src="vendor/jquery-validation/localization/messages_zh.min.js"></script>
    
    <script type="text/javascript">
    jQuery.validator.addMethod("is_password_complex_enough", function (value, element) { // 密码复杂度是否足够
        var passwordRegular = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}$/; // 密码中必须包含字母、数字、特殊字符，至少8个字符，最多30个字符
        return this.optional(element) || passwordRegular.test(value); // 当元素值不为空并且符合规则返回 true
    }, "8到30位，必须包含字母、数字、特殊字符");
        
    $(document).ready(function() {
        $( "#loginform" ).validate({
            rules : {
                username: "required",
                password: {required: true, is_password_complex_enough: true}, // 当 is_password_complex_enough 返回的值是 true 时验证通过
                captcha: "required"
            }
        });     
               
    }); 
    </script>
</body>
</html>