jquery利用remove实现表单reset的疑问
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>表单验证</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//文本框焦点事件
$(':input').focus(function() {
$(this).addClass('focus');
})
//文本框失去焦点后
.blur(function() {
//为表单元素添加失去焦点事件
var $parent = $(this).parent();
$parent.find('.formtips').remove();
//验证用户名
if( $(this).is('#uname') ){
if ( this.value=='' || this.value.length<6 ) {
var errorMsg = '请输入至少6位的用户名';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var successMsg = '输入正确';
$parent.append('<span class="formtips onSuccess">'+successMsg+'</span>')
}
}
});
//提交验证
$('#send').click(function() {
$('form :input').trigger('blur');//为表单绑定一个blur事件
var numError = $('form .onError').length;
if (numError) {
return false;
};
alert('注册成功！')
});
//重置
$('#res').click(function() {
$('.formtips').remove();
});
});
</script>
</head>
<body>
<form action="" id="myform">
<div class="int">
<label for="uname">用户名：</label><input type="text" name="required" id="uname" />
</div>
<div class="sub">
<input type="submit" id="send" value="提交" />
<input type="reset" id="res" value="重置" />
</div>
</form>
</body>
</html>
在如上的代码中，点击重置按钮，应该是移除了<span class="formtips"></span>这个元素，为什么input的value也会被清除？
也就是说，假设我在input输入123后，点击重置，为什么会把input的123也清除掉？ 展开
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>表单验证</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//文本框焦点事件
$(':input').focus(function() {
$(this).addClass('focus');
})
//文本框失去焦点后
.blur(function() {
//为表单元素添加失去焦点事件
var $parent = $(this).parent();
$parent.find('.formtips').remove();
//验证用户名
if( $(this).is('#uname') ){
if ( this.value=='' || this.value.length<6 ) {
var errorMsg = '请输入至少6位的用户名';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var successMsg = '输入正确';
$parent.append('<span class="formtips onSuccess">'+successMsg+'</span>')
}
}
});
//提交验证
$('#send').click(function() {
$('form :input').trigger('blur');//为表单绑定一个blur事件
var numError = $('form .onError').length;
if (numError) {
return false;
};
alert('注册成功！')
});
//重置
$('#res').click(function() {
$('.formtips').remove();
});
});
</script>
</head>
<body>
<form action="" id="myform">
<div class="int">
<label for="uname">用户名：</label><input type="text" name="required" id="uname" />
</div>
<div class="sub">
<input type="submit" id="send" value="提交" />
<input type="reset" id="res" value="重置" />
</div>
</form>
</body>
</html>
在如上的代码中，点击重置按钮，应该是移除了<span class="formtips"></span>这个元素，为什么input的value也会被清除？
也就是说，假设我在input输入123后，点击重置，为什么会把input的123也清除掉？ 展开
1个回答
展开全部
因为reset的散历哗按钮本身就是清空form表单填充的未提交的元素的说，如果你烂歼是要对按钮做重置操作冲行建议使用一般的button就好
<input type="button" id="res" value="重置" />
<input type="button" id="res" value="重置" />
追问
这里写不开了，我私信你
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
