您的位置：首页 > 其它

输入验证（非插件）

2016-05-31 14:44 246 查看

<html>
<head>
<meta charset="utf-8"/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<fieldset >
<legend>输入限制</legend>
<div style="font-size: 12px; color: red;">1.所有输入框都要填； 2.邮箱和电话必须为数字</div>
<input type="text" class="ipt" data-name="姓名"   placeholder="姓名" /><br />
<input type="text" class="ipt" data-name="性别"  placeholder="性别" /><br />
<input type="text" class="ipt" data-name="年龄"  placeholder="年龄" /><br />
<input type="text" class="ipt" data-name="电话" data-type = "num"  placeholder="电话" /><br />
<input type="text" class="ipt" data-name="邮编" data-type = "num"  placeholder="邮编" /><br />

<button onclick="tt()">提交</button>
</fieldset>
<script type="text/javascript">
//所有输入框都要填
var ipt=$("input");
function tt(){
for (var i=0; i<ipt.length; i++) {
if(ipt.eq(i).val()==""){
alert(ipt.eq(i).attr("data-name")+"不能为空");
return false;
}
}
}

//邮箱和电话必须为数字[当然也可以直接设置成input type为number]
var iptNum=$("input[data-type='num']");
iptNum.blur(function(){
var num=/^[0-9]*$/;
if(!num.test($(this).val())){
alert("请输入数字")
return false;
}
})
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航