摘要: 需求分析: 逻辑与页面设计相分离,网页设计师现在都疯了,各种花哨的提醒方式,好多验证控件却自认为自己做的样式可以得到设计师的芳心。。。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。  前段时间做网站需要很多的验证,第一时间想到的是去网上找一些验证控件。一搜还真不少,但是很沮丧,网上大多数验证控件都自带样式,而客户的验证提醒方式很特别。一怒之下小编自己写了一个简易的验证框架。

 

需求分析:

 

逻辑与页面设计相分离,网页设计师现在都疯了,各种花哨的提醒方式,好多验证控件却自认为自己做的样式可以得到设计师的芳心。。。

支持自定义正则与常用正则

支持提醒文本标记 记住我们的控件的唯一功能就是验证,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"/>

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接: http://www.js-code.com/js/js_7650.html