表单验证

表单选择器。正则表达式

//匹配表单中全部的  input selet button 元素
$("form :input");数组

//匹配全部的单行文本框
$("form :text");函数

//匹配全部的密码框
$("form :password");工具

//匹配全部的单选按钮
$("form :radio");ui

//匹配全部复选框
$("form :checkbox");spa

//匹配全部的提交按钮
$("form :submit");regexp

//匹配全部图像按钮
$("form :image");orm

//匹配全部重置按钮
$("form :reset");对象

//匹配全部按钮
$("form :button");ip

//匹配全部文件域
$("form :file");

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

 

表单属性选择器

 

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

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

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

//匹配全部选中元素
$("form :selected");
 

表单验证方法

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

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

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

 正则表达式

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

 

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

 

一、 定义正则表达式

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

//普通方式
//表达式:一个字符串表明了某种规则,其中能够使用某些特殊字符来表明特殊的规则。
//附加参数:用来扩展表达式的含义 主要参数有三个  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变量。

 

二、 表达式的模式

不管使用哪一种方式定义正则表达式,都须要规定表达式的模式。

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

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

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

 

 

三、 RegExp对象


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


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

 

四、 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]+"\n";
}

五、 RegExp对象的属性

 

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

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

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

 

六、 正则表达式的经常使用符号


/../     :     表明一个模式的开始与结束
^        :     匹配字符串的开始
$        :     匹配字符串的结束
\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}

 

八、正则表达式有 ()、[]、{}

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

 

 

   使用HTML5的方式验证表单

 

一、HTML5新增验证属性

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

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

三、pattern
    规定验证input 域的模式(正则表达式)

 

二、validity属性

Validity属性能够获取对象的 validityState对象

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

一、valueMissing  二、typeMismatch三、patternMismatch四、tooLong五、rangeUnderflow六、rangeOverflow七、stepMismatch八、customError

相关文章
相关标签/搜索
本站公众号
   欢迎关注本站公众号,获取更多信息