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

最新推荐文章于 2021-06-21 14:26:26 发布

低调的嚣张的程序员

最新推荐文章于 2021-06-21 14:26:26 发布

阅读量461

点赞数

CC 4.0 BY-SA版权

分类专栏： 010 JAVAWEB

本文链接：https://blog.youkuaiyun.com/zeephom/article/details/77489401

010 JAVAWEB 专栏收录该内容

31 篇文章

订阅专栏

本文通过实例演示如何使用jQuery进行表单验证，包括用户名、密码及爱好的验证过程。介绍了常见错误及其解决方法，并提供了完整的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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"]