jquery validate使用

最新推荐文章于 2022-11-23 22:00:29 发布

wangc_gogo

最新推荐文章于 2022-11-23 22:00:29 发布

阅读量381

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/wangc_gogo/article/details/90897135

版权

js 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
    <script>
        $.validator.setDefaults({
            submitHandler: function() {
                alert("提交事件!");
            }
        });
        $().ready(function() {
            $("#commentForm").validate();
        });
    </script>
    <style>
        .error{
            color:red;
        }
    </style>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
    <fieldset>
        <legend>输入您的名字，邮箱，URL，备注。</legend>
        <p>
            <label for="cname">Name (必需, 最小两个字母)</label>
            <input id="cname" name="name" minlength="2" type="text" required>
        </p>
        <p>
            <label for="cemail">E-Mail (必需)</label>
            <input id="cemail" type="email" name="email" required>
        </p>
        <p>
            <label for="curl">URL (可选)</label>
            <input id="curl" type="url" name="url">
        </p>
        <p>
            <label for="ccomment">备注 (必需)</label>
            <textarea id="ccomment" name="comment" required></textarea>
        </p>
        <p>
            <input class="submit" type="submit" value="Submit">
        </p>
    </fieldset>
</form>
</body>
</html>

通过调试工具查看，错误消息提示是在input下追加的label

<style>
//所有错误信息提示显示红色
    .error{
        color:red;
    }
//将错误提示信息换行
    #cname + label{
        display: block;
    }
</style>

之定义的validate名称放在type属性上比如：

<p>
    <label for="cname">Name (必需, 最小两个字母)</label>
    <input id="cname" type="testgo" name="name"  required>
</p>

自定义的校验：

jQuery.validator.addMethod("testgo",function (value, element) {
    return this.optional(element) || value.length>20;
},"自定义校验")

wangc_gogo

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery validate使用

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="http://static.runoob.com/assets/jquery-validation-...
复制链接

扫一扫