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

脚本宝典收集整理的这篇文章主要介绍了

javascript代码实例教程-自己动手写javascript前端验证框架

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

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

 

需求分析:

 

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

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

支持提醒文本标记 记住我们的控件的唯一功能就是验证,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脚本,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

javascript代码实例教程-自己动手写javascript前端验证框架

全部内容,希望文章能够帮你解决

javascript代码实例教程-自己动手写javascript前端验证框架

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过