jquery validate 小demo

方便学习:

直接上代码:

ceshi.html:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery validation ceshi</title>
<script src="lib/jquery-1.8.3.js" type="text/javascript"></script>
<script src="dist/jquery.validate.min.js"></script>
<script src="dist/additional-methods.min.js"></script>
<script src="localization/messages_zh.js"></script>
<script type="text/javascript">
    $(function() {
        $.ajaxSetup({
            cache:false // 关闭ajax的相应缓存
        })
        $("#commentForm").validate({
            rules:{
                loginName:{required:true,remote: 'ceshi.json'}
               },
               messages:{
                   loginName:{remote:"登录名已被占用,请更换"}
               }
        });
    });
</script>
<style>
    label.error{
        color:red;
        font-size:12px;
    }
</style>
</head>
<body>
    <form class="cmxform" id="commentForm" method="get" action="">
        <fieldset>
            <legend >填写表单,进行测试</legend>
            <p>
                <label for="cname">Name名称 (required, at least 2 characters)</label>
                <input id="cname" name="loginName" minlength="2" required type="text" />
            <p>
                <label for="cemail">E-Mail邮箱 (required)</label>
                <input id="cemail" name="email" type="email" required />
            </p>
            <p>
                <label for="curl">URL地址 (optional)</label>
                <input id="curl" name="url" value="" type="url" />
            </p>
            <p>
                <label for="ccomment">简介(required)</label>
                <textarea id="ccomment" name="comment" required></textarea>
            </p>
            <p>
                <button class="submit" type="submit">提交</button>
            </p>
        </fieldset>
    </form>
</body>
</html>

ceshi.json:

false

直接从官网:http://bassistance.de/jquery-plugins/jquery-plugin-validation/

down下来文件夹基本相同,对应一下文件路径就可以了....

原文地址:https://www.cnblogs.com/tv151579/p/3299533.html