统一验证标准,减少重复劳动,提高生产力。

当公司内部有多个Web项目的时候,统一验证标准就很有必要了。
统一不同项目的验证规则,比如 同为用户名 使用同一套标准,甚至用户名和机构名等也使用同一套标准。(明确定义非法字符的集合,比如@~.^)

除非客户有强烈的明确的要求,否则就按照公司的统一标准来做。

标准验证

required:某个选项必填,不能为空

remote:AJAX异步验证某个值的合法性,比如用户名是否存在

minLength:最小长度,比如用户名至少含有6个字符

maxLength:最大长度,比如用户名最多只能有20个字符

min:最小值,比如用户年龄最小为1岁

max:最大值,比如用户年龄最大为130岁

range:某一范围,比如用户的年龄在1岁到130岁之间

email:邮箱,比如leiwen@fansunion.cn

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

提高生产力:Web前端验证的标准化的更多相关文章

  1. [置顶] 提高生产力:Web开发基础平台WebCommon的设计和实现

    Web开发中,存在着各种各样的重复性的工作.为了提高开发效率,不在当码农,我在思考和实践如何搭建一个Web开发的基础平台. Web开发基础平台的目标和功能 1.提供一套基础的开发环境,整合了常用的框架 ...

  2. 提高生产力:Web开发基础平台WebCommon的设计和实现

    Web开发中,存在着各种各样的重复性的工作.为了提高开发效率,不在当码农,我在思考和实践如何搭建一个Web开发的基础平台. Web开发基础平台的目标和功能 1.提供一套基础的开发环境,整合了常用的框架 ...

  3. 提高生产力:SpringMVC中,使用扩展数据类型TypedMap接收Web请求参数

    在Web项目中,如果前端MVC框架使用的是SpringMVC,可以使用Map接收前端请求参数,比bean要方便很多. 尤其是SpringMVC和Mybatis一起用的时候,用Map大大减少了需要的be ...

  4. WEB安全新玩法 [2] 防范前端验证绕过

    用户登录,几乎是所有 Web 应用所必须的环节.Web 应用通常会加入一些验证手段,以防止攻击者使用机器人自动登录,如要求用户输入图形验证码.拖动滑动条等.但是,如果验证的逻辑仅仅在前端执行,是很容易 ...

  5. web前端经典面试题大全及答案

    阅读目录 JavaScript部分 JQurey部分 HTML/CSS部分 正则表达式 开发及性能优化部分 本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题,并且都给出了我在 ...

  6. Web前端开发推荐阅读书籍、学习课程下载

    转自http://www.xuanfengge.com/fe-books.html 前言 学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 除了在项目中学 ...

  7. 2018最新Web前端经典面试试题及答案

    javascript: JavaScript中如何检测一个变量是一个String类型?请写出函数实现 typeof(obj) === "string" typeof obj === ...

  8. 初学者应该怎么学习前端?web前端的发展路线大剖析!

    写在最前: 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的基础知识,而且要学会运用 ...

  9. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

随机推荐

  1. Meteor 前端 RESTful API 通过后端 API 下载文件

    Meteor 下载文件 问题场景 后端 HTTP server提供一个下载接口,可是须要前端 Meteor 可以给浏览器用户开一个URL来下载这个文件. 举例:在线的Meteor Logo文件就好比后 ...

  2. 关于template 的23个问题

    发现新大陆.曾经慢慢才知道的东西.原来有个集中营: 看看updated, 处理方式是这么的好 35.1 " id="link-to-faq-35_1" style=&qu ...

  3. POJ 3628 Bookshelf 2 题解

    本题解法非常多,由于给出的数据特殊性故此能够使用DFS和BFS,也能够使用01背包DP思想来解. 由于一般大家都使用DFS,这里使用非常少人使用的BFS.缺点是比DFS更加耗内存,只是长处是速度比DF ...

  4. 64bit Centos6.4搭建hadoop-2.5.1

    64bit Centos6.4搭建hadoop-2.5.1 1.分布式环境搭建 採用4台安装Linux环境的机器来构建一个小规模的分布式集群. 当中有一台机器是Master节点,即名称节点,另外三台是 ...

  5. 最长公共子序列 nlogn

    先来个板子 #include<bits/stdc++.h> using namespace std; , M = 1e6+, mod = 1e9+, inf = 1e9+; typedef ...

  6. C Tricks(十七)—— 对角线元素的屏蔽、二维数组(矩阵)的遍历

    1. 对角线元素的屏蔽 使用 if + continue 实现对对角线元素的屏蔽 for u in range(n): for v in range(n): if u == v: continue . ...

  7. Path Sum II 总结DFS

    https://oj.leetcode.com/problems/path-sum-ii/ Given a binary tree and a sum, find all root-to-leaf p ...

  8. Android应用优化之代码检测优化

    在网络层,互联网提供所有应用程序都要使用的两种类型的服务,尽管目前理解这些服务的细节并不重要,但在所有TCP/IP概述中,都不能忽略他们: 无连接分组交付服务(Connectionless Packe ...

  9. (转载)Android 方法数超过64k、编译OOM、编译过慢解决方案。

    Android 方法数超过64k.编译OOM.编译过慢解决方案.   目前将项目中的leancloud的即时通讯改为环信的即时通讯.当引入easeui的时候 出现方法数超过上限的问题. 搜索一下问题, ...

  10. 【Oracle】回收站

    ☆回收站概念 oracle从10g开始,引入回收站(Recycle Bin)概念.回收站的全称叫:Tablespace Recycle Bin.回收站是一个逻辑区域,oracle并没有为它分配物理空间 ...