表单验证之:正则验证(RegExp正则对象,登录、注册、数组)

表单验证之:正则验证(RegExp正则对象,登录、注册、数组)

一、正则表达式

1. 为什么要正则表达式?

(1).简洁的代码

(2).严谨的验证文本框中的内容

2.定义正则表达式

(1).简单模式

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

    例: var reg=/white/;

         var reg=/white/g;

(2).构造函数

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

    例: var reg=new RegExp("white");

         var reg=new RegExp("white","g");

3. 表达式的模式

(1).简单模式

    var reg=/china/;

    var reg=/abc8/;

(2).复合模式

    var reg=/^\w+$/;

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

4. RegExp 对象

4.1属性

global

RegExp对象是否具有标志g

ignoreCase

RegExp对象是否具有标志i

multiline

RegExp对象是否具有标志m

 

4.2方法

test() 方法是一个正则表达式方法。用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。

exec() 方法用于检索字符串中的正则表达式的匹配。

该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。

exec

检索字符中是正则表达式的区配,返回找到的值,并确定其位置

test

检索字符串中指定的值,返回truefalse

 

5.String 对象

match

找到一个或多个正则表达式的匹配

search

检索与正则表达式相匹配的值

replace

替换与正则表达式匹配的字符串

split

把字符串分割为字符串数组

6. 正则表达式符号

表达式    描述

[abc]        查找方括号之间的任何字符。

[0-9]         查找任何从 0 至 9 的数字。

(x|y)         查找任何以 | 分隔的选项。

元字符是拥有特殊含义的字符:

元字符    描述

\d     查找数字。

\s     查找空白字符。

\b     匹配单词边界。

\uxxxx      查找以十六进制数 xxxx 规定的 Unicode 字符。

量词:

量词         描述

n+    匹配任何包含至少一个 n 的字符串。

n*    匹配任何包含零个或多个 n 的字符串。

n?     匹配任何包含零个或一个 n 的字符串

7. Select对象常用事件、方法和属性

类别

名称

描述

事件

onchange

当改变选项时调用的事件

方法

add()

向下拉列表中添加一个选项

属性

options[]

返回包含下拉列表中的所有选项的一个数组

selectedIndex

设置或返回下拉列表中被选项目的索引号

length

返回下拉列表中的选项的数目

8. options对象常用事件、方法和属性

text:设置或返回某个选项的纯文本值

value:设置或返回被送往服务器的值

9.数组

9.1.创建数组

  JavaScript 中使用 new 关键字来创建数组,语法如下:

  // 创建空数组:

  new Array()

  // 创建 num 个元素的数组:

  new Array(num)

  // 直接创建带有元素值的数组:

  new Array(element0,element1,element2...)

  说明:Array(3) 表示创建元素个数为 3 的数组,但实际上该数组的元素个数仍然是可变的。

  以下是常用的创建数组的例子:

var array_1 = new Array();

array_1[0] = 'a';

array_1[1] = 10.5;

array_1[2] = true;

var array_2 = new Array(3)

array_2[0] = {x:10, y:15};

array_2[1] = document.getElementById("article");

array_2[2] = new Array();

9.2. 数组元素的操作

9.2.1读取元素的值

  数组包含了多个数组元素,对数组元素的访问是通过下标来完成的,注意下标是从 0 开始计数的:

  var array_3 = new Array('a',10.5,true);

  alert( array_3[1] );      // 输出:10.5

9.2.2修改元素的值

  var array_3 = new Array('a',10.5,true);

  array_3[1] = 20; // 赋新值给元素

  alert( array_3[1] );      // 输出:20

  如果想替换数组中的一个或多个元素,请参考《JavaScript splice 方法:插入、删除或替换数组的元素》。

9.2.3增加元素

  JavaScript 支持以下标的新式直接在数组后面增加新的元素:

  var array_3 = new Array('a',10.5,true);

  array_3[3] = 'new value';   // 赋新值给元素

  alert( array_3[3] );               // 弹出提示窗输出:20

  增加数组元素更多的方法还可以参考:

9.2.3.1JavaScript push 方法:向数组的末尾添加一个或多个元素

         push 方法实例

         <script language="JavaScript">

         var array_1 = new Array('a','b','c');

         document.write( array_1.push(1,2) + '<br />' );

         document.write( array_1 );

         </script>

9.2.3.2JavaScript unshift 方法:向数组的开头添加一个或多个元素

         unshift 方法实例

         <script language="JavaScript">

         var array_1 = new Array('a','b','c');

         document.write( array_1.unshift(1,2) + '<br />' );

         document.write( array_1 );

         </script>

9.2.3.3JavaScript splice 方法:插入、删除或替换数组的元素

         splice 方法删除元素实例

         <script language="JavaScript">

         var array_1 = new Array('a','b','c','d');

         document.write( array_1.splice(1,2) + '<br />' );

         document.write( array_1 );

         </script>

 

         splice 方法插入元素实例

         当 num 参数设置为 0 且 element1 等参数不为空时,将把 element1, ... 等元素插入 start 处。

         <script language="JavaScript">

         var array_1 = new Array('a','b','c','d');

         document.write( array_1.splice(1,0,'tom') + '<br />' );

         document.write( array_1 );

         </script>

 

         splice 方法替换元素实例

         当 num 参数设置大于 0 且 element1 等参数不为空时,将把 element1, ... 等元素替换在被删除的数组处。这个过程我们可以看做是上面删除元素与插入元素的结合。

         <script language="JavaScript">

         var array_1 = new Array('a','b','c','d');

         document.write( array_1.splice(1,2,'tom') + '<br />' );

         document.write( array_1 );

         </script>

9.2.4删除元素

  要删除数组元素,请参考以下内容:

9.2.4.1JavaScript pop 方法:向数组的末尾添加一个或多个元素

         <script language="JavaScript">

         var array_1 = new Array('a','b','c');

         document.write( array_1.pop() + '<br />' );

         document.write( array_1 );

         </script>

9.2.4.2JavaScript shift 方法:向数组的开头添加一个或多个元素

         <script language="JavaScript">

         var array_1 = new Array('a','b','c');

         document.write( array_1.shift() + '<br />' );

         document.write( array_1 );

         </script>

9.2.4.3JavaScript splice 方法:插入、删除或替换数组的元素

         删除:

         <script language="JavaScript">

         var array_1 = new Array('a','b','c','d');

         document.write( array_1.splice(1,2) + '<br />' );

         document.write( array_1 );

         </script>

         插入:

         <script language="JavaScript">

         var array_1 = new Array('a','b','c','d');

         document.write( array_1.splice(1,0,'tom') + '<br />' );

         document.write( array_1 );

         </script>

         插入:

         splice 方法替换元素实例

         当 num 参数设置大于 0 且 element1 等参数不为空时,将把 element1, ... 等元素替换在被删除的数组处。这个过程我们可以看做是上面删除元素与插入元素的结合。

         <script language="JavaScript">

         var array_1 = new Array('a','b','c','d');

         document.write( array_1.splice(1,2,'tom') + '<br />' );

         document.write( array_1 );

         </script>

  提示:将数组元素赋值为 null 的方式,只能清除元素的值而不能删除该元素。

 

如果大家想浏览我的下一篇文章,请留言

此文章属于原创,不准随意转载:https://blog.csdn.net/LYQ2332826438

猜你喜欢

转载自blog.csdn.net/LYQ2332826438/article/details/81627954
今日推荐