对于表单验证,大家都不陌生,市面上太多太多的校验框架,其中不缺乏精品中的精品。小弟特此也开源发布一个小插件。没有其他目的,和大家一起分享下成果。
首先 先说下写这个插件的原因。最近在和某公司一起合作一个项目,合作公司用的DWR去和后台交互。而用dwr 无法使用一些市面上成熟的jquery 校验插件,而这些插件大部分都是 固定的 ajax 提交方式,对ajax调用进行了相应的封装。这样的话缺少了太多的自主性,我必须用插件中固定的写法。而对于DWR。。没有URL的调用方式。。更无法去使用。还有。有时候我们也会封装自己的ajax 函数 而在请求,回调后做其他的JS 处理。而对于市面上一些框架对于我们来说难免哟太多的舒服。而且配置起来太麻烦。。一写JS。。就要写一大堆配置项。。(PS:也可能有简单方便的。但是我没发现好的。有的话可以留言推荐下)
所以小弟不才。自己研究写了一套小插件,最近在调整CSS样式 和一些美化和后续的一些改善。。
这套插件在配置方面 我个人 觉得很方便,很简单。直接在HTML中 写入相应的参数。即可
例如:
<input type="text" id="inputtext" check-type="required"
min-max="3-5" min-message="字符长度不得小于3个字符"
max-message="字符长度不得超过5个字符"
required-message="文本不能为空!" >
这是一个文本校验是否为空,输入长度在3-5个字符。
check-type :校验类型
required-message:提示信息
min-max;最小与最大字符长度
现阶段支持的check-type 类型包括:
required :不能为空
number:数字类型
mail:邮件地址校验
char:必须为英文字符
chinese:必须为中文字符
mobile:手机号码校验
passWord:密码强度校验
confirmPwd:确认密码
dateYmd:日期格式
idCard:身份证号
二:前台调用方式:
为了达到轻量 简单方便 前台调用方式简单
<script>
$(function(){
$('#form').myValidate("subBtn",function(){
callbackFunction();
});
});
//在这个函数中我们可以做我们想做的任何操作。包括自定义封装的 ajax 方式
//完全抛弃其他校验框架固定的ajax 校验的规则束缚
function callbackFunction(){
alert("回调函数");
}
</script>
下面是效果图:
效果图2
效果图3
以上就是这套小插件的成果。。由于时间和工作的关系,小弟会抓紧时间美化与完善这套插件。尽快公布出来。如果喜欢的话不妨在项目中尝试下。绝对能为你剩下时间,更加自由。
- 大小: 49.4 KB
- 大小: 65.9 KB
- 大小: 59.2 KB
分享到:
相关推荐
轻量的jQuery Validation
jQuery Validation表单验证插件实例合集,是锋利的JQuery第七章中的一个典型实例,一步步向大家讲解如何使用基于jQuery的表单验证插件jquery.validate.js和jquery.validate.messages_cn.js的使用方法,一共包含了7个...
Validation Engine是一款基于Jquery的js表单验证插件。相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合。
jQuery 插件使客户端表单验证变得容易,同时仍然提供了大量的自定义选项。如果您要从头开始构建新的东西,或者当您试图将某些东西集成到具有大量现有标记的现有应用程序中时,它都是一个不错的选择。该插件捆绑了一...
高质量的jQuery表单验证插件,可以节约web开发者的时间。A Jquery Inline Form Validation
jQuery validation 1.6.zip 包括全部类库和一些demo。
简述jQuery验证插件validation的功能和使用
表单验证JQ插件jquery-validation.js
JQuery Validation是一款很好用的表单验证插件,可以帮助你更方便更灵活的完成表单的验证!内容包含源码和常用的使用方法
jquery-validation是基于jQuery的一款表单验证的插件,独特的验证样式非常新颖
jQueryvalidation验证框架.pdf
(二)插件方法 (jQuery validation) 6 (三、四)选择器及实用工具 (jQuery validation) 7 四、实用工具(Utilities) 8 (五)验证器 (jQuery validation) 8 (六)内置验证方法 (jQuery validation) 10 (七)注意...
让jquery validation plugin 支持zepto
jQuery+Validation表单验证
JQuery validation plugin学习资料
jQuery 验证插件 jquery-validation-1.11.1
jQuery-Validation-Engine-master 表单验证插件 简单好用,已经包含汉化
Jquery Validation 验证 不错的验证插件 值得学习
jquery formValidation是个强大的jquery插件,使用简单,自定义提示层,弹出警告框,能验证常用的表单输入框。
例子源码 博文链接:https://xa-zbl.iteye.com/blog/563202