精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2013-04-27
首先 先说下写这个插件的原因。最近在和某公司一起合作一个项目,合作公司用的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 以上就是这套小插件的成果。。由于时间和工作的关系,小弟会抓紧时间美化与完善这套插件。尽快公布出来。如果喜欢的话不妨在项目中尝试下。绝对能为你剩下时间,更加自由。 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2013-04-27
虽然是重复造轮子,但是这种探索精神还是值得鼓励。
|
|
返回顶楼 | |
发表时间:2013-04-27
montya 写道 虽然是重复造轮子,但是这种探索精神还是值得鼓励。
没有想多么伟大,就是自己用到了。一些东西不满足自己的需求。所以自己写一个。和大家分享下。 谢谢鼓励 |
|
返回顶楼 | |
发表时间:2013-04-27
嗯,加一些样式控制,加一些兼容性处理了,就没有什么问题了。
|
|
返回顶楼 | |
发表时间:2013-04-27
LinApex 写道 嗯,加一些样式控制,加一些兼容性处理了,就没有什么问题了。
CSS 方面 自己不太会。。项目组美工也很忙 也没去麻烦人家。只是自己回家写了一些。慢慢优化。 |
|
返回顶楼 | |
发表时间:2013-04-29
montya 写道 虽然是重复造轮子,但是这种探索精神还是值得鼓励。 请把虽然去掉,最烦一口一个轮子和言必谈模式,每个东西需要不一样,难道不能改造阿。
|
|
返回顶楼 | |
发表时间:2013-05-03
可以提供一个完整的Demo吗?我感觉还不错的。
|
|
返回顶楼 | |
发表时间:2013-05-03
qingling600 写道 可以提供一个完整的Demo吗?我感觉还不错的。
今晚会把demo 发上来。CSS 样式已经追加完毕了。 |
|
返回顶楼 | |
发表时间:2013-05-03
LZ,html元素属性,你怎么加在元素中的?
比如input 里面的max-message... |
|
返回顶楼 | |
发表时间:2013-05-03
个人建议:
1. 不建议过多侵入标签属性,现在用的爽,久了你会烦的。可以考虑放到class属性里,或者只侵入一个标签属性, 形如: <input class="require[number]"/> <input myvalidation="require number[0-5]"/> 2. 你这个的提示文字必须在左边吗?有的页面设计可能没有那么多空间。我个人感觉Toast效果的提示比较通用。 |
|
返回顶楼 | |