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

教你写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标记 内容的格式验证 已经格式验证 提醒文本 ， 必填验证优先级>格式验证

大家看到这里的正则我们可以自由填写，但是无法达到重用的效果所以我们也要支持 格式类型 

<inputtype="text"spacemsg="请输入邮箱"ruleMod="email"rulemsg="请输入正确的邮箱格式"class="userCtr"/>

在工作的时候引擎会将ruleMod 转为对应的rule，在用法上这只不过是语法糖而已但对用户来讲方便不少哦

有些验证只有当控件有值的时候才会引发验证，那么只需要 

<inputtype="text"ruleMod="mobile"rulemsg="请输入正确的联系方式"class="userCtr"/>

 

(待续.........)