<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
</head>
<script></script>
<style>
a,
input,
button {
/*清除圆角*/
-webkit-appearance: none;
border-radius: 0;
/*清除点击阴影*/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
margin: 0;
/*禁止选中文字*/
-webkit-user-select: none;
-webkit-user-select: none;
/*默认字体*/
font-family: helvetica;
-webkit-text-size-adjust: 100%;
font-size: 0.14rem;
}
h1 {
margin: 0;
}
a {
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
img {
vertical-align: top;
}
#Content {
display: none;
}
/*背景层*/
#popLayer {
display: none;
background-color: #B3B3B3;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
}
/*弹出层*/
#popBox {
display: none;
background-color: #FFFFFF;
z-index: 11;
width: 200px;
height: 200px;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
#popBox .close {
text-align: right;
margin-right: 5px;
background-color: #F8F8F8;
}
/*关闭按钮*/
#popBox .close a {
text-decoration: none;
color: #2D2C3B;
}
</style>
<body>
<label for="">真实姓名 <input type="text" value="" id="name" />
<div style="display: none;" id="hideName">请填写您的真实姓名 !</div>
<div style="display: none;" id="showName">
填写姓名格式不正确 !
</div>
</label><label for="">身份证号 <input type="text" value="" id="idCard" />
<div style="display: none;" id="hideIdcard">请填写您的身份证号 !</div>
<div style="display: none;" id="showIdcard">
身份证号格式不对 !
</div>
</label><label for="">手机号 <input type="text" value="" id="phone" />
<div style="display: none;" id="hidePhone">请填写您的手机号 !</div>
<div style="display: none;" id="showPhone">手机号格式不对 !</div>
</label><label for="">所在地 <input type="text" value="" id="address" />
<div style="display: none;" id="hideAddress">
请填写您的所在地 !
</div>
</label><label for="">情感状况 <input type="text" value="" id="status" />
<div style="display: none;" id="hideStatus">
请填写您的情感状况 !
</div>
</label><label for="">职业 <input type="text" value="" id="work" />
<div style="display: none;" id="hideWork">请填写您的职业 !</div>
</label><label for="">印象标签 <input type="text" value="" id="tag" />
<div style="display: none;" id="hideTag">请填写您的印象标签 !</div>
</label><label for="">爱情宣言 <input type="text" value="" id="declaration" />
<div style="display: none;" id="hideDeclaration">
请填写您的爱情宣言 !
</div>
</label><button type="submit" id="button">提交</button>
<div id="popLayer"></div>
<div id="popBox">
<div class="close">
<a href="javascript:void(0)" id="closeBox" ">关闭</a>
</div>
<div id="Affirm">
确认
</div>
<div id="tent"></div>
</div>
</body>
<script>
var arr = [];
(function () {
var html = document.documentElement;
var width = html.getBoundingClientRect().width;
html.style.fontSize = width / 15 + "px";
})();
window.onload = function () {
var Button = document.getElementById("button");
var closeBox = document.getElementById("closeBox");
var valueName = document.getElementById("name");
var valueIdcard = document.getElementById("idCard");
var valuePhone = document.getElementById("phone");
var valueAddress = document.getElementById("address");
var valueStatus = document.getElementById("status");
var valueWork = document.getElementById("work");
var valueTag = document.getElementById("tag");
var valueDeclaration = document.getElementById("declaration");
var Content = document.getElementById("tent");
var Affirm = document.getElementById("Affirm");
Button.onclick = function () {
var doRegister = true;
// 用户名检测校验
if (!valueName.value) {
document.getElementById("hideName").style.display = "block";
doRegister = false;
} else if (/[^\u4e00-\u9fa5\w]/.test(valueName.value)) {
document.getElementById("showName").style.display = "block";
doRegister = false;
}
// 用户身份证号检测校验
if (
valueIdcard.value &&
!/[1-9]\d{14}|[1-9]\d{17}|[1-9]\d{16}x/.test(valueIdcard.value)
) {
document.getElementById("showIdcard").style.display = "block";
doRegister = false;
} else if (!valueIdcard.value) {
document.getElementById("hideIdcard").style.display = "block";
doRegister = false;
}
// 手机号
if (!valuePhone.value) {
document.getElementById("hidePhone").style.display = "block";
doRegister = false;
} else if (!/^1[3|4|5|8][0-9]\d{4,8}$/.test(valuePhone.value)) {
document.getElementById("showPhone").style.display = "block";
doRegister = false;
}
// 所在地
if (!valueAddress.value) {
document.getElementById("hideAddress").style.display = "block";
doRegister = false;
}
// 情感状况
if (!valueStatus.value) {
document.getElementById("hideStatus").style.display = "block";
doRegister = false;
}
// 职业
if (!valueWork.value) {
document.getElementById("hideWork").style.display = "block";
doRegister = false;
}
// 印象标签
if (!valueTag.value) {
document.getElementById("hideTag").style.display = "block";
doRegister = false;
}
// 爱情宣言
if (!valueDeclaration.value) {
document.getElementById("hideDeclaration").style.display = "block";
doRegister = false;
}
// 提交按钮展示提交内容
if (doRegister) {
document.getElementById("popBox").style.display = "block";
document.getElementById("popLayer").style.display = "block";
arr.push(
valueName.value,
valueIdcard.value,
valuePhone.value,
valueAddress.value,
valueStatus.value,
valueWork.value,
valueTag.value,
valueDeclaration.value
)
console.log(arr)
var html=""
arr.forEach(item => {
html+=`<div>${ item }</div>`
});
Content.innerHTML = html
}
};
// 确认数据及数据提交后value为空
Affirm.οnclick=function(){
alert('提交成功')
document.getElementById("popBox").style.display = "none";
document.getElementById("popLayer").style.display = "none";
localStorage.setItem('User', arr)
valueName.value=''
valueIdcard.value=''
valuePhone.value=''
valueAddress.value=''
valueStatus.value=''
valueWork.value=''
valueTag.value=''
valueDeclaration.value=''
}
/*点击关闭按钮*/
closeBox.onclick = function () {
document.getElementById("popBox").style.display = "none";
document.getElementById("popLayer").style.display = "none";
arr=[]
}
// 提交过数据则提示有存储信息
if(localStorage.getItem('User')){
alert("提交过数据")
}
};
</script>
</html>
js提交数据加校验，存储本地
猜你喜欢
转载自blog.csdn.net/Sunshine_GirlXue/article/details/106348304
今日推荐
周排行