表单验证

valid - 形容词,有效的

validate - 动词,证实,看其有没有效

validation - 动词的名词形式,证实(这一动动)

目录

  1. 远古时期的表单验证
  2. 纯 JS 表单验证(非 ajax)
  3. jQuery 表单验证(ajax)
  4. 当输入很多时
    1. 收集表单数据
    2. 批量验证
    3. 错误处理
    4. 抽离为插件
  5. HTML 默认表单验证

远古时期的表单验证

由服务器判断(页面刷新)

在页面中显示错误

JS 表单验证

用 JS 判断

  1. string.indexOf('@')
  2. regExp.test(email)

jQuery 表单验证

还是用 JS 判断

  1. string.indexOf('@')
  2. regExp.test(email)

 

不过可以 ajax 了(用 JS 写也可以,就是很麻烦)

  1. success: 提示成功
  2. error: 提示失败

input 很多怎么办

问题:

  1. 收集 input 很麻烦
  2. 一个一个验证很麻烦

 

解决:

  1. $form.serialize()
  2. 批量验证

HTML 5 默认表单验证

注意:

兼容性存在问题

 

name=email name=url name=number

required

pattern="[A-Za-z-0-9]+"

为什么对JS没感觉

没有尝试(自学)的思维

没有创造的勇气

没有跟自己设定一个目标

表单验证

By 方方

表单验证

  • 1,604