表单姓名邮箱非空验证

最新推荐文章于 2020-09-03 15:30:58 发布

小黑子爱敲代码

最新推荐文章于 2020-09-03 15:30:58 发布

阅读量1.2k

点赞数

分类专栏： Android开发文章标签：表单

本文链接：https://blog.csdn.net/Cyq_0927/article/details/78611510

版权

Android开发专栏收录该内容

52 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>姓名和邮箱验证</title>
        <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
        <!--
            光标离开事件
            显示与隐藏动画

            表单验证
                其中一种
                onsubmit  函数返回的如果是true ，就进行跳转
                否则不跳转
        -->
    </head>
    <body>
        <!--新建一个页面进行跳转-->
        <form action="/new_file.html" method="post" onsubmit="return check()">
            姓名:<input type="text" id="name" class="name"/><span id="nametip"></span><br>
            邮箱:<input type="text" id="email" class="email" /><span id="emailtip"></span><br>
        <input type="submit" id="submit" value="提交" />
        </form>

        <script type="text/javascript">
            $("#name").blur(function(){

    //用户名不能小于3个字符，否则在其文本框后面追加红色提示信息，当用户填入表单的格式正确的时候在其文本框后面提示“√”
                var name = $("#name").val();
                if (name.length<3) {
                    $("#nametip").html("用户名格式不正确");
                    $("#nametip").css({"color":"red"});
                } else{
                    $("#nametip").html("√");
                }
            });
            $("#email").blur(function(){

                var em = $("#email").val();
                //indexOf("要查找的字符")
                //如果有的话，返回字符所在的下标
                //如果没有，返回-1
                if (em.indexOf("@")!=-1) {

                    $("#emailtip").html("√");
                } else{
                    $("#emailtip").html("邮箱名格式不正确");
                    $("#emailtip").css({"color":"red"});
                }
            });

            //表单验证的方法
            function check(){
                var name = $("#name").val();
                if (name.length<3) {
                    //不符合条件，不跳转
                    return false;
                } else{
                    return true;
                }
            }
        </script>
    </body>
</html>

小黑子爱敲代码

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表单姓名邮箱非空验证

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>姓名和邮箱验证</title> <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script> <
复制链接

扫一扫