表单验证

为什么要表单验证？
1：减轻服务器的压力
2：保证输入的数据符合要求

当输入的表单数据不符合要求时，如何编写脚本来进行提示？

1：获得表单元素值

2：使用JavaScript的一些方法对数据进行判断
3：当表单提交时，触发事件，对获取的数据进行验证

:input–匹配所有input、textarea、select和button 元素 –$(“#myform :input”)选取表单中所有的input、select和button元素

:text 匹配所有单行文本框 $(“#myform :text”)选取email 和姓名两个input 元素

:password 匹配所有密码框 $(“#myform :password”?)选取所有
元素

:radio 匹配所有单项按钮 $(“#myform :radio”)选取元素

:checkbox 匹配所有复选框 $(” #myform :checkbox “?)选取
元素

:submit 匹配所有提交按钮 $(“#myform :submit “?)选取
元素

:image 匹配所有图像域 $(“#myform :image”?)选取
元素

:reset 匹配所有重置按钮 $(” #myform :reset “?)选取
元素

:button 匹配所有按钮 $(“#myform :button”?)选取button 元素

:file 匹配所有文件域 $(” #myform :file”?)选取
元素

:hidden 匹配所有不可见元素，或者type 为hidden的元素 $(“#myform :hidden”?)选取、style=”display: none”等元素

属性过滤选择器：
:enabled 匹配所有可用元素 $(” #userform :enabled”?)匹配form内部除编号输入框外的所有元素

:disabled 匹配所有不可用元素 $(” #userform :disabled”?)匹配编号输入框

:checked 匹配所有被选中元素（复选框、单项按钮、select 中的option） $(” #userform :checked”?)匹配“性别”中的“男”选项和“爱好”中的“编程”选项

:selected 匹配所有选中的option 元素 $(” #userform :selected”?) 匹配“家乡”中的“北京”选项

字符串验证：
1：非空验证：
if (mail == “”) {
检验Email是否为空
alert(“Email不能为空”);

return false;

}

字符串查找：

indexOf()：查找某个指定的字符串值在字符串中首次出现的位置

var str=”this is JavaScript”;
var selectFirst=str.indexOf(“Java”);
var selectSecond=str.indexOf(“Java”,12)

长度验证：
if(pwd.length<6){
alert(“密码必须等于或大于6个字符”);
return false;
}

判断字符串是否有数字：

使用for循环和substring()方法依次截断单个字符，再判断每个字符是否是数字
for (var i = 0; i < user.length; i++) {

var j = user.substring(i, i + 1);

if (isNaN(j) == false) {

alert(“姓名中不能包含数字”);

return false;
}
}

事件：onblur：失去焦点，当光标离开某个文本框时触发
onfocus：获得焦点，当光标进入某个文本框时触发
方法：blur()：从文本域中移开焦点
focus()：在文本域中设置焦点，即获得鼠标光标
select()：选取文本域中的内容，突出显示输入区域的内容

为什么需要正则表达式
1：简洁的代码

2：严谨的验证文本框中的内容

var reg= /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/;//一个简单的表达式即可验证邮箱

if(reg.test(email) ==false){

$email_prompt.html(“电子邮件格式不正确,请重新输入”);
return false;
}

定义正则表达式：
普通方式：
var reg=/表达式/附加参数

var reg=/white/;

var reg=/white/g;

构造函数：
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})?$/;

RegExp对象的方法:

exec：检索字符中是正则表达式的区配，返回找到的值，并确定其位置
test：检索字符串中指定的值，返回true或false

RegExp对象的属性:

global：RegExp对象是否具有标志g（简写g）
ignoreCase：RegExp对象是否具有标志i（简写i）
multiline：RegExp对象是否具有标志m（简写m）

String对象的方法:
match:找到一个或多个正则表达式的匹配
search:检索与正则表达式相匹配的值
replace:替换与正则表达式匹配的字符串
split:把字符串分割为字符串数组

正则表达式符号:
/…/：代表一个模式的开始和结束
^：匹配字符串的开始
$：匹配字符串的结束
\s：任何空白字符
\S：任何非空白字符
\d：匹配一个数字字符，等价于[0-9]
\D：除了数字之外的任何字符，等价于[^0-9]
\w：匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]
\W：任何非单字字符，等价于[^a-zA-z0-9_]
.：除了换行符之外的任意字符
{n}：匹配前一项n次
{n,}：匹配前一项n次，或者多次
{n,m}：匹配前一项至少n次，但是不能超过m次
*：匹配前一项0次或多次，等价于{0,}
+：匹配前一项1次或多次，等价于{1,}
？：匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}

HTML5新增验证属性：

placeholder：提供一种提示（hint），输入域为空时显示，获得焦点输入内容后消失
required：规定输入域不能为空
pattern：规定验证input域的模式（正则表达式）

validityState对象
：
stepMismatch：输入的值不符合step特性所推算出的规则。用于填写数值的表单元素可能需要同时设置min、max和step特性，这就限制了输入的值必须是最小值与step特性值的倍数之和。例如范围从0到10，step特性值为2，因为合法值为该范围内的偶数，其他数值均无法通过验证。如果输入值不符合要求，则stepMismatch属性返回true，否则返回false

customError：使用自定义的验证错误提示信息。使用setCustomValidity( )方法自定义错误提示信息：setCustomValidity(message)会把错误提示信息自定义为message，此时customError属性值为true；setCustomValidity(“”)会清除自定义的错误信息，此时customError属性值为false。

总结：
表单校验：
1：表单基本验证技术
2：表单选择器
3：正则表达式
4：使用HTML5的方式验证表单

表单基本验证技术：
1：表单验证的必要性

2：表单验证的内容

3：表单验证的思路
4：
表单验证的事件和方法
5：
使用String对象验证表单内容
6：
表单验证提示特效
7：
使用正则表达式验证表单内容
8：
使用HTML5的方式验证表单内容

表单选择器:
1:使用表单选择器选择网页元素

2:使用表单属性过滤器选择网页元素

正则表达式:
1:定义正则表达式

2:表达式的模式
3:
使用正则表达式验证表单内容

使用HTML5的方式验证表单:
1:HTML5新增属性验证表单内容
2:
使用validity属性进行表单验证提示