jQuery学习笔记（五）jQuery中的表单

浏览数：15 / 时间：2015年06月09日

上次我们说完jQuery中的动画之后，我们再来看一种jQuery在Web网页应用最为广泛的一种形式，这就是jQuery对表单的操作，通过jQuery对表单的操作，可以有效的提高用户体验。在此之前，我们首先要了解表单的组成部分。表单大致有3个部分组成。

第一部分由表单标签组成，包含url及所提交的方法。即我们通常写到的<form action=”#” method=”post”>当然提交方法也可以是get，他们之间的区别再次就不做讨论。

第二部分由表单域组成:包含文本框、密码框、隐藏域、多行文本框、复选框等等。

第三部分由表单按钮组成：包含提交按钮、复位按钮、一般按钮，用于控制将数据传送到服务器或者取消传送。

jQuery中对表单的操作主要是针对于第二部分，即对表单域的操作，例如对文本框、密码框、隐藏域的操作等等。首先我们先来看一个jQuery对表单的一个最简单的应用。

一. 单行文本框的应用

此处，我们首先来看HTML代码。

<form action="#" method="post" id="regForm">
    <fieldset>
        <legend>个人基本信息</legend>
        <div>
            <label for="username">
                名称：</label>
            <input id="username" type="text" value="admin" />
        </div>
        <div>
            <label for="password">
                密码：</label>
            <input type="password" id="password" value="123456" />
        </div>
        <div>
            <label for="msg">
                详细信息：</label>
            <textarea rows="3" cols="15">详细信息</textarea>
        </div>
    </fieldset>
 </form>

初始化HTML代码后，如图1所示

我们所需要做的效果就是当光标移入文本框的时候，会出现阴影，表示此时正在操作的正是此行的文本框，效果就如图2所示。

那么应该如何达到这个效果呢？其实非常简单，就是为文本框添加两个事件：focus与blur事件。具体jQuery代码如下所示。
<script type="text/javascript">
        $(function () {                                  //加载DOM
            $(":input").focus(function () {              //选中所有input标签,为其添加focus事件，即当光标移入所选区域内所触发的事件
                $(this).addClass("focus");               //此处为其添加样式"focus”，注意我的样式写到了样式表中，此处未列出，样式即加背景与边框
            }).blur(function () {                        //此处添加blur事件
                $(this).removeClass("focus");            //移除样式
            });
        });
</script>

此时便完成了我们预定的目标。

二. 表单验证

在各大网站中，jQuery应用最广泛的一种恐怕就是表单验证了吧。无论是我们在申请或者填写登录信息的时候，或多或少都会用到表单验证。我们在这里就好好说说表单验证！可能很多人都会用插件来用于表单验证，我们在这里首先自己写一种表单验证，然后我们再通过插件再来写一次表单验证，便于理解。

还是老样子，我们首先来看HTML代码。

<form action="" method="post">
    <div>
        <div class="int">
            <label for="username">
                用户名：</label>
            <input type="text" name="username" class="required" id="username" />
        </div>
        <div class="int">
            <label for="email">
                邮箱：</label>
            <input type="text" name="email" class="required" id="email" />
        </div>
        <div class="int">
            <label for="personmsg">
                个人资料</label>
            <input type="text" name="personmsg" />
        </div>
        <div class="sub">
            <input type="submit" id="send" value="提交" /><input type="reset" id="res" value="重置" />
        </div>
    </div>
</form>

我们再为其添加css样式后，此处不列出css样式,使其显示如图3所示。

我们的目标效果是：1. 用户名及邮箱为必填项，如果没有填写，提示用户填写。

2.对用户名及邮箱进行有效性验证，要求用户名至少为6位，当用户输入小于6位时，则会提示用户“请输入至少6位用户名”,邮箱中必须复合邮箱规范。

我们先整理下思路：1. 首先我们寻找表单中的必填文本框，即class=”required“的文本框，为其添加样式”*“。

                                  2. 针对用户名及密码的文本框，我们进行有效性判断，这里我们以用户名的文本框为例进行分析，当光标离开文本框的时候应触发blur事件，此时开始判断用户所输入内容的有效性，我们在这里假定用户名至少为6位，通过判断文本框的值的长度来返回不同的信息，如果用户输入内容为空或者字符小于6位，则返回一个错误消息提示用户输入必须至少6位，需要注意的是，我们在返回消息时候可以为其添加样式，当然样式最好定义在css中（样式中最好带有图片），如图4所示。如果输入长度大于等于6位，我们则返回正确信息，并为其添加好样式，如图5所示。同理，也为邮箱进行有效性判断，不过这里值得注意的是，邮箱是通过正则表达式进行判断的。

                                    3. 好了，大致这些就进行的可以了，但是，如何能更好的提高用户体验呢？那就是我们希望，用户在焦点引入文本框的时候就能够进行提示，并且每键入一个字符的时候，就可以再次进行有效性验证！那么就在上面的基础上在为文本框添加两个事件focus与keyup事件，此时我们直接在这两个事件中添写triggerHandler(“blur”)就可以，此处一定要写triggerHandler，而不能是trigger，如果写trigger的话，则不但会激活我们写的blur事件，同时也会激活其自带的鼠标blur事件，而triggerHandler则可以将系统默认鼠标blur事件关闭。

                                    4. 当然，最后我们也应该为两个按钮添加click事件。那么我们就来具体看看代码吧。
<script type="text/javascript">
        $(function () {   //加载DOM
            //遍历class="required"的元素，即必填元素，并为其添加*
            $("input.required").each(function () {
                var $required = $("<strong class=‘high‘>*</strong>");
                $(this).parent().append($required);
            });
            //为表单添加失去焦点的事件
            $("form :input").blur(function () {        
                $(this).parent().find(".formtips").remove();
                if ($(this).is("#username")) {             //验证用户名
                    if (this.value == "" || this.value.length < 6) {
                        var errorMsg = "请输入至少6位用户名";
                        $(this).parent().append("<span class=‘formtips onError‘>" + errorMsg + "</span>");
                    } else {
                        var okMsg = "输入正确";
                        $(this).parent().append("<span class=‘formtips onOk‘>" + okMsg + "</span>");
                    }
                }
                if ($(this).is("#email")) {               //验证邮箱
                    if (this.value == "" || (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))) {
                        var errorMsg = "请输入正确的邮箱地址";
                        $(this).parent().append("<span class=‘formtips onError‘>" + errorMsg + "</span>");
                    } else {
                        var okMsg = "输入正确";
                        $(this).parent().append("<span class=‘formtips onOk‘>" + okMsg + "</span>");
                    }
                }
            }).keyup(function () {
                $(this).triggerHandler("blur");
            }).focus(function () {
                $(this).triggerHandler("blur");
            });
            //提交，通过判断返回的Error的次数来判断是否可以提交
            $("#send").click(function () {
                $("input.required").trigger("blur");
                var numError = $("form .onError").length;
                if (numError) {
                    return false;
                }
                alert("success!");
            });
            //重置
            $("#res").click(function () {
                $(".formtips").remove();
            });
        })
 </script>

看了这一大推代码后，肯定心中会产生个想法，有没有在jQuery的基础上封装好的一种插件使我们可以通过引用插件对表单进行验证，从而可以高效率的开发呢？答案当然是肯定的，在http://www.plugins.jquery.com中我们可以找到一款名为validation的插件。在此，我们用插件重新开发一次！

HTML代码如以先前HTML代码类似，我们具体来看jQuery代码。

<script type="text/javascript">
        $(document).ready(function () {
            $("#infoForm").validate({      //验证的是id="infoForm"的表格
                rules: {                   //定义验证规则rules
                    username: {            //对用户名的验证规则
                        required: true,
                        minlength: 6      
                    },
                    email: {                //对email的验证规则
                        required: true,
                        email:true
                    }
                },
                messages: {                  //返回的验证信息
                    username: {
                        required: "请输入用户名",
                        minlength: "请至少输入6个字符"
                    },
                    email: {
                        required: "请输入邮箱",
                        email: "请检查所输入的邮箱格式"
                    }
                }
            });
        })
</script>