jQuery之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-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。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
从零开始用Python3做数据分析
点击关注异步图书,置顶公众号 每天与你分享 IT好书 技术干货 职场知识 参与文末话题讨论,每日赠送异步图书 ——异步小编 欢迎来到Python数据分析的世界!如今,Python已成为数据分析和数据科学事实上的标准语言和标准平台之一。我们将为读者展示一张思维导图,图1-1中将给出Python生态系统为数据分析师和数据科学家提供的各种程序库。NumPy、SciPy、Pandas和Matplotlib库共同构成了Python数据分析的基础,当前它们已经成为SciPy Stack 1.0的组成部分。在本文中,我们不仅会学习如何安装SciPy Stack 1.0和Jupyter Notebook,还将编写一些简单的数据分析代码,为后面的学习做好热身。 下面是Python生态系统为数据分析师和数据科学家提供的常用程序库。 ●NumPy:这是一个通用程序库,不仅支持常用的数值数组,同时提供了用于高效处理这些数组的函数。 ●SciPy:这是Python的科学计算库,对NumPy的功能进行了大量扩充,同时也有部分功能是重合的。Numpy和SciPy曾经共享基础代码,后来分道扬镳了。 ●Pa...
- 下一篇
部署基于 python wsgi web 框架的工程到函数计算
本文旨在介绍如何将基于 WSGI web 框架构建的工程部署到函数计算 python runtime 的具体操作过程,在介绍操作过程之前,先了解几个概念。 相关概念导读 函数计算 HTTP 触发器 HTTP 触发器是众多函数计算触发器中的一种,通过发送 HTTP 请求触发函数执行。主要适用于快速构建 Web 服务等场景。HTTP 触发器支持 HEAD、POST、PUT、GET 和 DELETE 方式触发函数。具体详情可以参考 HTTP 触发器 什么是WSGI WSGI的全称是 Web Server Gateway Interface,简单翻译就是 Web 服务器网关接口。具体来说,WSGI 是一个规范,定义了 Web 服务器如何与 Python 应用程序进行交互,使得使用 Python 写的 Web 应用程序可以和 Web 服务器对接起来。
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Red5直播服务器,属于Java语言的直播服务器
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Docker安装Oracle12C,快速搭建Oracle学习环境
- CentOS6,CentOS7官方镜像安装Oracle11G
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- CentOS关闭SELinux安全模块
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- Hadoop3单机部署,实现最简伪集群