［正则表达式应用］网页输入的校验设计。

sasadong

做网站的人都知道，网页输入的校验是一个非常繁琐的工作。如何使这个事情变得有趣而轻松呢？

首先看看我们现状：
1，页面的输入框数据需要在浏览器提交前使用javascript校验以便增加界面友好性。
2，后台脚本还需要对所输入的数据进行服务端的校验以保证安全性。

由此看来，每增加一个字段，我们似乎都要写两份校验代码，一个是javascript的，一个是后台脚本的（包括但不限于php）。

使用下面这个设计很好的解决了这个问题：

1，使用regex正则表达式作为最核心的技术达到统一校验。
2，为了适应更多的自定义校验，需要一套能灵活扩展的校验格式。我定义为“[number:splitor:]type:value”

例如：regex:^$|^\d{4}-(?:[1-9]|[0][1-9]|1[0-2])-(?:[1-9]|0[1-9]|[12]\d|3[01])$
这校验格式要求输入的数据符合所给的正则表达式，  这里是可以为空的YYYY-mm-dd日期的严格校验

例如：function:same,Password,RetypePassword
这要求输入的Password和RetypePassword必须使same这个函数返回真

例如：2:&:regex:^[\w-_]{6,}$&&function:same,Password,RetypePassword
这说明多个校验条件使用2个&来分割，其中第一个条件要求输入框输入6个以上的字母、数字、连字符、下划线。第二个条件要求输入框Password的值必须和RetypePassword一致（same函数返回真）。

如此以来，这个校验格式扩展机制几乎可以无限制的满足了通用性和特殊性的校验要求。下面讲讲具体如何实现：
1，校验码的存放问题。
据我的实际经验，放在输入框的lang属性最好，
如下所示

1. 
   
2. <input name="PHONE"  type="text" class="input1" id="PHONE" accesskey="P"
   
3.                               title="电话号码"  lang="regex:^\d+-\d+-\d+$|^\d+-\d+$|^13\d{9}$|^159\d{8}$"  value=""
   
4.                               maxlength="127"  />
   

复制代码

　　　改了下标题,SASADONG师兄应该没意见吧...[em09]有意见PM我       -----by iptton

[ 本帖最后由 iptton 于 2006-10-31 16:10 编辑 ]

sasadong

2，使用javascript执行客户端的校验。

首先写一个通用的校验引擎，这个引擎可以单独成为一个js文件被所有页面引用，这里简写为函数
Check( objects ) , 方法的功能是遍历objects数组（这里应该是输入域的对象数组，或者是form的子元素数组），然后获取输入框的值和校验格式。写代码实现所有的所需校验。

更高级的方法，你可以设计成
Check( objects, callback_if_error, callback_if_ok )
这样在校验不成功时你可以alert出对话框或者在输入域旁边display一个红色警告图标，成功时submit Form。

这个Check函数里面的对regex校验的实现几乎承担了80%数据合法性的校验情况。以后基本上可以只写一个正则表达式就可以啦。至于其他function式的扩展，则是遇到一个完善一个，重要的是输入的校验处理达到一个统一的方式。

3，服务端的校验

同上，只不过是采用了服务端的脚本语言实现了这个校验过程。

整合所有流程。
为每一个表单写一个函数返回校验格式，例如GetDataFormats_RegisterForm()，在显示输入页面时调用这个函数返回关联数组，然后设置到页面的输入域lang属性，页面的表单提交时执行动作Check，当通过Check时数据提交到处理页面，处理页面依然使用GetDataFormats_RegisterForm()函数获取校验格式，处理页面随后对post上来的数据进行服务端的Check并做下一步处理。



以上的想法是可行的并已被实现。

sasadong

这个页面http://www.ydnet.cn/?c=Service.FriendLink.Add用到了这个设计，只是这个页面使用的是一个中间版本，此文章所写出的是这个设计的目标设计（我也还没完全实现这个设计，没时间呢呵呵）。


1，尝试直接按提交，会弹出对话框提示错误。
2，尝试把javascript禁止掉，视图忽略javascript校验，则服务端校验结果出现。



js写得好的话，那是可以在ie6和firefox都能支持通过的。目前这个页面就是这样。

iptton

这个．．．

好象应用地听广的．．

验证应该是个小块把．．．
我就只做了正则验证
服务端的验证肯定要执行的了

sasadong

原帖由 iptton 于 2006-10-30 13:32 发表
这个．．．

好象应用地听广的．．

验证应该是个小块把．．．
我就只做了正则验证
服务端的验证肯定要执行的了

只有正则验证是不够用的。 例如，正则不能校验注册时两次输入的密码是否相同，正则验证也不能检查两个日期之间是否第二个日期大于第一个日期。

iptton

原帖由 sasadong 于 2006-10-30 13:55 发表



只有正则验证是不够用的。 例如，正则不能校验注册时两次输入的密码是否相同，正则验证也不能检查两个日期之间是否第二个日期大于第一个日期。

这个只能看实际需求了。。。

具体问题具体分析

hexq

我觉得，验证的话一般是否为空值之类的验证用js就可以了，但是更多的是要把这些验证放到control层去吧，主要是js在有些浏览器上会出错。