常用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>
使用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>
使用
oninvalid
的话可自定义一个短语
pattern的局限性
一、浏览器的支持
二、为空时能跳过验证
在正则验证时,正则只会在有值的情况下验证,但为空时,就能跳过正则验证,这是pattern的一个弊端……这时,我们加上h5的required
属性就可解决
更多正则验证请参考:https://blog.csdn.net/qq_42455095/article/details/84944185