表单校验


一、为什么要表单验证?

  • 减轻服务器的压力
  • 暴增输入的数据符合要求
    在这里插入图片描述

常用的表单验证

  • 日期格式
  • 表单元素是否为空
  • 用户名和密码
  • E-mail地址
  • 身份证号码
    在这里插入图片描述

二、为什么使用表单选择器

表单选择器用于选取某些特定的表单元素,比如所有单选按钮或隐藏的元素

表单选择器:
在这里插入图片描述
在这里插入图片描述

  • 属性过滤选择器

在这里插入图片描述

三、使用String对象验证

1.验证邮箱

实现思路:

  • 使用val( )方法获取文本框的值
  • 使用indexOf( ) 来判断字符串是否包含“@”和“.”
  • 使用方法submit( )提交表单
  • 根据返回值是true还是false来决定是否提交表单

字符串验证:

  • 非空验证
    在这里插入图片描述

  • 字符串查找
    indexOf():查找某个指定的字符串值在字符串中首次出现的位置
    在这里插入图片描述

2.验证文本框内容

实现思路:

  • 使用String对象的length属性验证密码的长度
  • 验证两次输入密码是否一致
  • 使用length属性获取文本长度,然后使用for循环和s - ubstring( )方法依次截断单个字符,最后判断每个字符是否是数字

字符串验证:

  • 长度验证
    在这里插入图片描述

  • 判断字符串是否有数字
    使用for循环和substring()方法依次截断单个字符,再判断每个字符是否是数字
    在这里插入图片描述

四、表单验证事件和方法

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

在这里插入图片描述

1.文本输入提示特效

实现思路:

  • 把错误信息显示在中,然后使用html()方法,设置和之间的内容
  • 编写脚本验证函数
  • 鼠标失去焦点时(blur事件)调用验证函数

五、正则表达式

为什么需要正则表达式

  • 简洁的代码
  • 严谨的验证文本框中的内容

在这里插入图片描述

1.定义正则表达式

普通方式:

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

构造函数:

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

2.表达式的模式

简单模式:

  • 只能表示具体的匹配
var reg=/china/;
var reg=/abc8/;

复合模式:

  • 可以使用通配符表达更为抽象的规则模式
var reg=/^\w+$/;
var reg=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;

3.RegExp对象

RegExp对象的方法
在这里插入图片描述

RegExp对象的属性
在这里插入图片描述

4.String对象的方法

在这里插入图片描述

5.正则表达式符号

在这里插入图片描述
在这里插入图片描述

六、使用HTML5的方式验证表单

  • HTML5新增属性
  • validity属性

1.HTML5新增属性

HTML5新增验证属性
在这里插入图片描述

2.validity属性

validityState对象
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr.刘★

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值