表单校验

表单选择器。

//匹配表单中所有的  input selet button 元素
$("form :input");

//匹配所有的单行文本框
$("form :text");

//匹配所有的密码框
$("form :password");

//匹配所有的单选按钮
$("form :radio");

//匹配所有复选框
$("form :checkbox");

//匹配所有的提交按钮
$("form :submit");

//匹配所有图像按钮
$("form :image");

//匹配所有重置按钮
$("form :reset");

//匹配所有按钮
$("form :button");

//匹配所有文件域
$("form :file");

//匹配所有不可见元素
$("form :hidden");

 

表单属性选择器

 

//匹配所有可用的元素
$("form :enabled");

//匹配所有不可用元素
$("form :disabled");

//匹配所有被选中元素
$("form :checkbox");

//匹配所有选中元素
$("form :selected");
 

表单验证方法

//失去焦点方法               
$("form").blur();

//获得焦点方法
$("form").focus();

//选取文本内容
$("form").select();
 

 正则表达式

正则表达式是一个描述字符模式的对象，它是由一些特殊的符号组成的，这些符号在 SQLServer中学过的通配符一样，其组成的字符模式用来匹配各种表达式。

 

RegExp 对象是 Regular Expression的缩写，它是对字符串执行模式匹配的强大工具

 

1、 定义正则表达式

定义正则表达式两种构造形式，一种是普通方式，另一种是构造函数的方式。

//普通方式
//表达式：一个字符串代表了某种规则，其中可以使用某些特殊字符来代表特殊的规则。
//附加参数：用来扩展表达式的含义 主要参数有三个  g i  m
var reg = /表达式/附加参数;   //语法
var reg = /white/;           //也可以不加附加参数
var reg = /white/g;         // g : 代表可以进行全局匹配
var reg = /white/i;         // i : 代表不区分大小写匹配
var reg = /white/m;         // m : 代表可以进行多行匹配

//构造函数方式
// 表达式与 附加参数 和 普通方式含义相同
var ret = new RegExp("表达式","附加参数"); //语法
var ret = new RegExp("white","g");
var ret = new RegExp("white","i");
var ret = new RegExp("white","m");

// 普通方式中的表达式必须是一个常量字符串
// 构造函数中的表达式可以是常量字符串，也可以是一个JavaScript变量。

 

2、 表达式的模式

无论使用哪种方式定义正则表达式，都需要规定表达式的模式。

从规范上讲，表达式的模式分为简单模式和复合模式

//简单模式
//简单模式是指通过普通字符的组合来表达的模式
var reg = /china/;
var reg = /abc8/;

//复合模式
//复合模式是指含有通配符来表达的模式，类似于SQL通配符
var reg = /^w+$/;

 

 

3、 RegExp对象

//exec();检索字符中是正则表达式的匹配，返回找到的值，并确定其位置。

//test();检索字符串中指定的值，返回 true or flase
//用于检测一个字符串是否匹配某个模式
//语法：  正则表达式对象.test(字符串);
var str = "my cat";
var reg = /cat/;
var end = reg.test(str); //返回true

 

4、 String对象的方法

JavaScript除了支持RegExp对象的正则表达式，还支持String 对象的正则表达式方法。

String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法。

 

//match(); 找到一个或多个正则表达式的匹配
//此方法可以在字符串内检索指定的值，找到一个或多个正则表达式的匹配
//类似indexOf()方法，但是indexOf()返回字符串的位置，而不是自指定的值。
//语法： 字符串对象.macth( searchString or regexpObject );
//searchString 是要检索的字符串的值，regexpObject 是规定要匹配的RegExp对象

var str = "my cat";
var ret = /cat/;
var end = str.match(reg);  //返回值为 cat

//search(); 检索与正则表达式相匹配的值

//replace();替换与正则表达式匹配的字符串
//此方法用于在字符串中用一些字符串替换另一些字符，或替换一个与正则表达式匹配的字符串
//语法 ：字符串对象.replace( RegExp对象或字符串，"替换的字符串");

var str = "My little white cat,is really a very lively cat";
var result = str.replace(/cat/,"dog");
var results =str.replace(/cat/g,"dog");  //全局匹配 g

// result : My little white dog,is really a very lively cat
// results: My little white dog,is really a very lively dog

//split(); 把字符串分割成字符串数组
//此方法将字符串分割成一系列子串并通过一个数组将这一系列子串返回
// 语法 字符串对象.split(分隔符,n);
var str = "red,blue,green,white";
var result = str.split(",");
var string = "";
for(var i=0;i<result.length;i++){
    string =+= result[i]+" ";
}

5、 RegExp对象的属性

 

1、  global
此属性用于返回正则表达式是否具有标志 g，它声明了给定的正则表达式是否执行全局匹配。

2、 ignoreCase
此属性用于返回正则表达式是否具有标志 i, 它声明了给定的正则表达式是否执行忽略大小写的匹配

3、 multiline
此属性用于返回正则表达式是否具有标志 m, 它声明了给定的正则表达式是否以多行模式执行模式匹配

 

6、 正则表达式的常用符号

/../     :     代表一个模式的开始与结束
^        :     匹配字符串的开始
$        :     匹配字符串的结束
s       :     任何空白字符
S       :     任何非空白字符
d       :     匹配一个数字字符，等价于[0-9]
D       :     除了数字之外的任何字符，等价于[^0-9]
w       :     匹配一个数字，下划线或字符字符，等价于[A_Za_z0-9]
W       :     任何非单字字符，等价于[^A_Za_z0-9]
.        :     除了换行符之外的任意字符

 

7、 正则表达式的重复字符

{n}       :     匹配前一项n 次
{n,}      :     匹配前一项n 次，或者多次
{n,m}     :     匹配前一项至少n 次，但是不能超出 m 次
*         :     匹配前一项0 次或多次，等价于 {0,}
+         :     匹配前一项1 次或多次，等价于 {1,}
?         :     匹配前一项0 次或 1 次，前一项是可选的 等价于 {0,1}

 

8、正则表达式有 ()、[]、｛｝

() : 是为了提取匹配的字符串，表达式中有几个() 就有几个相应的匹配字符串
[] : 是定义匹配的字符串
{} : 用来匹配的长度， 如 s{3} 表示三个空格。

 

 

   使用HTML5的方式验证表单

 

1、HTML5新增验证属性

1、 placeholder
    提供一种提示，输入域为空是显示，获得焦点输入内容后消失

2、require
    规定输入域不能为空

3、pattern
    规定验证input 域的模式（正则表达式）

 

2、validity属性

Validity属性可以获取对象的 validityState对象

此对象包含 八个属性，分别针对八个方面的错误验证。

1、valueMissing 
2、typeMismatch
3、patternMismatch
4、tooLong
5、rangeUnderflow
6、rangeOverflow
7、stepMismatch
8、customError