您的位置: 首页  >  文章  >  jQuery中的表单校验重点总结

jQuery中的表单校验重点总结

分类: 文章 • 2022-10-06 16:53:16

常用的表单验证：

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

jQuery中的表单校验重点总结

 

表单验证的优点：

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

 

表单选择器：

语法

描述

示例

:input

匹配所有input、textarea、select和button 元素

$("#myform  :input")选取表单中所有的input、select和button元素

:text

匹配所有单行文本框

$("#myform  :text")选取email 和姓名两个input 元素

:password

匹配所有密码框

$("#myform  :password" )选取所有

<input type="password" />元素

:radio

匹配所有单项按钮

$("#myform  :radio")选取<input type="radio" />元素

:checkbox

匹配所有复选框

$(" #myform  :checkbox " )选取

<input type="checkbox " />元素

:submit

匹配所有提交按钮

$("#myform  :submit " )选取

<input type="submit " />元素

:image

匹配所有图像域

$("#myform  :image" )选取

<input type=" image" />元素

:reset

匹配所有重置按钮

$(" #myform  :reset " )选取

<input type=" reset " />元素

:button

匹配所有按钮

$("#myform  :button" )选取button 元素

:file

匹配所有文件域

$(" #myform  :file" )选取

<input type=" file " />元素

:hidden

匹配所有不可见元素，或者type 为hidden的元素

$("#myform  :hidden" )选取<input type="hidden " />、style="display: none"等元素

属性过滤选择器：

语法

描述

示例

:enabled

匹配所有可用元素

$(" #userform :enabled" )匹配form内部除编号输入框外的所有元素

:disabled

匹配所有不可用元素

$(" #userform :disabled" )匹配编号输入框

:checked

匹配所有被选中元素（复选框、单项按钮、select 中的option）

$(" #userform :checked" )匹配“性别”中的“男”选项和“爱好”中的“编程”选项

:selected

匹配所有选中的option 元素

$(" #userform :selected" ) 匹配“家乡”中的“北京”选项

 

验证表单内容：

使用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;

    }

}

 

表单验证事件和方法

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

类别

名称

描述

事件

onblur

失去焦点，当光标离开某个文本框时触发

onfocus

获得焦点，当光标进入某个文本框时触发

方法

blur()

从文本域中移开焦点

focus()

在文本域中设置焦点，即获得鼠标光标

select()

选取文本域中的内容，突出显示输入区域的内容

 

正则表达式：

为什么需要正则表达式：

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

示例：

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

if(reg.test(email) ==false){   

    $email_prompt.html("电子邮件格式不正确,请重新输入");

    return false;   }

 

普通方式：

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=/^\[email protected]\w+\.[a-zA-Z]{2,3}(\.[a-zA-Z]{2,3})?$/;

 

RegExp对象：

RegExp对象的方法：

方法

描述

exec

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

test

检索字符串中指定的值，返回true或false

RegExp对象的属性：

属性

描述

global

RegExp对象是否具有标志g；g代表可以进行全局匹配

ignoreCase

RegExp对象是否具有标志i；i代表不区分大小写

multiline

RegExp对象是否具有标志m；m代表可以进行多行匹配

 

String对象：

String对象的方法：

方法

描述

match

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

search

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

replace

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

split

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

Match和search的区别：

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

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

 

正则表达式符号：

符号

描述

/…/

代表一个模式的开始和结束

^

匹配字符串的开始

$

匹配字符串的结束

\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}

 

正则示例：

对年龄进行验证，年龄必须在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新增验证属性：

属性

描述

placeholder

提供一种提示（hint），输入域为空时显示，获得焦点输入内容后消失

required

规定输入域不能为空

pattern

规定验证input域的模式（正则表达式）

示例：

<input type="text" id="uName" placeholder="英文、数字长度为6-10个字符" required pattern="[a-zA-Z0-9]{6,10}"  />

<input type="password" id="pwd" placeholder="长度为6-16个字符" required pattern="[a-zA-Z0-9]{6,16}"/>

 

validity属性：

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

属性

描述

valueMissing

表单元素设置了required特性，则为必填项。

如果必填项的值为空，就无法通过表单验证，valueMissing属性会返回true，否则返回false。

typeMismatch

判断输入值与type类型是否匹配。

HTML 5新增的表单类型如email、number、url等，都包含一个原始的类型验证。如果用户输入的内容与表单类型不符合，typeMismatch属性将返回true，否则返回false。

patternMismatch

判断输入值与pattern特性的正则表达式是否匹配。

如果输入的内容不符合pattern验证模式的规则，patternMismatch属性将返回true，否则返回false。

tooLong

判断输入的内容是否超过了表单元素的maxLength特性限定的字符长度。

虽然在输入的时候会限制表单内容的长度，但在某种情况下，如通过程序设置，还是会超出最大长度限制。如果输入的内容超过了最大长度限制，则tooLong属性返回true，否则返回false。

rangeUnderflow

判断输入的值是否小于min特性的值。

如果输入的数值小于最小值，rangeUnderflow属性返回true，否则返回false。

rangeOverflow

判断输入的值是否大于max特性的值。

如果输入的数值大于最大值，rangeOverflow属性返回true，否则返回false。

stepMismatch

判断输入的值是否符合step特性所推算出的规则。

用于填写数值的表单元素可能需要同时设置min、max和step特性，这就限制了输入的值必须是最小值与step特性值的倍数之和。

例如范围从0到10，step特性值为2，因为合法值为该范围内的偶数，其他数值均无法通过验证。如果范围从1到11，step特性值为2，因为合法值为该范围内的奇数，其他数值均无法通过验证。

如果输入值不符合要求， stepMismatch属性返回true，否则返回false

customError

使用自定义的验证错误提示信息。

使用setCustomValidity( )方法自定义错误提示信息：setCustomValidity(message)会把错误提示信息自定义为message，此时customError属性值为true；

setCustomValidity("")会清除自定义的错误信息，此时customError属性值为false。

 

总结：

jQuery中的表单校验重点总结

相关推荐