HTML5用户注册表单
使用正则表达式进行验证
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>会员注册表单</title>
<style type="text/css">
.biao{
width: 1300px;
margin: 0 auto;
}
form{
width: 1000px;
margin: 0 auto;
}
h3{
border-left: 5px solid #00aaff;
padding-left: 10px;
}
p{
width: 600px;
margin-left: 100px;
}
p a{
color: #ff4520;
font-size: 10px;
text-decoration: none;
}
input{
border: 1px solid #34c2ff;
height: 30px;
width: 250px;
}
.sub{
width: 180px;
height: 60px;
font-size: 20px;
color: #ffffff;
background-color: #df0000;
font-weight: 700;
margin-left: 80px;
}
</style>
</head>
<body>
<div class="biao">
<img src="./img/1.png" >
<h3>注册行号</h3>
<hr >
<form action="" method="post">
<p>
    
<span>昵称：</span>
<input type="text" placeholder="英文、数字长度为6-10个字符" pattern="^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$" required/>
</p>
<p>    
<span>密码：</span>
<input type="password" placeholder="长度为6-16个字符" pattern="^\.{6,16}$" required/>
</p>
<p>
<span>手机号码：</span>
<input type="tel" placeholder="以13|14|15|17|18开头" pattern="^1[34578]\d{9}$" required/>
<a href="#">忘记密码时可用手机号找回密码</a>
</p>
<p>    
<span>邮箱：</span>
<input type="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" required/>
</p>
<p>    
<span>年龄：</span>
<input type="number" min="1" max="100" step="1" required/>
</p>
<p><input type="submit" value="立即注册" class="sub"/></p>
</form>
</div>
</body>
</html>