第九章-表单校验

本章简介:

本章将要认识一种非常实用的技术——表单校验。

以及认识正则表达式验证,使用它实现更精准更高效的验证。

最后认识JQuery中的一种选择器——表单选择器。

本章单词:

Regular             有规律的

Match               前进

Split                        分离

Validity             有效的

Placeholder       提示符

扫描二维码关注公众号,回复: 1814787 查看本文章

Required                 必须到

Pattern             样品

9、1     表单基本验证

1、无论是动态网站,还是静态网站,都离不开表单

表单作为客户端向服务器提交的主要载体,如果提交的不合法,将会引发各种各样的问题。

 

2、使用JavaScript可以十分便捷地进行表单验证,它不但能检查用户输入的无效或错误数据,还能检查用户遗漏的必选项,从而减轻服务器端的压力。

 

3、客户端验证实际上就是在已下载的页面中,当用户提交表单时,它直接在页面上调用脚步进行验证,这样可以减少服务器端的运算。

 

4、服务器端验证则是将页面提交到服务器,由服务器端的程序对提交的表单进行数据验证,然后响应结果到客户端

9、2     表单选择器

使用JQuery进行表单验证,首先就是使用选择器获取元素,在一些复杂的表单中,有时候需要获取多个表单元素,JQuery提供了专门针对表单一类的选择器:

表单选择器。

//匹配表单中所有的  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();

 

9、3     正则表达式

正则表达式是一个描述字符模式的对象,它是由一些特殊的符号组成的,这些符号在 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]+"\n";
}

5、 RegExp对象的属性

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

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

3multiline
此属性用于返回正则表达式是否具有标志 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} 表示三个空格。

9、4     使用HTML5的方式验证表单

1、HTML5新增验证属性

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

2require
   
规定输入域不能为空

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

2、validity属性

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

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

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

本章总结:

1、使用表单选择器和表单属性过滤器可以方便地获取匹配的表单元素

2、表单校验中常用的俩个事件是 onsubmit 和 onblur,

3、定义正则表达式有两种构造形式,普通方式和构造函数方式

4、正则表达式分为简单模式和复合模式

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

6、使用 RegExp对象的 test()方法检测一个字符串是否匹配某个模式

7、使用HTML5的新增属性和 validity属性验证表单内容。

猜你喜欢

转载自blog.csdn.net/weixin_42413153/article/details/80808073