jquery validate插件实现表单验证简单例子，适合新手入门。

效果图：

1.引入依赖文件jquery.js以及jquery.validate.1.8.1.js

<script src="/static/js/jquery.min.js"></script> #根据自身情况修改目录
<script src="/static/js/jquery.validate.1.8.1.js"></script>

jquery.validate.1.8.1.js下载地址：

https://download.csdn.net/download/weixin_39616603/11453349

2.编写html

<form action="#" method="post" id="regForm">
    <fieldset>
        <legend>jquery-validate表单校验验证</legend>
        <div class="item">
            <label for="username" class="item-label">用户名:</label>
            <input type="text" id="username" name="username" class="item-text" placeholder="设置用户名"
            autocomplete="off" tip="请输入用户名">
        </div>
        <div class="item">
            <label for="password" class="item-label">密码:</label>
            <input type="password" id="password" name="password" class="item-text" placeholder="设置密码"
            tip="长度为6-16个字符">
        </div>
        <div class="item">
            <label for="password" class="item-label">确认密码:</label>
            <input type="password" name="repassword" class="item-text" placeholder="设置确认密码">
        </div>
        <div class="item">
            <label for="amt" class="item-label">金额:</label>
            <input type="text" id="amt" name="amt" class="item-text" placeholder="交易金额"
            tip="交易金额必须大于0，且最多有两位小数">
        </div>
        <div class="item">
            <input type="submit" value="提交" class="item-submit">
        </div>
    </fieldset>
</form>

3.为表单元素绑定校验规则和校验信息

<script>
$(document).ready(function(){
    $("#regForm").validate({
        rules: {
            username:{
                required: true,
                minlength: 2
            },
            password:{
                required: true,
                minlength: 6,
                maxlength: 16
            },
            repassword:{
                required: true,
                equalTo: "#password"
            },
            amt: {
                required: true,
                amtCheck: true
            }
        },
        messages:{
            username:{
                required: "用户名不能为空",
                minlength: "用户名的最小长度为2"
            },
            password:{
                required: "密码不能为空",
                minlength: "密码长度不能少于6个字符",
                maxlength: "密码长度不能超过16个字符"
            },
            repassword:{
                required: "确认密码不能为空",
                equalTo: "确认密码和密码不一致"
            },
            amt: {
                required: "金额不能为空"
            }
        }
    });
});
</script>