HTML|表单初级验证

最新推荐文章于 2023-12-19 11:49:15 发布

Alan_Lowe

最新推荐文章于 2023-12-19 11:49:15 发布

阅读量322

点赞数 1

分类专栏： # HTML 文章标签： html 正则表达式

本文链接：https://blog.csdn.net/qq_45985728/article/details/118996738

版权

HTML 专栏收录该内容

26 篇文章 5 订阅

订阅专栏

HTML|表单初级验证

1.placeholder

很多时候文本框的提示信息可以帮助人们更好更快的进行浏览，我们可以可以placeholder来给用户提示信息，比如我们写一个个签，提示信息为请填写你的个性签名：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单初级验证</title>
</head>
<body>

<!--
提示信息：
placeholder
-->
<p>
  个签：
  <input type="text" name="username" placeholder="请填写你的个性签名">
</p>

</body>
</html>

为input标签添加一个placeholder属性即可：

在这里插入图片描述

当我们输入一个内容过后将会覆盖掉原有的内容。

2.required

很多时候都会有必填选项，比如平时在学校填的问卷，我们使用required属性即可判断是否非空：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单初级验证</title>
</head>
<body>

<!--
提示信息：
placeholder
-->
<p>
  个签：
  <input type="text" name="username" placeholder="请填写你的个性签名">
</p>

<!--
必填
required
-->
<p>
  密码：
  <input type="password" name="pwd" required>
</p>

</body>
</html>

3.pattern

我们可以自定义一个验证方式，比如我们需要填写邮箱，不使用html的email，而是使用pattern，我们去网上找一个正则表达式：

正则表达式速查表_脚本之家 (jb51.net)

在这里插入图片描述

直接赋值到pattern：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单初级验证</title>
</head>
<body>

<!--
提示信息：
placeholder
-->
<p>
  个签：
  <input type="text" name="username" placeholder="请填写你的个性签名">
</p>

<!--
必填
required
-->
<p>
  密码：
  <input type="password" name="pwd" required>
</p>

<!--
正则表达式
pattern
-->
<p>
  自定义邮箱：
  <input type="text" name="My_email" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$//^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
</p>

</body>
</html>

这样就可以了。

人生没有白走的路，每一步都算数！

Alan_Lowe

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
9
评论
HTML|表单初级验证

HTML|表单初级验证1.placeholder很多时候文本框的提示信息可以帮助人们更好更快的进行浏览，我们可以可以placeholder来给用户提示信息，比如我们写一个个签，提示信息为请填写你的个性签名：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单初级验证</title></head><bo
复制链接

扫一扫