jQuery-表单校验

末蓝、 2022-05-12 08:36 389阅读 0赞

## **为什么要表单验证** ##

**    1.****减轻服务器的压力      2.****保证输入的数据符合要求**

![70][]

## **常用的表单验证** ##

1.  日期格式
2.  表单元素是否为空
3.  用户名和密码
4.  E-mail地址
5.  身份证号码

![70 1][]

**表单选择器**

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:99px;"> 语法 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:310px;"> 描述 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:441px;"> 示例 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:99px;"> :input </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:310px;"> 匹配所有input、textarea、select和button 元素 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:441px;"> $("#myform&nbsp; :input")选取表单中所有的input、select和button元素 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:99px;"> :text </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:310px;"> 匹配所有单行文本框 </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:441px;"> $("#myform&nbsp; :text")选取email 和姓名两个input 元素 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:99px;"> :password </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:310px;"> 匹配所有密码框 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:441px;"> $("#myform&nbsp; :password"&nbsp;)选取所有 &lt;input type="password" /&gt;元素 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:99px;"> :radio </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:310px;"> 匹配所有单项按钮 </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:441px;"> $("#myform&nbsp; :radio")选取&lt;input type="radio" /&gt;元素 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:99px;"> :checkbox </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:310px;"> 匹配所有复选框 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:441px;"> $(" #myform&nbsp; :checkbox "&nbsp;)选取 &lt;input type="checkbox " /&gt;元素 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:99px;"> :submit </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:310px;"> 匹配所有提交按钮 </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:441px;"> $("#myform&nbsp; :submit "&nbsp;)选取 &lt;input type="submit " /&gt;元素 </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:79pt;"> 语法 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:210pt;"> 描述 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:489px;"> 示例 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:79pt;"> :image </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:210pt;"> 匹配所有图像域 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:489px;"> $("#myform&nbsp; :image"&nbsp;)选取 &lt;input type=" image" /&gt;元素 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:79pt;"> :reset </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:210pt;"> 匹配所有重置按钮 </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:489px;"> $(" #myform&nbsp; :reset "&nbsp;)选取 &lt;input type=" reset " /&gt;元素 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:79pt;"> :button </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:210pt;"> 匹配所有按钮 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:489px;"> $("#myform&nbsp; :button"&nbsp;)选取button 元素 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:79pt;"> :file </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:210pt;"> 匹配所有文件域 </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:489px;"> $(" #myform&nbsp; :file"&nbsp;)选取 &lt;input type=" file " /&gt;元素 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:79pt;"> :hidden </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:210pt;"> 匹配所有不可见元素，或者type 为hidden的元素 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:489px;"> $("#myform&nbsp; :hidden"&nbsp;)选取&lt;input type="hidden " /&gt;、style="display: none"等元素 </td> 
 </tr> 
 </tbody> 
</table>

**属性过滤选择器**

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:96pt;"> 语法 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:193pt;"> 描述 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:391pt;"> 示例 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:96pt;"> :enabled </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:193pt;"> 匹配所有可用元素 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:391pt;"> $(" #userform :enabled"&nbsp;)匹配form内部除编号输入框外的所有元素 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:96pt;"> :disabled </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:193pt;"> 匹配所有不可用元素 </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:391pt;"> $(" #userform :disabled"&nbsp;)匹配编号输入框 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:96pt;"> :checked </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:193pt;"> 匹配所有被选中元素（复选框、单项按钮、select 中的option） </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:391pt;"> $(" #userform :checked"&nbsp;)匹配“性别”中的“男”选项和“爱好”中的“编程”选项 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:96pt;"> :selected </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:193pt;"> 匹配所有选中的option 元素 </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:391pt;"> $(" #userform :selected"&nbsp;) 匹配“家乡”中的“北京”选项 </td> 
 </tr> 
 </tbody> 
</table>

# **验证表单内容：** #

使用String 对象验证邮箱：不能为空，格式正确。

## 非空验证： ##

if (mail == "") {        【检测Email是否为空】
    
         alert("Email不能为空");
    
         return false;
    
    }

## 字符串查找：indexOf()： ##

查找某个指定的字符串值在字符串中首次出现的位置

var str="this is JavaScript";
    
    var selectFirst=str.indexOf("Java");    【返回8】
    
    var selectSecond=str.indexOf("Java",12);        【返回-1】

## 文本框内容的验证： ##

密码不能为空，不少于6个字符，姓名不能为空，不能有数字。

## 长度验证： ##

if(pwd.length<6){          【length属性可以获取字符串长度】
 
     alert("密码必须等于或大于6个字符");
 
     return false;
 
 }

## 判断字符串是否有数字： ##

使用for循环和substring()方法依次截断单个字符，再判断每个字符是否是数字

for (var i = 0; i < user.length; i++) {
 
     var j = user.substring(i, i + 1);     【截取单个字符】
 
     if (isNaN(j) == false) {
 
         alert("姓名中不能包含数字");
 
         return false;
 
     }
 
 }

# **表单验证事件和方法** #

## 表单验证需要综合运用元素的事件和方法： ##

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:73pt;"> 类别 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:107pt;"> 名称 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:425pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:73pt;"> 事件 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:107pt;"> onblur </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:425pt;"> 失去焦点，当光标离开某个文本框时触发 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:107pt;"> onfocus </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:425pt;"> 获得焦点，当光标进入某个文本框时触发 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:73pt;"> 方法 </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:107pt;"> blur() </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:425pt;"> 从文本域中移开焦点 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:107pt;"> focus() </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:425pt;"> 在文本域中设置焦点，即获得鼠标光标 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:107pt;"> select() </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:425pt;"> 选取文本域中的内容，突出显示输入区域的内容 </td> 
 </tr> 
 </tbody> 
</table>

# **正则表达式：** #

## 为什么需要正则表达式： ##

1.  简洁的代码
2.  严谨的验证文本框中的内容

示例：

## 普通方式： ##

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

var reg=/white/;
    
    var reg=/white/g;

【表达式必须是常量字符串】

【用某些附加参数来代表一些规则：g代表可以进行全局匹配；i代表不区分大小写；m代表可以进行多行匹配】

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

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

【表达式必须是可以是字符串，也可以是JavaScript当中的常量】

## 简单模式： ##

只能表示具体的匹配

var reg=/china/;
    
    var reg=/abc8/;

复合模式：可以使用通配符表达更为抽象的规则模式

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

## RegExp对象： ##

### RegExp对象的方法： ###

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:top;width:89pt;"> 方法 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:top;width:468pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:89pt;"> exec </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:468pt;"> 检索字符中是正则表达式的区配，返回找到的值，并确定其位置 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:89pt;"> test </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:468pt;"> 检索字符串中指定的值，返回true或false </td> 
 </tr> 
 </tbody> 
</table>

### RegExp对象的属性： ###

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:top;width:139pt;"> 属性 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:top;width:417pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:139pt;"> global </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:417pt;"> RegExp对象是否具有标志g </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:139pt;"> ignoreCase </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:417pt;"> RegExp对象是否具有标志i </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:139pt;"> multiline </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:417pt;"> RegExp对象是否具有标志m </td> 
 </tr> 
 </tbody> 
</table>

## **String对象：** ##

### String对象的方法： ###

### Match和search的区别： ###

search在一个字串对象中查找关键词字串，若匹配则返回关键词在目标字串中第一次出现的位置序列，如果不匹配，就返回-1；search方法只关心有无匹配，找到匹配，就提供返回值，并中断查找。

match是在目标字串对象中寻找与关键词匹配与否的一个方法，它能通过关键词的规则创建实现复杂搜寻功能；不建立规则的前提下，match可当作search来使用，语法也一样，不同的是，若匹配它返回的是关键词自身，若不匹配返回null。

## 正则表达式符号： ##

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:top;width:96pt;"> 符号 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:top;width:461pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:top;width:96pt;"> /…/ </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:top;width:461pt;"> 代表一个模式的开始和结束 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:top;width:96pt;"> ^ </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:top;width:461pt;"> 匹配字符串的开始 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:top;width:96pt;"> $ </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:top;width:461pt;"> 匹配字符串的结束 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:top;width:96pt;"> \s </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:top;width:461pt;"> 任何空白字符 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:top;width:96pt;"> \S </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:top;width:461pt;"> 任何非空白字符 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:top;width:96pt;"> \d </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:top;width:461pt;"> 匹配一个数字字符，等价于[0-9] </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:top;width:96pt;"> \D </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:top;width:461pt;"> 除了数字之外的任何字符，等价于[^0-9] </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:top;width:96pt;"> \w </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:top;width:461pt;"> 匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_] </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:top;width:96pt;"> \W </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:top;width:461pt;"> 任何非单字字符，等价于[^a-zA-z0-9_] </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:top;width:96pt;"> . </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:top;width:461pt;"> 除了换行符之外的任意字符 </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:top;width:96pt;"> 符号 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:top;width:461pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:96pt;"> {n} </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:461pt;"> 匹配前一项n次 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:96pt;"> {n,} </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:461pt;"> 匹配前一项n次，或者多次 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:96pt;"> {n,m} </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:461pt;"> 匹配前一项至少n次，但是不能超过m次 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:96pt;"> * </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:461pt;"> 匹配前一项0次或多次，等价于{0,} </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:96pt;"> + </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;text-align:justify;vertical-align:middle;width:461pt;"> 匹配前一项1次或多次，等价于{1,} </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:96pt;"> ？ </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;text-align:justify;vertical-align:middle;width:461pt;"> 匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1} </td> 
 </tr> 
 </tbody> 
</table>

## **正则示例：** ##

对年龄进行验证，年龄必须在0－120之间

1.  0-9这个范围是一位，正则表达式为\\d
2.  10-99这个范围都是两位数，正则表达式为\[1-9\]\\d
3.  100-119这个范围是三位数，正则表达式为1\[0-1\]\\d
4.  所有年龄的个位都是0-9，当百位是1，十位是0-1，正则表达式为(1\[0-1\]|\[1-9\])?\\d
5.  年龄120是单独的一种情况，需要单独列出来

## **验证方法示例：** ##

用.test来检测是否符合设置的正则表达式

$(document).ready(function(){
    
    $("#code").blur(function(){
    
    var code = $(this).val();
    
    var $codeId = $("#divCode");
    
    var regCode = /^\d{6}$/;
    
    if (regCode.test(code) == false) {
    
    $codeId.html("邮政编码不正确，请重新输入");
    
    return false;
    
    }
    
    $codeId.html("");
    
    return true;    }  );

# **使用HTML5的方式验证表单：** #

## HTML5新增验证属性： ##

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:125pt;"> 属性 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:454pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:125pt;"> placeholder </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:454pt;"> 提供一种提示（hint），输入域为空时显示，获得焦点输入内容后消失 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:125pt;"> required </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:454pt;"> 规定输入域不能为空 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:125pt;"> pattern </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:454pt;"> 规定验证input域的模式（正则表达式） </td> 
 </tr> 
 </tbody> 
</table>

示例：

## validity属性： ##

为了在使用required、pattern时有更好的提示

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:159pt;"> 属性 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:454pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:159pt;"> valueMissing </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:top;width:454pt;"> 表单元素设置了required特性，则为必填项。如果必填项的值为空，就无法通过表单验证，valueMissing属性会返回true，否则返回false。 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:159pt;"> typeMismatch </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:top;width:454pt;"> 输入值与type类型不匹配。HTML 5新增的表单类型如email、number、url等，都包含一个原始的类型验证。如果用户输入的内容与表单类型不符合，则typeMismatch属性将返回true，否则返回false。 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:159pt;"> patternMismatch </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:top;width:454pt;"> 输入值与pattern特性的正则表达式不匹配。如果输入的内容不符合pattern验证模式的规则，则patternMismatch属性将返回true，否则返回false。 </td> 
 </tr> 
 </tbody> 
</table>

![70 2][]

<table> 
 <tbody> 
 <tr> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;width:129px;"> 属性 </td> 
 <td style="background-color:#0070c0;border-color:#2163b4;text-align:center;vertical-align:middle;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:middle;width:129px;"> stepMismatch </td> 
 <td style="background-color:#d3e2f7;border-color:#2163b4;vertical-align:top;"> 输入的值不符合step特性所推算出的规则。用于填写数值的表单元素可能需要同时设置min、max和step特性，这就限制了输入的值必须是最小值与step特性值的倍数之和。例如范围从0到10，step特性值为2，因为合法值为该范围内的偶数，其他数值均无法通过验证。如果输入值不符合要求，则stepMismatch属性返回true，否则返回false </td> 
 </tr> 
 <tr> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:middle;width:129px;"> customError </td> 
 <td style="background-color:#eaf1fb;border-color:#2163b4;vertical-align:top;"> 使用自定义的验证错误提示信息。使用setCustomValidity( )方法自定义错误提示信息：setCustomValidity(message)会把错误提示信息自定义为message，此时customError属性值为true；setCustomValidity("")会清除自定义的错误信息，此时customError属性值为false。 </td> 
 </tr> 
 </tbody> 
</table>

![70 3][]

[70]: /images/20220512/a8e244b0579d4f0382084c0525021f2c.png
[70 1]: /images/20220512/fdacafca9cd747e49f3ad067d26f8fd6.png
[70 2]: /images/20220512/326f332a8eb1484fac7aebafe87245fd.png
[70 3]: /images/20220512/1ea274f2d97b45a1b4072121cc9f71fd.png