niceValidator简介

niceValidator是一个非常好用的表单校验框架 官网

下面通过一个小的案例演示niceValidator的使用
具体需要的jar包 直接下载这个小案例的项目代码 就一目了然了
链接：https://pan.baidu.com/s/1_8Y9vDGtldBL8HCHHQISOw
提取码：k5ie

整个案例的结构：（由于使用了BootStrap框架所以有两个框架的引入）
表单校验框架niceValidator的使用入门_用户名

直接上代码 看代码里的注释：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>表单验证</title>

    <!-- Bootstrap -->
    <link href="./bootStrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="./bootStrap/js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="./bootStrap/js/bootstrap.min.js"></script>


    <!--
  引入插件相关文件
-->
    <link href="./validator/jquery.validator.css" rel="stylesheet">
    <script src="./validator/jquery-3.3.1.min.js"></script>
    <script src="./validator/jquery.validator.min.js"></script>
    <!--中文国际化文件-->
    <script src="./validator/local/zh-CN.js"></script>


    <style>
        .div1 {
            padding: 20px;
            padding-top: 60px;
            width: 400px;
            height: 500px;
            background: #1fbaf3;
            border-radius: 5px;
            box-shadow: 0 0 20px #0007f3;

            /*div居中显示*/
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -250px 0 0 -200px
        }

        /*设置placeholder属性*/
        ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
            font-size: 10px;
            color: red;
        }
        ::-moz-placeholder { /* Firefox 19+ */
            font-size: 10px;
            color: red;
        }
        :-ms-input-placeholder { /* IE 10+ */
            font-size: 10px;
            color: red;
        }
        :-moz-placeholder { /* Firefox 18- */
            font-size: 10px;
            color: red;
        }


    </style>
</head>
<body>

<div class="div1">
    <form class="form-horizontal ">
        <div class="form-group ">
            <label for="username" class="col-sm-3 control-label" >用户名</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名(2~10位字符)" data-rule="用户名:required;us"
                       data-rule-us="[/^\S{2,10}$/, '请检查用户名格式(2~10个字符)']">
                       
 <!--注释 data-rule="用户名:required;us"   required表示必须填写字段  并且附加限制us   us为  data-rule-us="[/^\S{2,10}$/, '请检查用户名格式(2~10个字符)']" 前面写正则 后面提示语句 data-rule-us="[/^\S{2,10}$/, '请检查用户名格式(2~10个字符)']"-->

            </div>
            <div class="col-sm-offset-3 col-sm-12">
                <span class="msg-box" for="username"></span>
            </div>
        </div>


        <div class="form-group">
            <label for="password" class="col-sm-3 control-label">密码</label>
            <div class="col-sm-8">
                <input type="password" name="password" class="form-control" id="password" placeholder="请输入密码(6~12位字母数字下划线)" data-rule="密码:required;ps"
                       data-rule-ps="[/^[a-zA-Z0-9_]{6,12}$/, '请检查密码格式']">
            </div>
            <div class="col-sm-offset-3 col-sm-12">
                <span class="msg-box" for="password"></span>
            </div>
        </div>



        <div class="form-group">
            <label for="conf_password" class="col-sm-3 control-label">确认密码</label>
            <div class="col-sm-8">
                <input type="password" class="form-control" id="conf_password" placeholder="请再次输入密码" data-rule="确认密码:required;match(password)" name="repassword">
                                                                                                
<!-- 注释 match(password) 括号内是name的属性值 表示要和上面的密码值一样才校验通过-->
            </div>
            <div class="col-sm-offset-3 col-sm-12">
                <span class="msg-box" for="conf_password"></span>
            </div>
        </div>

        <!--    <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> Remember me
                        </label>
                    </div>
                </div>
            </div>-->

        <br/>

        <div class="form-group">
            <div class="col-sm-12" STYLE="text-align: center">
                <button type="submit" class="btn btn-default">注册</button>
            </div>
        </div>h
    </form>
</div>
</body>
</html>

下面是效果：
表单校验框架niceValidator的使用入门_jquery_02
这里只是最简单的入门使用
想定制个性化的提示样式 可以参考官方文档