移動端form表單：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="vsCode">
<meta name="Author" content="x">
<meta name="Keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1">
<!--IE8瀏覽器的顯示方式：IE=edge以IE最高版本顯示 Chrome=1以谷歌瀏覽器模式渲染-->
<meta name="referrer" content="never">
<!--告訴瀏覽器鏈接的來源（可以計算鏈接的訪問量）-->
<meta name="format-detection" content="telephone=no,email=no,address=no">
<!--格式檢測（數字，郵箱，地址）no 不識別爲電話號碼，郵箱，地址-->
<meta name="renderer" content="webkit">
<meta name="Description" content="">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul,li{
list-style:none;
}
a{
text-decoration:none;
}
input{
outline-style:none;
border: 0px;
}
#form1{
margin-top:20px;
width:80%;
margin:2px auto;
}
#form1 form span{
color:#999;
}
.row {
margin-top: 25px;
height: 50px;
line-height: 26px;
border-bottom: 1px solid #c7c6c6;
width:100%;
}
.input {
position: relative;
width: 100%;
height: 26px;
}
.input input {
display: block;
width: 100%;
height: 26px;
border:none;
background: none;
outline:none;
}
.input label {
position: absolute;
top:0;
left:0;
height: 26px;
line-height: 26px;
font-size: 14px;
color: #999;
}
.select select{
display:block;
width:100%;
border:none;
outline:none;
}
input[type=date]::-webkit-inner-spin-button { visibility: hidden; }
.button{
width:100%;
height:40px;
background: #ff961e;
outline: none;
margin:20px 0 30px 0;
}
.button button{
border:0px;
background-color:transparent;
color:white;
width: 100%;
height:40px;
margin:0 auto;
font-size:17px;
}
</style>
</head>
<body>
<div id="form1">
<form action="" method="post" onsubmit="return checkForm(this)">
<br>
<div class="row ">
<div class="input">
<span>身份證號</span>
<input id="p_cardid" type="text" name="p_cardid">
<i class="CardNo"><b></b></i>
</div>
</div>
<div class="row ">
<div class="input">
<span>姓名</span><br>
<input type="text" name=""/><br>
</div>
</div>
<div class="row">
<div class="select">
<span>性別</span><br>
<select>
<option value="1">男</option>
<option value="0">女</option>
</select><br>
</div>
</div>
<div class="row">
<div class="input">
<span>手機</span><br>
<input id="p_tel" type="text" name="p_tel"/><br>
<i class="Phone"><b></b></i>
</div>
</div>
<div class="row">
<div class="input">
<span>民族</span><br>
<input type="text" name=""/><br>
</div>
</div>
<div class="row">
<div class="select">
<span>學校</span><br>
<select>
<option value="0">華中師範大學</option>
<option value="1">武漢大學</option>
<option value="2">華中科技大學</option>
<option value="3">武漢理工大學</option>
<option value="4">中國地質大學</option>
<option value="5">中南財經政法</option>
<option value="6">湖北大學</option>
<option value="7">華中農業大學</option>
<option value="8">武漢體育學院</option>
</select><br>
</div>
</div>
<div class="row">
<div class="select">
<span>學歷</span><br>
<select>
<option value="0">本科在讀</option>
<option value="1">研究生在讀</option>
<option value="2">博士在讀</option>
<option value="3">已工作</option>
</select><br>
</div>
</div>
<div class="row">
<div class="input">
<span>專業</span><br>
<input type="text" name="name"/><br>
</div>
</div>
<div class="row">
<div class="select">
<span>組織名稱</span><br>
<select id="tableType" name="tableType" onclick="aaa()">
<option value="0">校學生會</option>
<option value="1">校青志聯</option>
<option value="2">校社聯</option>
<option value="3">國旗護衛隊</option>
<option value="4">聖兵愛心社</option>
</select><br>
</div>
</div>
<div class="row">
<div class="select">
<span>職務名稱</span><br>
<select id="jobs">
</select><br>
</div>
</div>
<div class="row">
<div class="input">
<span>分管工作板塊</span><br>
<input type="text" name="name"/><br>
</div>
</div>
<div class="row js-input">
<div class="input">
<span> 職務開始時間</span><br>
<input type="date" value=""/><br>
</div>
</div>
<div class="button">
<button type="button" onclick="checkForm(this)">提交信息</button>
</div>
</form>
</div>
<script type="text/javascript">
function checkForm(){
var phone = document.getElementById('p_tel').value;
var cardid=document.getElementById('p_cardid').value;
if(phone==""&&cardid==""){
alert("請輸入手機號和身份證號！");return false;
}else if(phone==""){
alert("請輸入手機號！");return false;
}else{
if(!(/^1(3|4|5|7|8)\d{9}$/.test(phone))){
alert("手機號碼有誤，請重新輸入");
return false;
}
if(cardid==""){
alert("請輸入身份證號！");return false;
}
}
if(!(/^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/.test(cardid))){
alert("身份證號有誤，請重新輸入");return false;
}
}
function aaa(){
var value=document.getElementById("tableType").value;
var ojobs=document.getElementById("jobs");
if(value=='0'){
ojobs.innerHTML="<option>校學生會111</option><option>校學生會222</option><option>校學生會333</option>"
}else if(value=='1'){
ojobs.innerHTML="<option>校青志聯111</option><option>校青志聯222</option><option>校青志聯333</option>"
}else if(value=='2'){
ojobs.innerHTML="<option>校社聯111</option><option>校社聯222</option><option>校社聯333</option>"
}else if(value=='3'){
ojobs.innerHTML="<option>國旗護衛隊111</option><option>國旗護衛隊222</option><option>國旗護衛隊333</option>"
}else if(value=='4'){
ojobs.innerHTML="<option>聖兵愛心社111</option><option>聖兵愛心社222</option><option>聖兵愛心社333</option>"
}
}
</script>
</body>
</html>