js提交数据加校验,存储本地

<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" ">关闭
    
"> 确认
">

你可能感兴趣的:(js提交数据加校验,存储本地)