表单验证 笔记分享

表单验证

1.表单验证的作用

1. 保证数据的规范性（有效）
2. 减少服务器的压力（减少请求，如果前端不合格，则不会进行请求）

表单验证除了前端要验证之外，后端也要验证。（双重验证）

2.表单验证的步骤

1. 绑定验证事件（何时触发验证）

   • onfocus获取焦点事件：一般用于输入内容提示

   • onblur失去焦点事件：一般用于验证输入内容格式

   • onsubmit表单提交事件：一般用于统一格式验证

2. 获取要验证的内容

3. 根据要求进行规范化验证

   • 不允许为空
   • 长度在6~12个字符 String length
   • 密码不允许出现数字 isNaN()
   • 密码不能与账号相同
   • 邮箱格式必须符合要求 @ .
   • ……

4. 进行合理的提示

3.表单验证的常见形式

1. 弹窗提示

2. 在输入框右方 或下方提示

   （添加一些结果标志 √ ×）

3. 在输入框内部进行隐藏提示

4.正则表达式

正则：用简单的关键词/符号 描述出复杂的规则

例如：\d{2} 必须包含2个数字

正则对象创建:

var reg = new RegExp('abc',附加参数)  // 附加参数：g（global） i（ignorecase）  m（multi line）

​ var reg = /abc/附加参数

常用方法：

test(字符串)   用来判断字符串是否符合正则要求

简单/普通模式：

​ 字符串常用方法：split(’-’) 就是一种简单模式中的规则

​ 例如：‘hello world’ split(‘o’) o此时就代表一种正则

复合模式：也可以和普通模式混合使用

元字符和限定符等组成的正则

​ 元字符：

​ ^ 以……开始

​ $ 以……结尾

​ \s 任意空白字符

​ \S 任意非空白字符

​ \w 字母、数字、下划线[A-Za-z0-9_]

​ \W [^A-Za-z0-9_]

​ \d 数值[0-9]

​ \D 除了数字之外的任何字符[^0-9]

​ . 除了换行符之外的任意字符

​ 限定符：

​ {n} 前一项格式必须出现n次

​ {n,} 前一项格式至少出现n次

​ {n,m} 前一项格式至少出现n次，不超过m次

​ * 前一项格式出现0次或多次

​ + 前一项格式至少出现1次 {1，1}

​ ? 前一项格式出现0次或1次 {0，1}

5.H5的新增表单验证方式

required属性：表示必填项

placeholder属性：隐藏提示

pattern属性：编写正则表达式

max

min

step

maxlength

6.补充：validate插件

1. 导入jQuery库
2. 导入validata插件
3. 给表单对象绑定validata函数
4. 指定规则和提示消息

微信读书

注：笔记思路来自查老师！！