html:
<form action="#" method="get" id="form_xx">
<p id="name">姓名:
<input type="text" id="txt" maxlength="6" />
</p>
<p id="telpoho">
电话:
<input type="tel" id="tel" maxlength="11" οnkeyup="value=value.replace(/[^\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" /> 红字表示正则表达式规定输入为只能是数字
</p>
<span class="fengecian"></span>
<input type="submit" id="sub" value="提交信息" />
</form>
<div class="fenxiang" style="display: none;">
<img src="images/tijiao.png" width="100%" />
</div>
css:
#form_xx{
float: left;
width: 80%;
margin-left: 10%;
margin-top: 20%;
}
#name,#telpoho{
height: 30px;
line-height: 30px;
background: #eee;
border-radius: 8px;
margin-top: 4%;
text-indent: 12px;
font-size: 15px;
font-family: "微软雅黑";
}
#name input,#telpoho input{
border: none;
outline: none;
background: none;
font-size: 16px;
height: 30px;
width: 76%;
float: right;
}
.fengecian{
display: block;
width: 100%;
border: 1px dotted #cccccc;
margin-top: 20px;
}
#sub{
border: none;
outline: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
background: hotpink;
height: 35px;
width: 50%;
border-radius: 8px;
margin-left: 25%;
margin-top: 20%;
color: #FFFFFF;
line-height: 35px;
font-family: "微软雅黑";
}
js:
$("#sub").on("touchstart", function(){
var txtvalue=document.getElementById("txt").value;
var telvalue=document.getElementById("tel").value;
if(txtvalue==""){
alert("请正确输入姓名")
}
else if(telvalue==""){
alert("请正确输入电话!")
}
else{
$(".fenxiang").show();
}
})