开发者社区> codingcoge> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery之validate验证表单

简介: 访问jQuery validate官网下载最新插件 https://jqueryvalidation.org/ validate是用来验证表单的 以前我们都是用js手动验证 现在可以通过这个插件直接调用别人写好的方法 更加简单方便 validate.
+关注继续查看

访问jQuery validate官网下载最新插件
https://jqueryvalidation.org/

validate是用来验证表单的
以前我们都是用js手动验证 现在可以通过这个插件直接调用别人写好的方法 更加简单方便
validate.js是建立在jquery之上的,所以得先导入jquery的类库

我是下载到本地了的jQuery和validate
然后直接引用

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

validate主要有三步操作
1. 表单.validate()表示调用该插件
2. rules:定义规则 操作对象是表单内元素
3. messages:当违反规则的时候提示错误 操作对象是表单内元素
完整的:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
        <!--validate.js是建立在jquery之上的,所以得先导入jquery的类库-->
        <script type="text/javascript" src="../../js/jquery.validate.min.js" ></script>

        <script>
            $(function(){
                $("#checkForm").validate({
                    rules:{
                        username:{
                            required:true,
                            minlength:6
                        },
                        password:{
                            required:true,
                            digits:true,
                            minlength:6
                        }
                    },
                    messages:{
                        username:{
                            required:"用户名不能为空!",
                            minlength:"用户名不得少于6位!"
                        },
                        password:{
                            required:"密码不能为空!",
                            digits:"密码必须是整数!",
                            minlength:"密码不得少于6位!"
                        }
                    }
                });
            });
        </script>

    </head>
    <body>
        <form action="#" id="checkForm">
            用户名:<input type="text" name="username" /><br />
            密码:<input type="password" name="password"/><br />
            <input type="submit"/>
        </form>
    </body>
</html>

效果图:
这里写图片描述

规则其实更多 : 可以参考

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-231998/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]  输入长度必须介于 510 之间的字符串(汉字算一个字符)。
15  range:[5,10]    输入值必须介于 510 之间。
16  max:5   输入值不能大于 517  min:10  输入值不能小于 10

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
20款美化网站的 jQuery Lightbox 灯箱插件
  jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频 和其它内容(使用模式窗口)。如果你是一个开发人员,你必须拥有 jQuery 灯箱插件集合,因为有一部分的客户会要求他们的网站看起来更有吸引力和视觉冲击力。
1533 0
Flexslider - 响应式的 jQuery 内容滚动插件
  FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果。这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发中试试。
949 0
FancyBox - 经典的 jQuery Lightbox 插件
  FancyBox 是一款非常优秀的弹窗插件,能够为图片、HTML 内容和其它任务的多媒体内容提供优雅的弹出缩放效果。作为是最流行的 Lightbox 插件之一,可以通过 fitToView 实现自适应功能。
844 0
Infinite Scroll - jQuery & WP 无限滚动插件
  无限滚动(Infinite Scroll)也称为自动分页、滚动分页和无限分页。常用在图片、文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容。Infinite Scroll  这款 jQuery & WordPress 无限滚动插件可以帮助你轻松实现这个效果。
955 0
jQuery验证插件
原文:jQuery验证插件 学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能     验证插件(validate.js),是一款验证常规表单数据合法性的插件。
1126 0
40款非常有用的 jQuery 插件推荐(系列一)
  jQuery 是一个非常优秀的 JavaScript 框架,在现在的 Web 开发项目中扮演着重要角色。jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果,让网站有更好的可用性和用户体验。
1116 0
8 个高可用的 jQuery 表单验证插件
1) A Jquery Inline Form Validation   2) Jquery Contact Form validation   3) Form Validation Using Jquery   4) Using Jquery and Aj...
663 0
+关注
codingcoge
种一棵树最好的时间是十年前,其次是现在。 java自学后台ing,请多指教 Github: https://github.com/jjc123
文章
问答
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载