javascript表单验证 - Parsley.js使用和配置_javascript技巧

在线演示
大家还记得我们曾经介绍过的表单验证jquery插件jquery.validationEngine吧,使用这个插件你不需要写任何一行js代码就可以生成一个功能强大的表单验证功能。是不是超棒? 今天介绍的Parsley同样也可以帮助你只使用简单的配置即可实现表单验证功能,基于它的强大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>

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

时间: 2024-09-13 20:50:47

javascript表单验证 - Parsley.js使用和配置_javascript技巧的相关文章

表单验证的完整应用案例探讨_javascript技巧

表单问题,是个纠结的问题,我觉得这个是程序开发人员要去处理的东西,但是有时候程序又要前端去处理,那要看你的后台搭档怎么样了?苦逼的前端哇,不过还是自己了解一点还是比较好,你搞我也可以搞,你不搞我还可以搞,哈哈 .如果对你有用欢迎留言,共同探讨,共同进步,废话不说,贴代码(为了童鞋们方便,本代码复制即可用,无需分块拼凑): 复制代码 代码如下: <!doctype html> <html> <head> <title>表单验证的完整应用</title&g

表单验证正则表达式实例代码详解_javascript技巧

表单验证正则表达式具体内容如下所示: 首先给大家解释一些符号相关的意义      1.  /^$/ 这个是个通用的格式.          ^ 匹配输入字符串的开始位置:$匹配输入字符串的结束位置      2. 里面输入需要实现的功能.         * 匹配前面的子表达式零次或多次:        + 匹配前面的子表达式一次或多次:        ?匹配前面的子表达式零次或一次:        \d  匹配一个数字字符,等价于[0-9] 下面通过一段代码给大家分析表单验证正则表达式,具体代

ASP动态生成的javascript表单验证代码

javascript|表单验证|动态 以网上down了一个ASP动态生成Form验证javascript的代码,自己扩容了一下.作者的大名我给忘了,不过我记得清楚,从第一条至第九条的代码都是该作者的原创.至于九至第十五条却是本人自己加的哦.而且由于本人水平有限,从第九条至第十五条不见得会条条生效啊?呵呵,其实把它贴在这里没有什么必要的,因为这点小会伎俩谁都会用的,我把它的作用定位为:开发时找不到该函数时到这里拷贝一下就可以了.呵,因为我即没有刻录机也没有移动硬盘.实在是没有办法把这些代码随身携带

简单的JavaScript表单验证

问题描述 简单的JavaScript表单验证 <script></script>中有两个同名函数,参数个数不同,为什么一次调用两个函数都执行了呢?onsubmit="return validate_form(this)这句代码不是应该只调用了一个函数吗? <html> <head> <script type="text/javascript"> function validate_required(field,ale

JavaScript 表单验证常用代码

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 被 JavaScript 验证的这些典型的表单数据有: •用户是否已填写表单中的必填项目? •用户输入的邮件地址是否合法? •用户是否已输入合法的日期? •用户是否在数据域 (numeric field) 中输入了文本? 下面是连同 HTML 表单的完整代码:  代码如下 复制代码 <html> <head> <script type="text/javascript&qu

常用javascript表单验证汇总_javascript技巧

实例讲解:验证输入的是否是数字,是否满足数字位数,如果错误,并进行友情提醒. 效果图: <!DOCTYPE html> <html> <body> <h1>我的第一段 JavaScript</h1> <p>请输入数字.如果输入值不是数字,浏览器会弹出提示框.</p> <input id="demo" type="text"> <script> function

JavaScript表单验证实例之验证表单项是否为空_javascript技巧

表单验证几乎在每一个需要注册或者登陆的网站是必不可少的,有些验证则非常的复杂,可以说是各种各样给你的要求,不过本章节只介绍一下表单中最简单的验证方式,就是判断是否为空,有些要求比较低的网站对此已经满足需要了. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ww

javascript表单验证大全_javascript技巧

被 JavaScript 验证的这些典型的表单数据有以下几种: 1.用户是否已填写表单中的必填项目? 2.用户输入的邮件地址是否合法? 3.用户是否已输入合法的日期? 4.用户是否在数据域 (numeric field) 中输入了文本? 下面是用户名和密码验证代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &

拥有一个属于自己的javascript表单验证插件_javascript技巧

自己编写了一个表单验证插件,使用起来很简单,以后还可以扩展更多的功能,比如ajax验证. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:rule表示验证规则,msg表示错误提示信息:to表示要验证的元素的name值,如果元素是单个的,to可以不写.该插件会遍历每个有valid的span标签,找出它前面需要验证的元素,根据rule验证,如果验证不通过,则显示边框为红色,鼠标放在元素上时显示错误信息.  验证时机: