您的位置：首页 > Web前端 > JQuery

WEB前端-JQuery-表单验证

2016-09-03 00:08 381 查看

以下是分别以两种方式 DOM& jQuery绑定事件，并对表单内容进行简要验证的代码

可以通过js的表单验证减少与后台数据交互验证的动作，从而减少响应时间

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
width: 250px;
height: 60px;
position: relative;
}
.item input{
width: 200px;
}
.item span{
position: absolute;
top: 20px;
left: 0px;
font-size: 8px;
background-color: indianred;
color: white;
display: inline-block;
width: 200px;
}
</style>

</head>
<body>
<div>
<form>
<div class="item">
<input class="c1" type="text" name="username" label="用户名"/>
<!--<span>用户名不能为空</span>-->
</div>
<div class="item">
<input  class="c1" type="password" name="pwd" label="密码"/>
<!--<span>密码不能为空</span>-->
</div>
<!--<input type="submit" value="提交" onclick="return CheckValid();" />-->
<input type="submit" value="提交" />
</form>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
/*dom绑定事件方式
function CheckValid(){
var flag = true;
$('form .c1').each(function(){
var val = $(this).val();
if(val.length<=0){
var label = $(this).attr('name');
var tag = document.createElement('span');
tag.innerText = label + " cannot be empty";
$(this).after(tag);
flag = false;
}
});
return flag;
}*/
/*jquery 绑定方式*/
$(function(){
BindCheckValid();
});
function BindCheckValid(){
$('form input[type=submit]').click(function(){
var flag = true;
$('form .c1').each(function(){
var val = $(this).val();
if(val.length<=0){
var label = $(this).attr('name');
var tag = document.createElement('span');
tag.innerText = label + " cannot be empty";
$(this).after(tag);
flag = false;
}
});
return flag;
});
}
</script>
</body>
</html>

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

标签： web前端表单 dom jQuery 验证

相关文章推荐

新的分享

章节导航