统一验证标准,减少重复劳动,提高生产力。
当公司内部有多个Web项目的时候,统一验证标准就很有必要了。
统一不同项目的验证规则,比如 同为用户名 使用同一套标准,甚至用户名和机构名等也使用同一套标准。(明确定义非法字符的集合,比如@~.^)
除非客户有强烈的明确的要求,否则就按照公司的统一标准来做。
标准验证
required:某个选项必填,不能为空
remote:AJAX异步验证某个值的合法性,比如用户名是否存在
minLength:最小长度,比如用户名至少含有6个字符
maxLength:最大长度,比如用户名最多只能有20个字符
min:最小值,比如用户年龄最小为1岁
max:最大值,比如用户年龄最大为130岁
range:某一范围,比如用户的年龄在1岁到130岁之间
email:邮箱,比如[email protected]
url:统一资源标识符,比如http://FansUnion.cn
date:日期,比如2013-08-19
number:12.3,12,1,0.5都可以(不要把number和digits搞混淆了,number和digits存在一定的交集)
digits:某个字段为数字字符,比如用户的年龄一定是数字字符,12可以,12.3不行
equalTo:要求某2个字段必须相同,比如密码和确认密码必须一致
mobile:手机号,比如15102780892
固话:6186555/07106186555
fax:传真,比如86135792468
ip:IP地址,比如192.168.1.1
身份证:110683198906020011
fileExtension:上传文件的扩展名,比如必须是文本文件.txt
optional:要么为空,如果不为空必须满足一定的条件,比如用户的备注可以为空,如果填写长度必须小于200
自定义验证
自己写语句:js/jquery if/else等
正则验证:自定义正则表达式进行验证
常用正则表达式
只能输入数字:“^[0-9]*$”
只能输入n位的数字:“^d{n}$”
只能输入至少n位数字:“^d{n,}$”
只能输入m-n位的数字:“^d{m,n}$”
只能输入零和非零开头的数字:“^(0|[1-9][0-9]*)$”
只能输入有两位小数的正实数:“^[0-9]+(.[0-9]{2})?$”
只能输入有1-3位小数的正实数:“^[0-9]+(.[0-9]{1,3})?$”
只能输入非零的正整数:“^+?[1-9][0-9]*$”
只能输入非零的负整数:“^-[1-9][0-9]*$”
只能输入长度为3的字符:“^.{3}$”
只能输入由26个英文字母组成的字符串:“^[A-Za-z]+$”
只能输入由26个大写英文字母组成的字符串:“^[A-Z]+$”
只能输入由26个小写英文字母组成的字符串:“^[a-z]+$”
只能输入由数字和26个英文字母组成的字符串:“^[A-Za-z0-9]+$”
只能输入由数字、26个英文字母或者下划线组成的字符串:“^w+$”
验证用户密码:“^[a-zA-Z]w{5,17}$”正确格式为:以字母开头,长度在6-18之间,
只能包含字符、数字和下划线。
(常用正则表达式参考:http://www.cnblogs.com/wenmaoyu/archive/2011/07/21/2113124.html)
避免用户输入犯错
a.比如用户名的最大长度是20,可以设置input的maxlength=20。
b.比如电话号码只能是数字,只让用户输入数字。
c.给予用户必要的提示,比如*,foucs时的提示“最多输入20个字符”。
验证不通过的错误提示
a.把输入框的边框颜色改为红色等。
b.在输入框的后面,给出错误提示,比如"最多输入20个字符"。
验证的触发时机
a.blur 鼠标离开某个输入框后,给出校验提示(成功或失败)
b.sumbit 点击提交某个按钮时,给出校验提示(成功或失败)
验证组件
开源组件:jquery-validation
官方网站:http://jqueryvalidation.org/
自定义实现组件:公司自己内部使用的
jquery-validation演示例子: http://jquery.bassistance.de/validate/demo/marketo/
推荐网站:http://www.regexpal.com/ (A javascript regular expression tester)
原文参见:http://FansUnion.cn/articles/2277