|
表单校验
Why：减轻服务器压力 保证输入的数据符合要求
常用表单验证
日期格式
表单元素是否为空
用户名和密码
- mail地址
身份证号码
验证思路：
当数据不符合要求怎么编写脚本 :
- 获得表单元素值2.使用JavaScript的一些方法对数据进行判断3.当表单提交时，触发事件，对获取的数据进行验证
表单选择器：
:input 匹配所有input textarea select button元素 $(“#myform :input”)选取表单中所有的input，select和button元素
:text 匹配所有单行文本框 $(“#myform :text”)选取email和姓名两个input元素
:password 匹配所有密码框 $(“#myform :password”)选取所有type=“password”元素
:radio 匹配所有单选按钮 $(“#myform : radio”)选取type=“radio”元素
:checkbox 匹配所有复选框 CheckBox
:submit 匹配所有提交按钮 submit
：image 图像域 image
：reset 重置按钮 reset
：button 按钮 选取button元素
：file 文件域 file
：hidden 不可见元素，或者type为hidden的元素 $() 选取<input type=”hidden”/> 或者style=“display none”等元素
属性过滤选择器
:enable 匹配所有可用元素 $(#userform :enabled)匹配form内部除编号输入框外的所有元素
:disabled 匹配所有不可用元素 $(#userform :disabled)匹配编号输入框
:checked 匹配所有被选中元素(复选框，单选按钮，select中的option) $(#userform :checked)匹配“性别”中的“男”选项和爱好中的编程选项
:selected 匹配所有选中的option元素 $(#userform :selected)匹配“家乡”中的“北京”选项
使用string对象验证邮箱
不能为空，格式正确
文本框验证：
密码不能为空，不少于6个字符，姓名不能为空，不能有数字
文本框内容的验证
校验提示特效
表单验证需要综合运用元素的事件和方法
事件： onblur 失去焦点，当光标离开某个文本框时触发
Onfocus 获得焦点，当光标进入某个文本框时触发
方法：blur() 从文本域中移开焦点
Focus() 从文本域中设置焦点，即获得鼠标光标
Select() 选取文本域中的内容，突出显示输入区域的内容
文本输入提示特效：
正则表达式
为什么使用：
简洁的代码 严谨的验证文本框中的内容
定义正则表达式
普通方式 var reg=/表达式/附加参数
Var reg=/white/
Var reg=/white/g
参数g代表可以全局匹配
I代表不区分大小写
M 表示可以进行多行匹配
构造函数 var reg=new RegExp（“表达式”，“附加参数”）
Var reg=new RegExp(“white”)
Var reg=new RegExp(“white”,”g”)
表达式模式
只能表示具体的匹配
Var reg=/china/
Var reg=/abc8/
复合模式
可以使用通配符表达更为抽象的规则模式
Var reg=/^\w+$/
Var reg=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/
^表示已XX开头
$表示已XX结尾
\w代表英文字符，数字，下划线
+代表一次或多次
RegExp对象的方法
Exec 检索字符中是正则表达式的匹配，返回找到的值，并确定其位置
Test 检索字符串中指定的值，返回true或false
RegExp对象的属性
Global RegExp对象是否具有标志g
ignoreCase i
Multiline m
String对象的方法
Match 找到一个或多个正则表达式的匹配
Search 检索与正字表达式相匹配的值
Replace 替换与正则表达式匹配的字符串
Split 把字符串分割为字符串数组
正则表达式的符号
/.../ 代表一个模式的开始和结束
^ 匹配字符串的开始
$ 匹配字符串的结束
\s 任何空白字符
\S 任何非空白字符
\d 匹配一个数字字符，等价于[0-9]
\D 除了数字之外的任何字符，等价于[^0-9]
\w 匹配一个数字、下划线或字母字符，等价于[A-Z a-z 0-9 ]
\W 任何非单字字符，等价于[^a-zA-Z0-9]
. 除了换行之外的任意字符
{n}匹配前一项n次
{n,}匹配前一项n次，或者多次
{n,m}匹配前一项n次但是不能超过m次
* 匹配前一项0次或多次，等价于{0,}
+ 1 1
? 0 1 也就是说前一项是可选的，等价于{0,1}
对年龄进行验证，年龄必须在0-120之间
10-99这个范围都是两位数，正则表达式为[1-9]\d
0-9 这个范围是一位数，正则表达式为\d
100-119这个范围是三位数，正则表达式为1[0-1]\d
所有年龄的个位都是[0-9],当百位是1，十位是0-1，正则表达式为(1[0-9]|[1-9])?\d
年龄120是单独的一种情况，需要单独列出来
使用HTML5方式验证表单
HTML5新增属性
Placeholder 提供一种提示(hint),输入域为空时显示，获得焦点输入内容后消失
Require 规定输入域不能为空
Pattern 规定验证input域的模式(正则表达式)
Validity state属性
valueMissing 表单元素设置了require特性，则为必填。如果必填项的值为空，就无法通过表单验证，valueMissing属性会返回true，否则返回false
typeMismatch 输入值与type类型不匹配，HTML5新增的表单类型如：email、number、URL等都包含一个原始的类型验证。如果用户输入的内容与表单类型不符合，则typeMismatch属性将返回true，否则返回false
patternMismatch 输入值与pattern特性的正则表达式不匹配，如果输入的内容不符合pattern验证模式的规则，则patternMismatch属性将返回true否则返回false
tooLong 输入的内容超过了表单元素的maxLength特性限定的字符长度。虽然在输入的时候会限制表单内容的长度，但在某种情况下，如通过程序设置，还是会超出最大长度限制如果输入的内容超过了最大长度限制，则tooLong属性返回true否则返回false
rangeUnderflow 输入的值小于min特性的值，如果输入的数值小于最小值，则rangeUnderflow属性返回true否则返回false
rangeOverflow 输入的值大于max特性的值，如果输入的数值大于最大值，则rangeOverflow属性返回true否则返回false
stepMismatch 输入的值不符合step特性所推算的规则，用于填写数值的表单元素可能需要同时设置min max 和step特性，这就限制了输入的值必须是最小值与step特性值的倍数之和，例如从0到10，step特性值为2，因为合法值为该范围内的偶数，其他数值均无法通过验证，如果输入值不符合要求，则stepMismatch属性值返回true否则返回false
customError 使用自定义的验证错误提示信息，使用setCustomValidity（）方法自定义错误提示信息;setCustomValidity（message）会把错误提示信息自定义为message，此时customError属性值为true：setCustomValidity（“”）会清除自定义的错误信息，此时customError属性值为false
| 
转播
