JS表单提交判断

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();
}

})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值