表单模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="clipboard.min.js"></script>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1169221_gzsd693gfyk.css">
<title>Document</title>
<style>
.wrapper{
width: 500px;
margin: 200px auto;
box-sizing: border-box;
font-family:楷体;
padding: 30px;
padding-left: 50px;
background: rgba(228, 225, 225, 0.37);
border-radius: 10px;
box-shadow: 0 0 3px 3px rgba(121, 119, 119, 0.336);
}
.wrapper input{
width: 300px;
height: 30px;
margin: 5px 0;
outline: none;
font-family:楷体;
font-size: 18px;
padding-left: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.wrapper #btn{
width: 150px;
height: 40px;
border-radius: 5px;
background: rgba(255, 0, 0, 0.418);
color: #fff;
margin-left: -7px;
outline:none;
transition: 0.5s all; margin-top: 30px
}
.wrapper #btn:hover{
background:red;
color: blanchedalmond;
transition: 0.5s all;
transform: translateY(-2px);
cursor: pointer;
outline: none;
color: rgb(58, 6, 247);
}
#nan,#nv{
width: 15px;
height:15px;
vertical-align: middle;
}
label{
display: inline-block;
font-size: 18px;
vertical-align: middle;
}
.iconfont{
font-size: 25px;
}
form span{
margin-left: 30px
}
form em{
font-style: normal;
color: red;
font-size: 16px;
margin-left: 5px;
}
</style>
</head>
<body>
<form action="" class="wrapper">
<p style="font-size:25px;font-weight:500;margin-left:80px;color:red">了解更多情况</p>
<tbody>
<tr>
<i class="iconfont iconyonghu"></i>
<input type="text" placeholder="姓名" id="nam"><em>*必填</em><br>
<span id='name1'></span>
</tr><br>
<tr>
<i class="iconfont iconshenfenzheng_huabanfuben"></i>
<input type="text" placeholder="身份证号" id="shenfen"><em>*必填</em><br>
<span id='shenfen1'></span>
</tr><br>
<tr>
<i class="iconfont iconshouji"></i>
<input type="number" placeholder="电话" id="number"><em>*必填</em><br>
<span id='num1'></span> </tr>
<tr>
<span style="font-size:18px;color:#ccc;margin:15px 0;display:inline-block;vertical-align: middle;margin-left:30px">性别：</span>
<input type="radio" id="nan" name='sex' checked><label for="nan">男</label>
<input type="radio" id="nv" name="sex"><label for="nv">女</label>
</tr><br>
<tr>
<i class="iconfont icondizhi"></i>
<input type="text" placeholder="住址"><br>
</tr><br>
<tr>
<i class="iconfont iconyouxiang"></i>
<input type="text" placeholder="邮箱" id="email"><em>*必填</em><br>
<span id="email1"></span>
</tr><br>
<tr>
<input type="button" value="提交" id="btn"> </tr>
</tbody>
</form>
<script>
// 验证手机号
var numb=/^1(((3|5|7|8)\d)|(47|66|99))\d{8}$/;
//验证身份证号
var shenfen2=/^[1-9]\d{5}((19\d{2})|20((0[0-9])|(1[0-8])))(0[1-9]|1[0-2])(0[1-9]|1[0-9]|2[0-9]|3[0-1])\d{3}(\d|X)$/;
//获取节点
var number=document.getElementById('number');
var num1=document.getElementById('num1');
num1.style.display='none'
var nam=document.getElementById('nam');
var name1=document.getElementById('name1')
var email=document.getElementById('email');
var email1=document.getElementById('email1')
var shenfen=document.getElementById('shenfen');
var shenfen1=document.getElementById('shenfen1')
nam.onfocus=function(){
name1.innerHTML=''
}
nam.onblur=function(){
if(this.value==''){
name1.innerHTML='姓名不能为空';
name1.style.color='red';
nam.style.borderColor='red';
}
}
number.onfocus=function(){
num1.innerHTML='';
num1.style.display='none'
}
number.onblur=function(){
var cont=this.value;
if(cont==''){
num1.style.display='block'
num1.innerHTML='手机号不为空';
num1.style.color='red';
number.style.borderColor='red';
}else if(!numb.test(cont)){
num1.style.display='block'
num1.innerHTML='请正确输入手机号';
num1.style.color='red';
number.style.borderColor='red';
}else if(numb.test(cont)){
num1.style.display='block'
num1.innerHTML='手机号输入正确'
num1.style.color='green';
nam.style.borderColor='green';
}
}
email.onfocus=function(){
email1.innerHTML='';
}
email.onblur=function(){
var emailcont=this.value;
if(emailcont==''){
email1.innerHTML='邮箱不为空';
email1.style.color='red';
email.style.borderColor='red';
}else if(emailcont.indexOf('@')==-1 || emailcont.indexOf('com')==-1){
email1.innerHTML='请正确填写邮箱格式';
email1.style.color='red';
email.style.borderColor='red';
}else{
email1.innerHTML='邮箱填写正确';
email1.style.color='green';
email.style.borderColor='green';
}
}
shenfen.onfocus=function(){
shenfen1.innerHTML='';
}
shenfen.onblur=function(){
shencont=shenfen.value
if(shencont==""){
shenfen1.innerHTML='身份证号不为空';
shenfen1.style.color='red';
shenfen.style.borderColor='red';
}else if(shencont.length!=18){
shenfen1.innerHTML='身份证号输入不正确';
shenfen1.style.color='red';
shenfen.style.borderColor='red';
}else if(shenfen2.test(shencont)){
shenfen1.innerHTML='身份证号输入正确';
shenfen1.style.color='green';
shenfen.style.borderColor='green';
}
}
</script>
</body>
</html>`
网友评论