问题 : JQuery无法得到表单的值
代码:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="./js/jquery-3.1.1.js" charset="utf-8"></script>
<title>表单验证</title>
</head>
<body>
您的成绩:<input type="text" name="" value="" id="grade" placeholder="请输入你的成绩">
<span id="promot"></span>
</body>
<!-- js -->
<!-- JQUERY操作 -->
<script type="text/javascript">
var promot = $('#promot');
// 失去焦点
$('#grade').blur(function() {
// 获取input标签的value,并且判断
var grade = parseInt($('#grade').attr('value'));
alert($('#grade').attr('value'));
alert(isNaN(grade));
// 1.判断grade的类型
if (isNaN(grade)) {
promot.text('输入的成绩不正确');
}else{
if (grade> 100 || grade < 0) {
promot.text('请输入0到100以内的成绩');
}
}
});
// 得到焦点
$('#grade').focus(function() {
/* Act on the event */
promot.text('');
});
</script>
</html>
问题:
- 经过多处alert()操作的测试,发现正是下面这行代码没有正确得到表单的值
var grade = parseInt($('#grade').attr('value'));
alert($('#grade').attr('value'));
问题出处:
- 请注意一行代码:
在这行代码中,我给出了一个value="",所以在执行==(’#grade’).attr(‘value’)== 的时候,会去直接得到input标签中的value,会得到空值
您的成绩:<input type="text" name="" value="" id="grade" placeholder="请输入你的成绩">
- 那么在input标签中删除这个value="" 可以吗?
答案是不可以的 ,一旦删掉 value="" ,那么(’#grade’).attr(‘value’) 就会得到一个undefined。
问题原因:
- $(‘id’).attr(‘标签属性’) 是侧重去得到一个标签内部属性的值的,所以在表单标签中,这个操作无法得到一个实时变化的表单内部的值。
解决办法:
- 解决办法,其实JQuery早就给出来了,就是使用 .val() 去获取表单的值。
var grade = parseInt($('#grade').val());
最后注意哦!Jquey自定义方法,和普通的dom操作是不兼容的,所以是不可以混着用的哦!