18.表单初级验证

一、为什么需要表单的验证

  1. 减轻服务器的压力:一个网站一天可能要收到成千上万个请求,如果没有表单验证,则会有许多错误信息的进入服务器
  2. 保证数据的安全

二、常用方式

  • placeholder 提示信息
<p>名字:<input type="text" name="username" placeholder="请输入用户名"></p>

它是一个提示信息,可以在要输入信息的文本框中显示提示信息,该提示信息会在用户输入第一个字时消失,可以有效提高用户输入信息的准确度。显示效果如下

请添加图片描述

  • required非空判断
<!-- 邮件验证 -->
<p>邮箱:
<input type="email" name="email" required>
</p>

它是一个非空判断,这里用邮件标签为例,加标签中加入required,网页端提交时就会审查该输入框内有无元素,若没有则无法提交,也就是将一个选填项变为了必填项。效果如下

请添加图片描述

  • pattern正则表达式
<!-- URL -->
<p>URL:
<input type="url" name="url" pattern="[a-zA-z]+://[^\s]*">
</p>

正则表达式(英文:Regular Expression)在计算机科学中,是指一个用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串。正则表达式就像一个规范,加入之后就可以识别用户输入的内容是否符合该规范,使得网站更安全。

部分常用正则表达式如下图,可以在任意浏览器上搜索出结果

请添加图片描述

感谢您的观看,能和您一起学习是我最大的荣幸!

参考学习资料:表单初级验证——狂神说

下面是我的微信公众号,与csdn同步更新,有需要的朋友可以关注一波~

请添加图片描述

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值