资讯频道 → Web前端
阅读更多

4顶
2踩

Web前端

原创新闻 Parsley：功能强大且易用的 JS 表单验证插件

2013-01-28 10:02 by 见习编辑 tyygming 评论(5) 有5669人浏览
javascript 表单验证 Parsley

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

Parsley（在线演示）是一款JavaScript表单验证插件，可以帮助你只使用简单的配置即可实现表单验证功能，这完全基于它的强大DOM-API。


主要特性：

  • 基于超棒的用户体验
  • 超级方便配置
  • 超轻量级(压缩后12K），支持jQuery和Zepto
  • 超简单，只需要简单配置DOM-API，类似jQuery的data API
  • 绝对免费
  • 可靠性非常好
内建的验证：

  • required：要求输入
  • Not blank：不能为空
  • Min length：最小长度
  • Max length：最大长度
  • Range length：长度区间
  • Min：最小值
  • Max：最大值
  • Range：区域值
  • RegExp：正则表达式
  • Equal To：等于
  • Min check：检查选择的checkbox的最少数量
  • Max check：检查选择的checkbox的最多数量
  • Range check：检查选择的checkbox的区间数量
  • Remote：ajax验证
使用和配置Parsley.js非常的简单，你只需要使用HTML的data属性来配置html即可，如下： 
    <form id="demo-form" data-validate="parsley">
    <label for="fullname">Full Name * :</label>
    <input type="text" id="fullname" name="fullname" data-required="true" />
     
    <label for="email">Email * :</label>
    <input type="text" id="email" name="email" data-trigger="change" data-required="true" data-type="email" />
     
    <label for="website">Website :</label>
    <input type="text" id="website" name="website" data-trigger="change" data-type="url" />
     
    <label for="message">Message (20 chars min, 200 max) :</label>
    <textarea id="message" name="message" data-trigger="keyup" data-rangelength="[20,200]"></textarea>
</form>

是不是很方便，并且文档非常的完整，不过如果你需要使用中文，需要自己本地化一下，相信如果使用过的朋友一定会喜欢的！

官方网站：http://parsleyjs.org/

Github地址：https://github.com/guillaumepotier/Parsley.js

Via gbtags
来自: www.gbin1.com
4
顶
2
踩
评论 共 5 条 请登录后发表评论
5 楼 achun 2013-03-04 17:43
78425665 写道
achun 写道
data-required
看到这个代码就知道这个验证方案的写法老旧，已经脱离时代了。


那可以推荐一个与时俱进的验证框架吗？

https://github.com/dsheiko/HTML5-Form-Shim
临时搜索了一个，简单看了下介绍和代码，这个库是为老旧的不支持Html5 Form 的浏览器写的，当然也可以用于支持 HTML5 Form 验证的浏览器，
关键不同在于form表单代码是按照html5的标准写的，紧跟最新标准也是与时俱进的表现。
4 楼 78425665 2013-03-04 10:16
achun 写道
data-required
看到这个代码就知道这个验证方案的写法老旧，已经脱离时代了。


那可以推荐一个与时俱进的验证框架吗？
3 楼 gxz1989611 2013-01-30 17:15
有jquery-validator好用吗？前端校验插件我就知道这个。。。
2 楼 请输入用户名 2013-01-30 09:28
基于bootstrap嘛，感觉这个也不是很漂亮，跟bootstrap风格不像
1 楼 achun 2013-01-28 16:22
data-required
看到这个代码就知道这个验证方案的写法老旧，已经脱离时代了。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • jQuery验证插件大全：使用强大的jQuery验证插件提升表单验证功能

    通过使用这些强大的jQuery验证插件，我们可以轻松地实现各种表单验证需求。无论是简单的必填字段验证还是复杂的自定义验证规则，这些插件都提供了丰富的功能和选项，可以满足我们的需求。该插件会自动检测表单的提交...

  • 15个非常实用的JavaScript表单验证库

    客户端验证在任何项目都是不可缺少的，很多时候我们需要在用户提交到服务器之前给予提示。表单验证库允许开发人员自定义样式、错误消息和样式以及简化验证规则的创建。今天，我将与大家分享15个非常...

  • javascript功能插件大集合 前端常用插件 js常用插件

    管理着 JavaScript 库，并提供读取和打包它们的工具。 npm：npm 是 JavaScript 的包管理器。官网 Bower：一个 web 应用的包管理器。官网 component：能构建更好 web 应用的客户端包管理器。官网 spm：全新的静态包...

  • javascript功能插件大集合

    awesome-javascript 是 sorrycc 发起维护的 JS 资源列表，内容包括：包管理器、加载器、测试框架、运行器、QA、MVC框架和库、模板引擎、数据可视化、时间轴、编辑器等等。伯乐在线已在 GitHub 上发起「JavaScript ...

  • 【工具】15个非常实用的 JavaScript 表单验证库

    客户端验证在任何项目都是不可缺少的，很多时候我们需要在用户提交到服务器之前给予提示。表单验证库允许开发人员自定义样式、错误消息和样式以及简化验证规则的创建。今天，我将与大家分享15个非常...

  • 前端常用js插件

    CMS 框架模板引擎Flux数据可视化时间轴编辑器文件函数式编程响应式编程数据...验证键盘封装器浏览和引导通知幻灯片滑块控件表单组件输入日历选择文件上传其它提示模态框和弹出框滚动菜单表格/栅格框架手势触摸地图视频/...

  • javascript功能插件大集合，写前端的亲们记得收藏

    awesome-javascript 是 sorrycc 发起维护的 JS 资源列表，内容包括：包管理器、加载器、测试框架、运行器、QA、MVC框架和库、模板引擎、数据可视化、时间轴、编辑器等等。 伯乐在线已在 GitHub 上发起「JavaScript ...

  • JavaScript资源大全中文版（Awesome最新版）

    JavaScript资源大全中文版（Awesome最新版）

  • JavaScript 资源大全中文版

    管理着 javascript 库，并提供读取和打包它们的工具。 npm：npm 是 javascript 的包管理器。官网Bower：一个 web 应用的包管理器。官网component：能构建更好 web 应用的客户端包管理器。官网spm：全新的静态包...

  • JavaScript库资源

    jam - 使用以浏览器为中心且与RequireJS兼容的存储库的包管理器。 jspm - 无摩擦浏览器包管理。 恩德 - 无库图书馆。 volo - 从模板创建前端项目，添加依赖项并自动生成项目。 Duo - 下一代软件包管理器，

  • MiniGui业务开发基础培训-htk

    MiniGui业务开发基础培训-htk

  • com.harmonyos.exception.DiskReadWriteException(解决方案).md

    鸿蒙开发中碰到的报错，问题已解决，写个文档记录一下这个问题及解决方案

  • 网络分析-Wireshark数据包筛选技巧详解及应用实例

    内容概要：本文档详细介绍了Wireshark软件中各种数据包筛选规则，主要包括协议、IP地址、端口号、包长以及MAC地址等多个维度的具体筛选方法。同时提供了大量实用案例供读者学习，涵盖HTTP协议相关命令和逻辑条件的综合使用方式。 适合人群：对网络安全或数据分析有一定兴趣的研究者，熟悉基本网络概念和技术的专业人士。 使用场景及目标：适用于需要快速准确捕获特定类型网络流量的情况；如网络安全检测、性能优化分析、教学演示等多种实际应用场景。 阅读建议：本资料侧重于实操技能提升，在学习时最好配合实际操作练习效果更佳。注意掌握不同类型条件组合的高级用法，增强问题解决能力。

  • com.harmonyos.exception.BatteryOverheatException(解决方案).md

    鸿蒙开发中碰到的报错，问题已解决，写个文档记录一下这个问题及解决方案

  • com.harmonyos.exception.ServiceUnavailableException(解决方案).md

    鸿蒙开发中碰到的报错，问题已解决，写个文档记录一下这个问题及解决方案

  • MATLAB上机试题 MATLAB原理及应用实验报告 第3章 MATLAB的符号运算.docx

    内容概要：本文档详细介绍了MATLAB的符号运算，涵盖符号对象的命名方法、基本运算、级数求法等多个方面。通过具体的实验案例，如确定符号表达式中的变量、执行四则运算、提取分子分母、因式分解与展开、化简符号表达式、级数符号求和、符号微积分以及符号方程的求解，帮助学生理解和掌握MATLAB中的符号运算技巧。 适合人群：适用于对MATLAB有一定了解的大专院校的学生、研究人员和技术工作者。 使用场景及目标：通过本课程的学习，学员能够熟练使用MATLAB完成复杂的数学问题解决，提高科研项目和工程任务中对数学模型的建模能力和问题解决效率。 其他说明：文档包含详细的实验步骤指导和实例演示，同时提供了丰富的练习题供读者巩固所学知识。对于想要深入研究MATLAB符号运算的人来说是一份宝贵资料。

  • springboot vue2 mysql 校园美食分享平台 论文.docx

    适合参考论文写作

  • 联通精准营销平台外呼系统HTTP接口规范

    内容概要：文档介绍了联通精准营销平台外呼系统的HTTP接口规范（V2.3），提供了API接口用于外呼业务的各种功能，确保企业的市场拓展和技术操作的无缝衔接。主要涵盖接口列表如坐席登录、数据获取、企业修改密码等，并详细说明了每个接口的方法、路径、请求参数及返回状态。针对外呼过程中的常见问题给出了处理指导，旨在帮助企业高效开展外呼业务，同时保障数据的安全性和合规性。 适用人群：适用于企业IT技术人员、营销人员以及任何希望利用电信运营商提供的API来增强自身外呼和数据分析能力的专业人士。 使用场景及目标：企业可通过这些API实现与联通平台的数据交互，包括但不限于获取客户资料、发起呼叫、管理和统计外呼数据，从而提升营销效率和客户服务体验。特别强调在外呼过程中涉及的身份认证、信息安全等方面的处理措施。 其他说明：此接口文档更新频繁，版本为2.3。企业需要及时关注最新动态以便充分利用各项功能优化营销策略。同时应注意遵守中国联通关于数据安全的相关政策法规。

  • springboot vue2 mysql 图书馆管理系统 论文.docx

    适合参考论文写作

  • java项目，课程设计-springboot校园在线拍卖系统

    java项目，课程设计-springboot校园在线拍卖系统，随着互联网技术的高速发展，人们生活的各方面都受到互联网技术的影响。现在人们可以通过互联网技术就能实现不出家门就可以通过网络进行系统管理，交易等，而且过程简单、快捷。同样的，在人们的工作生活中，也就需要互联网技术来方便人们的日常工作生活，实现工作办公的自动化处理，实现信息化，无纸化办公。 本课题在充分研究了在Springboot框架基础上，采用B/S模式，以Java为开发语言，MyEclipse为开发工具，MySQL为数据管理平台，实现的内容主要包括首页，个人中心，综合管理等功能。

Global site tag (gtag.js) - Google Analytics