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

[JAVAWEB]4.用jQuery完成数据验证和表单提交

2017-08-22 23:55 507 查看

4.复习笔记(这个就是课后习题以及课程所呈现的需求)

这节课就是上节课的重复,就是代码改成jquery了.

5.自测代码

2.课堂笔记

(1)用户名验证(不能包含空格)
<script type="text/javascript">
$(function()
{
$("form[name='f1']").submit(function()
{
if($.trim($(":text[name='uname']").val()).length==0)
{
$(":text[name='uname']").select();
$(":text[name='uname']").focus();
$("#info").html("用户名不能为空");
return false;
}
});//当点击type=submit的按钮的时候会触发此事件

});
</script>
错误
-jquery存放的位置不对,这个要放在<head>里面
-$()获取名字的方法不对$(":text[name='uname']"),而不是$(":text[name]='uname'")
-这两个错误至少耽误我30分钟时间
(2)密码验证

var pwd=$(":password[name='pwd']");
var pwd1=$(":password[name='pwd1']");
if(pwd!=pwd1)
{
$("#info").html("两次密码不一致");
}
(2)验证密码是否为空和一致
<script type="text/javascript">
$(function()
{
$("form[name='f1']").submit(function()
{
//用户名验证
if($.trim($(":text[name='uname']").val()).length==0)
{
$(":text[name='uname']").select();
$(":text[name='uname']").focus();
$("#info").html("用户名不能为空");
return false;
}

//密码验证
if($.trim($(":password[name='pwd']").val()).length==0)
{
$(":password[name='pwd']").select();
$(":password[name='pwd']").focus();
$("#info").html("密码不能为空");
return false;
}
var pwd=$(":password[name='pwd']").val();
var pwd1=$(":password[name='pwd1']").val();
if(pwd!=pwd1)
{
$("#info").html("两次密码不一致");
return false;
}

});//当点击type=submit的按钮的时候会触发此事件

});
</script>
(3)还是一样,验证爱好是否被选中
<script type="text/javascript">
$(function()
{
$("form[name='f1']").submit(function()
{
//用户名验证
if($.trim($(":text[name='uname']").val()).length==0)
{
$(":text[name='uname']").select();
$(":text[name='uname']").focus();
$("#info").html("用户名不能为空");
return false;
}

//密码验证
if($.trim($(":password[name='pwd']").val()).length==0)
{
$(":password[name='pwd']").select();
$(":password[name='pwd']").focus();
$("#info").html("密码不能为空");
return false;
}
var pwd=$(":password[name='pwd']").val();
var pwd1=$(":password[name='pwd1']").val();
if(pwd!=pwd1)
{
$("#info").html("两次密码不一致");
return false;
}
//验证爱好是否被选中
var times=0;
$(":checkbox[name='hobby']").each(function(i, e)
{
//if(e.checked)
if($(this).is(":checked"))
{
times++;
}
});

if(times==0)
{
$("#info").html("请至少选择一个爱好!");
return false;
}
return true;

});//当点击type=submit的按钮的时候会触发此事件

});
</script>
(4)修改submit为button
①首先修改submit为button
②在function中绑定button的事件
③修改样式表中input[type="submit"]为input[type="button"]

3.课程效果图

1.代码

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

标签：

相关文章推荐

新的分享

章节导航