效果图:
当输入的内容与定义的正则表达式格式不匹配时,单击“提交”按钮,效果如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>pattern属性</title>
</head>
<body>
<form action="#" method="get">
账 号:
<input type="text" name="username" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$" />
以字母开头,允许5~16字节,允许字母、数字和下划线)<br/>
密 码:
<input type="password" name="pwd" pattern="^[a-zA-Z]\w{5,17}$" />
(以字母开头,长度在6~18,只能包含字母、数字和下划线)<br/>
身份证号:
<input type="text" name="mycard" pattern="^\d{15}|\d{18}$" />(15位、18位数字)<br/>
E-mail地址:
<input type="email" name="mymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" />
<input type="submit" value="提交" />
</form>
</body>
</html>
重点: