jQuery学习笔录8（jQuery中的表单操作）

最新推荐文章于 2024-03-05 16:17:40 发布

壁橱里的老王

最新推荐文章于 2024-03-05 16:17:40 发布

阅读量1k

点赞数

分类专栏： jQuery CSS javascript Web 文章标签： jquery input class function div xhtml

本文链接：https://blog.csdn.net/Jessie_J_Wang/article/details/7642713

版权

Web 同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

javascript

25 篇文章 0 订阅

订阅专栏

jQuery

23 篇文章 0 订阅

订阅专栏

1 失去焦点 flur()

2 append(),appendTo() 插入内容

3 id ，value值等等

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryFormS.aspx.cs" Inherits="jQueryForm_jQueryFormS" %>

<!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" >
<head runat="server">
    <title>Untitled Page</title>
    <script src="../scriptJquery/jquery-1.3.2.min.js"></script>
    <style>
        .high{
            color:red;
        }
    </style>
</head>
<body>
    <form method="post" action="jQueryFormS.aspx">
    <div class="int">
     <label for ="username">用户名：</label>
     <input type="text" id="username" class="required" />
    </div>
    <div class="int">
        <label for="email" >邮箱：</label>
        <input type="text" id="email" class="required" />
    </div>
    <div class="int">
        <label for="personinfo">个人资料</label>
        <input type="text" id="personinfo" />
    </div>
    <div class="sub">
        <input type="submit" value="提交" id="send" /><input type="reset" id="res" />
    </div>
    </form>
</body>
</html>
<script>
    $("form :input.required").each(function(){
        var required=$("<strong class='high'>*</strong>");
        $(this).parent().append(required);
    })
    //失去焦点
    $("form :input").blur(function(){
        //我想用id去查，就是说$(this).id。。啥的，语法没想起来
        if($(this).is("#username"))
        {
            if(this.value==""||this.value.length<6)
            {
                var errMsg="请输入至少6位的用户名";
                $(this).parent().append("<span class='onError'>"+errMsg+"</span>");//parent()是div
            }
            else
            {
                 var okMsg="OK";
                $(this).parent().append("<span class='onRight'>"+okMsg+"</span>");
                //append()前面是要选择的对象，后面是要在对象内插入的元素内容
                //appendTo()前面是要插入的元素内容，而后面是要选择的对象
            }
        }
        
    })
    $("form :input").focus(function(){ 
        $(this).parent().find(".onError").remove();
        $(this).parent().find(".onRight").remove();
    })
    
    $("#send").click(function(){console.info(0)
        $("form :input").parent().find(".onError").remove();
        $("form :input").parent().find(".onRight").remove();
        $("form .required:input").trigger("blur");console.info(1)
        var error=$("form .onError").length;console.info(2)
        if(error){console.info(3)
            return false;
        }
        console.info("ok success");
    })

</script>

壁橱里的老王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔录8（jQuery中的表单操作）

1 失去焦点 flur()2 append(),appendTo() 插入内容3 id ，value值等等 Untitled Page .high{ color:red; } 用户名：邮箱：
复制链接

扫一扫