十二、表单验证技术

男娘i 2023-01-14 01:54 97阅读 0赞

### 文章目录 ###

*  十二、表单验证技术
 *   *  12.1 表单验证概述
     *  12.2 表单验证方式
     *   *  12.2.1 编程式表单验证(基本不用)
         *  12.2.2 正则表达式表单验证
         *   *  12.2.2.1 正则表达式元字符
             *  12.2.2.2 正则表达式限定符
     *  12.3 JS 中常用事件
     *  12.4 常用函数

--------------------

# 十二、表单验证技术 #

## 12.1 表单验证概述 ##

<1> 表单验证指在客户端中对用户输入的数据进行有效性(合法性)检测;检测不通过不让提交给服务端；检测通过后才让数据提交给服务端以这种方式来降低服务端的压力;

<2> 有效性主要指：

1.  是否为空；
2.  格式检测；
3.  自定义内容检测(长度，非法字符检测,多次输入一致性检测)；
4.  表单验证使用 onsubmit 事件进行操作，当点击表单提交按钮时会先执行 onsubmit 事件中的函数，如果该函数返回 true 则表示验证通过，执行 action(提交表单)；如果该函数返回 false 则表示验证失败，不执行 action(不提交表单)。  
    ![在这里插入图片描述][20210419221119788.png]

## 12.2 表单验证方式 ##

### 12.2.1 编程式表单验证(基本不用) ###

通过编程程序逻辑的方式对表单中的数据进行验证，这种验证方式不够严谨，容易出错，编写麻烦。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70]

### 12.2.2 正则表达式表单验证 ###

正则表达式是通过一些具有特殊意义的字符组成的一系列验证规则来进行表单验证，正则表达式的特点：语法简洁，没有任何逻辑，更加严谨。

#### 12.2.2.1 正则表达式元字符 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 1]

#### 12.2.2.2 正则表达式限定符 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 2]  
正则表达式的写法:

Var reg = /^张三$/;
    第一个”/”表示正则表达式开始
    最后一个”/”表示正则表达式结束
    “^”表示字符串开始
    “$”表示字符串结束

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 3]

## 12.3 JS 中常用事件 ##

1.  Onclick:鼠标单击事件；
2.  Onmouseover:鼠标悬浮事件；
3.  Onmouseout:鼠标离开事件；
4.  Onload:页面加载事件；
5.  Onsubmit:表单提交事件；
6.  Onblur:失去焦点事件；
7.  Onfocus:获得焦点事件。

## 12.4 常用函数 ##

1.  setTimeout(函数，事件)：延时器，该函数会自动暂定指定的时间(毫秒),时间到达后自动执行指定的函数；
2.  setInterval(函数，时间)：定时器，该函数每个指定的时间(毫秒)之间一次指定的函数；
3.  trim()：截取字符串两端空白符。  
    **注意:JS 中使用样式表的方式**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 4]

[20210419221119788.png]: /images/20221022/21bb47885ecb4479bb2d0da239c3b5e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70]: /images/20221022/7f8294cb24df4b7fa97bf24b097479fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 1]: /images/20221022/b105fa9f0ad449cb819f128d6a0813dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 2]: /images/20221022/a4405b3d933b4648a2fdc0260fc95f03.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 3]: /images/20221022/b75c96e370fb4214bd4dd2f6b3a3ad36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyOTE2NDA4_size_16_color_FFFFFF_t_70 4]: /images/20221022/13e977806e544a7da20a8092d12d6c0e.png