表单校验

---

一、为什么要表单验证？

• 减轻服务器的压力
• 暴增输入的数据符合要求
  

常用的表单验证

• 日期格式
• 表单元素是否为空
• 用户名和密码
• E-mail地址
• 身份证号码
  

二、为什么使用表单选择器

表单选择器用于选取某些特定的表单元素，比如所有单选按钮或隐藏的元素

表单选择器：

• 属性过滤选择器

三、使用String对象验证

1.验证邮箱

实现思路：

• 使用val( )方法获取文本框的值
• 使用indexOf( ) 来判断字符串是否包含“@”和“.”
• 使用方法submit( )提交表单
• 根据返回值是true还是false来决定是否提交表单

字符串验证：

• 非空验证
  

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

2.验证文本框内容

实现思路：

• 使用String对象的length属性验证密码的长度
• 验证两次输入密码是否一致
• 使用length属性获取文本长度，然后使用for循环和s - ubstring( )方法依次截断单个字符，最后判断每个字符是否是数字

字符串验证：

• 长度验证
  

• 判断字符串是否有数字
  使用for循环和substring()方法依次截断单个字符，再判断每个字符是否是数字
  

四、表单验证事件和方法

• 表单验证需要综合运用元素的事件和方法

1.文本输入提示特效

实现思路：

• 把错误信息显示在中，然后使用html()方法，设置和之间的内容
• 编写脚本验证函数
• 鼠标失去焦点时（blur事件）调用验证函数

五、正则表达式

为什么需要正则表达式

• 简洁的代码
• 严谨的验证文本框中的内容

1.定义正则表达式

普通方式：

var reg=/表达式/附加参数;

构造函数：

var reg=new RegExp("表达式","附加参数");

2.表达式的模式

简单模式：

• 只能表示具体的匹配

var reg=/china/;
var reg=/abc8/;

复合模式：

• 可以使用通配符表达更为抽象的规则模式

var reg=/^\w+$/;
var reg=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;

3.RegExp对象

RegExp对象的方法

RegExp对象的属性

4.String对象的方法

5.正则表达式符号

六、使用HTML5的方式验证表单

• HTML5新增属性
• validity属性

1.HTML5新增属性

HTML5新增验证属性

2.validity属性

validityState对象