HTML+CSS3（四）——表单pattern正则属性

最新推荐文章于 2023-06-26 22:57:22 发布

C-A-L-D

最新推荐文章于 2023-06-26 22:57:22 发布

阅读量1.6k

点赞数 3

分类专栏： Web前端-html+css3 文章标签： html

原文链接：https://blog.csdn.net/qq_42249896/article/details/84945624

版权

Web前端-html+css3 专栏收录该内容

17 篇文章 3 订阅

订阅专栏

HTML+CSS3（七）——display属性（前面文章已讲过，这里转载一篇）

HTML+CSS3（十）——CSS3新特性之2D变形和3D变形

常用pattern正则：

手机号：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
密码：^[a-zA-Z]\w{5,17}$ 字母开头，长度在6~18之间，只能包含字母、数字和下划线
强密码：强密码：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ 包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间
整数：^-?\d+$
负整数：^-([1-9]|[1-9][0-9])*$
非整数：^\d+$

title和oninvalid的使用

title的使用：
index.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<script src="__STATIC__/js/jquery-3.3.1.min.js"></script>
<body>
<form>
手机号：<input type="text" name="name" id='name' title='手机号格式不正确' pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$" required />
<input type='submit' />
</form>
</body>
<script>
</script>
</html>

  
  
  
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这里插入图片描述

使用title的话会默认加上请于所请求的格式保持一致

oninvalid的使用：
index.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<script src="__STATIC__/js/jquery-3.3.1.min.js"></script>
<body>
<form>
用户名：<input type="text" name="name" id='name' title='不行哦' pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$" oninvalid="setCustomValidity('请输入11位手机号');" required="required" />
<input type='submit' />
</form>
</body>
<script>
</script>
</html>

  
  
  
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16