web前端之锋利的jQuery六：jQuery对表单的操作

最新推荐文章于 2020-10-03 21:14:57 发布

爸爸去哪了2之熊猫三胞胎

最新推荐文章于 2020-10-03 21:14:57 发布

阅读量527

点赞数 1

本文链接：https://blog.csdn.net/u014785563/article/details/53489818

版权

web前端同时被 3 个专栏收录

99 篇文章 1 订阅

订阅专栏

JavaScript

86 篇文章 0 订阅

订阅专栏

jQuery

14 篇文章 0 订阅

订阅专栏

web前端之锋利的jQuery六：jQuery对表单的操作

一个表单主要是由三部分组成：
（1）表单标签：包含处理表单数据所用的服务器端程序URL以及数据提交到服务器的方法
（2）表单域：包含文本框、密码框、隐藏框、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
（3）表单按钮：包括提交按钮、复位按钮和一般按钮，用于间数据传送到服务器上或者取消传送，还可以用来控制其他定义了处理脚本的处理工作。

1.单行文本框应用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>jQuery对表单的操作</title>
    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(":input").focus(function(){//当输入域获得焦点 (focus) 
            $(this).addClass("focus");
        }).blur(function(){//当输入域失去焦点 (blur) 
            $(this).removeClass("focus");
        });
    });
    </script>
    <style type="text/css">
    .focus{
        border: 1px solid #f00;
        background: #fcc;
    }
    </style>
</head>
<body>
    <form action="#" method="POST" id="regForm">
        <fieldset>
            <legend>个人基本信息</legend>
            <div>
                <label for="username">名称：</label>
                <input id="username" type="text">
            </div>
            <div>
                <label for="pass">密码：</label>
                <input id="pass" type="password">
            </div>
            <div>
                <label for="msg">详细信息：</label>
                <textarea id="msg"></textarea>
            </div>
        </fieldset>
    </form>
</body>
</html>

2.多行文本框应用：

（1）高度的变化

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>jQuery对表单的操作</title>
    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        var $comment=$("#comment");//获得评论框
        $('.bigger').click(function(){
            if(!$comment.is(":animated")){
                if($comment.height()<500){
                    $comment.animate({height:"+=50"},400);
                }
            }
        });
        $('.smaller').click(function(){
            if(!$comment.is(":animated")){
                if($comment.height()>50){
                    $comment.animate({height:"-=50"},400);
                }
            }
        });
    });
    </script>

</head>
<body>
    <form>
        <div class="msg">
            <div class="msg_caption">
                <span class="bigger">放大</span>
                <span class="smaller">缩小</span>
            </div>
            <div>
                <textarea id="comment" rows="8" cols="20">
                    多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高度变化多行文本框高
                </textarea>
            </div>
        </div>
    </form>
</body>
</html>

如改变滚动条高度变化就使用scrollTop方法来进行处理

3.下拉框应用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>jQuery对表单的操作</title>
    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#add").click(function(){
            var $options=$('#select1 option:selected');
            $options.appendTo("#select2");
        });
        $("#addAll").click(function(){
            var $options=$('#select1 option');
            $options.appendTo("#select2");
        });
        $("#select1").dblclick(function(){
            var $options=$('option:selected',this);
            $options.appendTo("#select2");
        });
        $("#remove").click(function(){
            var $options=$('#select2 option:selected');
            $options.appendTo("#select1");
        });
        $("#removeAll").click(function(){
            var $options=$('#select2 option');
            $options.appendTo("#select1");
        });
        $("#select2").dblclick(function(){
            var $options=$('option:selected',this);
            $options.appendTo("#select1");
        });
    });
    </script>
</head>
<body>
    <div class="centent">
        <select multiple id="select1" style="width:100px;height:160px;">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
        </select>
        <div>
            <span id="add">选中添加到右边&gt;&gt;</span>
            <span id="addAll">全部添加到右边&gt;&gt;</span>
        </div>

    </div>
    <div class="centent">
        <select multiple id="select2" style="width:100px;height:160px;"></select>
        <div>
            <span id="remove">&lt;&lt;选中删除到左边</span>
            <span id="removeAll">&lt;&lt;全部删除到左边</span>
        </div>  
    </div>
</body>

4.表单验证：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>jQuery对表单的操作</title>
    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("form :input.required").each(function(){
            var $required=$("<strong class='high'>*</strong>");
            $(this).parent().append($required);//把它追加到文档中
        });
        $("form :input").blur(function(){
            var $parent=$(this).parent();
            $parent.find(".formtips").remove();
            //验证用户名
            if($(this).is("#username")){
                if(this.value=""||this.value.length<6){
                    var errorMsg='请至少输入6位用户名';
                    $parent.append("<span class='formtips onError'>"+errorMsg+"</span>");
                }else{
                    var successMsg='输入正确';
                    $parent.append("<span class='formtips onSuccess'>"+successMsg+"</span>");
                }
            }
            //验证邮箱
            if($(this).is("#email")){
                if(this.value=""||(this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
                    var errorMsg='请输入正确的Email地址';
                    $parent.append("<span class='formtips onError'>"+errorMsg+"</span>");
                }else{
                    var successMsg='输入正确';
                    $parent.append("<span class='formtips onSuccess'>"+successMsg+"</span>");
                }
            }
        });
        $("#send").click(function(){
            $("form .required:input").trigger('blur');
            var numError=$("form .onError").length;
            if(numError){
                return false;
            }else{
                alert("注册成功，密码已经发到邮箱，请查收");
            }
        });

    });
    </script>
    <style type="text/css">
    .high{
        color:red;
    }
    </style>
</head>
<body>
    <form method="post" action="">
        <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="button" value="提交" id="send" />
            <input type="reset" id="res" />
        </div>
    </form>
</body>

爸爸去哪了2之熊猫三胞胎

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端之锋利的jQuery六：jQuery对表单的操作

web前端之锋利的jQuery六：jQuery对表单的操作一个表单主要是由三部分组成：（1）表单标签：包含处理表单数据所用的服务器端程序URL以及数据提交到服务器的方法（2）表单域：包含文本框、密码框、隐藏框、多行文本框、复选框、单选框、下拉选择框和文件上传框等。（3）表单按钮：包括提交按钮、复位按钮和一般按钮，用于间数据传送到服务器上或者取消传送，还可以用来控制其他定义了处理脚本的处理
复制链接

扫一扫