jQuery插件之Validate

来源：互联网发布：腰部按摩器知乎编辑：程序博客网时间：2024/06/05 03:05

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之间

阅读全文

0 0