首页 > 程序开发 > web前端 > JavaScript > 正文
自己动手写javascript前端验证框架
2014-01-14       个评论      
收藏    我要投稿
 前段时间做网站需要很多的验证,第一时间想到的是去网上找一些验证控件。一搜还真不少,但是很沮丧,网上大多数验证控件都自带样式,而客户的验证提醒方式很特别。一怒之下小编自己写了一个简易的验证框架。
 
需求分析:
 
逻辑与页面设计相分离,网页设计师现在都疯了,各种花哨的提醒方式,好多验证控件却自认为自己做的样式可以得到设计师的芳心。。。
支持自定义正则与常用正则
支持提醒文本标记 记住我们的控件的唯一功能就是验证,UI神马的要给用户自由选择权,自然也包含提醒文本
支持控件值比较 
支持多种控件  text  checkbox  等
支持忽略值  例如  请输入姓名 之类的提示符号
页面结构
 
    jquery类库这个是基础 适合做精细化dom操作
 
    
 
<script src="jquery.js"/>
 验证引擎,这是核心的js文件 随意起一个名字吧 validate.js 
 
<script src="validate.js"/>
提醒框文件,用于实现设计师的设计 就叫 validateBox.js
 
<script src="validateBox.js"/>
 
 
在实现具体代码之前,我们应该先设计我们的代码如何工作。
 
第一种应用场景HTML代码:必选项
 
<input type="text" spacemsg="请输入用户名" class="userCtr">
这是最简单应用场景,spacemsg 为自定义标记(也可以称为编译指令) 告诉 验证引擎 如果 这个控件的值如果为空或长空格 则提取spacemsg内容到提醒队列。
 
第二种应用场景HTML代码:格式化文本+必选验证
 
<input type="text" spacemsg="请输入年龄"  rule="\\d+$" rulemsg="年龄必须为数字" class="userCtr"/>
大家看到在这里 我们使用 rule标记 内容的格式验证 已经格式验证 提醒文本 , 必填验证优先级>格式验证
 
大家看到这里的正则我们可以自由填写,但是无法达到重用的效果所以我们也要支持 格式类型
 
<input type="text" spacemsg="请输入邮箱"  ruleMod="email" rulemsg="请输入正确的邮箱格式" class="userCtr"/>
在工作的时候引擎会将ruleMod 转为对应的rule,在用法上这只不过是语法糖而已但对用户来讲方便不少哦
 
有些验证只有当控件有值的时候才会引发验证,那么只需要
 
<input type="text"   ruleMod="mobile" rulemsg="请输入正确的联系方式" class="userCtr"/>
点击复制链接 与好友分享!回本站首页
相关TAG标签 前端 框架
上一篇:springMVC+ajax返回JSON串
下一篇:javascript执行顺序
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做实用的IT技术学习网站