正则表达式——表单验证
原创
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实验</title>
<style type="text/css">
/*该元素获得焦点时，不出现虚线框（或高亮框）*/
*:focus{
outline:none;
}
form{
width: 750px;
height: 500px;
background-color: #FFC0CB;
position: absolute;
left: 30px;
top: 30px;
border: 3px solid #9DB5F3 ;
}
form ul {
width:750px;
list-style: none;/*清除默认样式*/
padding: 0;
margin: 0;
}
form li{
padding:3px;
}
form h1{
text-align: center;
}
form span.left{
width:100px;
margin-top: 3px;
margin-left: 30px;
display:inline-block;/*把块元素强制转换为行内块元素*/
}
/*给类名为usually的input标签设置背景颜色、背景图片、边框、外阴
影、内阴影、边框圆角以及内边距的过渡效果*/
input#usually{
width: 200px;
height: 25px;
background: #fff url(img/attention.png) no-repeat 98% center;
border:1px solid #9DB5F3;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
border-radius:2px;
transition: padding .25s;
}
/*给类名为usually的input标签设置背景颜色、背景图片、边框、外阴
影、内阴影、边框圆角以及内边距的过渡效果*/
input#special{
width: 200px;
height: 25px;
background: #EBEBE3;
border:1px solid #9DB5F3;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
border-radius:2px;
transition: padding .25s;
}
input#color{
width: 100px;
background-color: #EBEBE3;
}
li:nth-child(2) input{
background-color: #EBEBE3;
}
li:last-child button:first-child{
margin-left: 134.5px;
}
/*设置按钮样式*/
button[type^=submit],button[type^=reset] {
width: 110px;
height: 30px;
margin-right: 90px;
background-color: #EBEBE3;
border: 1px solid #9DB5F3;
border-radius: 3px;
padding: 6px 20px;/*内边距：上下6px、左右20px*/
text-align: center;/*文本对齐方式：水平居中*/
}
/*当该元素获得焦点时，设置背景颜色和背景图片、边框、外阴影和右内边距*/
input:focus{
background: #fff;
border:1px solid #555;
box-shadow: 0 0 3px #aaa;
padding-right:70px;
}
/*当鼠标悬停在提交按钮时，该按钮背景颜色透明度为85%，光标变成“小手”*/
button[type^=submit]:hover,button[type^=reset]:hover {
opacity:.85;
cursor: pointer;
}
/*当鼠标点击按钮时，出现1px的#20911e色的实现边框同时出现内阴影*/
button[type^=submit]:active,button[type^=reset]:active{
border: 1px solid #9DB5F3;
box-shadow: 0 0 10px 5px #9DB5F3 inset;
}
/*当该元素获得焦点填写内容无效时，设置背景颜色、背景图片、盒阴影及边框颜色*/
input#usually:focus:invalid{
background: #fff url(img/warn.png) no-repeat 98% center;
box-shadow: 0 0 5px #d45252;
border-color: #b03535
}
/*当该元素获取有效的填写内容时，设置背景颜色、背景图片、盒阴影及边框颜色*/
input#usually:required:valid{
background: #fff url(img/right.png) no-repeat 98% center;
box-shadow: 0 0 5px #5cd053;
border-color: #28921f;
}
</style>
</head>
<body>
<form>
<ul>
<li><h1>员工信息登记表</h1></li>
<li>
<span class="left">用户登录名：</span>
<input type="text" name="idname" placeholder="***@163.com" id="special">
</li>
<li>
<span class="left">真实姓名：</span>
<input type="text" name="name" placeholder="***" pattern="^([\u4E00-\u9FA5]+(\u2022)?)+$" required id="usually">
<span>( 必填，只能输入汉字 )</span>
</li>
<li>
<span class="left">真实年龄：</span>
<input type="number" name="age" min="0" max="120" placeholder="18" required id="usually">
<span>( 必填 )</span>
</li>
<li>
<span class="left">出生日期：</span>
<input type="date" name="birthday" required id="usually">
<span>( 必填 )</span>
</li>
<li>
<span class="left">电子邮箱：</span>
<input type="text" name="mail" placeholder="123456@126.com" pattern="^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$" required autocomplete id="usually">
<span>( 必填 )</span>
</li>
<li>
<span class="left">身份证号：</span>
<input type="text" name="idnumber" pattern="^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$" required id="usually">
<span>( 必填，能够以数字、字母x结尾的短身份证号 )</span>
</li>
<li>
<span class="left">手机号码：</span>
<input type="text" name="phone" pattern="((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)" required id="usually">
<span>( 必填 )</span>
</li>
<li>
<span class="left">幸运颜色：</span>
<input type="color" name="color" id="color">
<span>( 请选择你喜欢的颜色 )</span>
</li>
<br/>
<li>
<button type="submit">提交</button>
<button type="reset">重置</button>
</li>
</ul>
</form>
</body>
</html>效果图：
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读