jQuery Validate简单使用

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。

官网:http://jqueryvalidation.org/

本文档对应jQuery Validate版本:1.19.1

用法

  1. 官网下载jQuery Validate,解压后找到dist/jquery.validate.min.js,放到项目中

  2. 网页中引入js库

    <script type="text/javascript" src="js/jquery-validate/jquery.validate.min.js"></script>
    
  3. 增加验证规则

    <script type="text/javascript">
    $("#loginForm").validate({
        rules: {
            username: {
            	required: true,
            	minlength: 6,
            	maxlength: 16
            },
            password: "required"
        }
    });
    </script>
    

    loginForm为表单的id

  4. 中文提示

    在解压后的文件中找到dist/localization/messages_zh.min.js,放到项目中并在页面中引入

    <script type="text/javascript" src="js/jquery-validate/messages_zh.min.js"></script>
    

默认校验规则

序号 规则 描述
1 required:true 必须输入的字段。
2 remote:“check.php” 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。
6 dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
7 number:true 必须输入合法的数字(负数,小数)。
8 digits:true 必须输入整数。
9 creditcard: 必须输入合法的信用卡号。
10 equalTo:"#field" 输入值必须和 #field 相同。
11 accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。
12 maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。
13 minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。
14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。
15 range:[5,10] 输入值必须介于 5 和 10 之间。
16 max:5 输入值不能大于 5。
17 min:10 输入值不能小于 10。

学习资料

https://www.runoob.com/jquery/jquery-plugin-validate.html

https://blog.csdn.net/u014800380/article/details/52106923

发布了7 篇原创文章 · 获赞 0 · 访问量 94

猜你喜欢

转载自blog.csdn.net/weixin_45581349/article/details/105493187