jQuery插件之Validate

最新推荐文章于 2022-11-27 20:12:49 发布

best-toby

最新推荐文章于 2022-11-27 20:12:49 发布

阅读量225

点赞数

分类专栏： jQuery插件文章标签： Validate

本文链接：https://blog.csdn.net/besttoby01/article/details/77840971

版权

jQuery插件专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Validate

1.功能

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。

2.使用

还是先导入jQuery，毕竟是在jQuery基础上开发的一套方法。导入的方法好多，百度的，菜鸟网的等之类的都有。

1）required：必填

如果没有填写东西，那么他就会在输入框的右下显示“请填写此字段”

但是这个你也可以更改，使其显示在输入框的右边

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery.js"></script>//引用本地的jQuery

    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js
"></script>//使用Validate插件
    <script src="messages_zh.js"></script>//引用本地的文件，这里是修改后面的内容
    <style>
        .error{
            color:red;
        }
    </style>
</head>

<body>
    <form id="formData" action="">
        <label for="txt1">用户名：</label>
        <input type="text" id="txt1" required/>
        <br/>
        <input type="submit" value="提交"/>
    </form>
<script>
    $.validator.setDefaults({
        submitHandler: function (){
            alert("验证成功");
        }
    });
    $("#formData").validate();
</script>
</body>
</html>

2.email、url、date、number、dateISO、digits、creditcard

分别是电子邮件地址、网址、日期、数字、日期格式、整数、信用卡号

可以直接使用“type = "XXX"”形式。

<input type="number" id="txt1" required/>

这里进行简单的验证。

3.equalTo 等于

一般使用在密码验证上，比如你申请一个新的账号，写密码时会要求你重新输入一遍密码，这里使用的比较多。

    <input type="number" id="txt1" required/>
    <input type="number" id="txt2" equalTo="txt1"/>

4.maxlength、minlength 、rangelength:[5,10] 最大长度、最小长度和长度在5到10之间的数

    <input type="number" id="txt1" maxlength="5"/>
    <input type="number" id="txt2" minlength="2"/>
    <input type="number" id="txt3" rangelength="5,10" />

输入的值得最大长度是5，输入的值的最小长度是2、输入的值的长度在5到10之间

5.range:[5,10]、max、min 输入的值在5到10之间、最大值、最小值d

    <input type="number" id="txt1" max="5"/>
    <input type="number" id="txt2" min="2"/>
    <input type="number" id="txt3" range="5,10" />

输入的最大值是5、输入的最小值是2、输入的值在5到10之间

best-toby

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录