对于网页设计师来说，很多网站在进行设计的时候，需要很多的验证，很多设计师是在网上找一些验证控件了，但是很多都是自带的样式，不是很适合自己的需要，接下来清风小编就来给大家分享一下建议的验证框架，具体如下：

教你写javascript前端验证框架[图]图片1

 

需求分析：

    逻辑与页面设计相分离，网页设计师现在都疯了，各种花哨的提醒方式，好多验证控件却自认为自己做的样式可以得到设计师的芳心。。。支持自定义正则与常用正则支持提醒文本标记 记住我们的控件的唯一功能就是验证，UI神马的要给用户自由选择权，自然也包含提醒文本支持控件值比较 支持多种控件  text  checkbox  等支持忽略值  例如  请输入姓名 之类的提示符号

页面结构

    jquery类库这个是基础 适合做精细化dom操作

     

<scriptsrc="jquery.js"/>

 验证引擎，这是核心的js文件 随意起一个名字吧 validate.js  

<scriptsrc="validate.js"/>

提醒框文件，用于实现设计师的设计 就叫 validateBox.js 

<scriptsrc="validateBox.js"/>

 

在实现具体代码之前，我们应该先设计我们的代码如何工作。

第一种应用场景HTML代码：必选项 

<inputtype="text"spacemsg="请输入用户名"class="userCtr">

这是最简单应用场景，spacemsg 为自定义标记（也可以称为编译指令） 告诉 验证引擎 如果 这个控件的值如果为空或长空格 则提取spacemsg内容到提醒队列。

第二种应用场景HTML代码：格式化文本+必选验证 

<inputtype="text"spacemsg="请输入年龄"rule="\\d+$"rulemsg="年龄必须为数字"class="userCtr"/>

大家看到在这里 我们使用 rule标记 内容的格式验证 已经格式验证 提醒文本 ， 必填验证优先级>格式验证