使用JQuery完成表单的校验(扩展)

事件:

获得焦点事件: onfocus
失去焦点事件: onblur
按键抬起事件: onkeyup
鼠标移入: onmouseenter
鼠标移出: onmouseout

JS引入外部文件 : script标签

需求分析

在用户提交表单的时候, 我们最好是能够在用户数据提交给服务器之前去做一次校验,防止服务器压力过大,并且需要给用户一个友好提示

技术分析

  • trigger : 触发事件,但是会执行类似浏览将光标移到输入框内的这种浏览器默认行为

  • triggerHandler : 仅仅只会触发事件所对应的函数

  • is()

步骤分析

  1. 首先给必填项,添加尾部添加一个小红点

  2. 获取用户输入的信息,做相应的校验

  3. 事件: 获得焦点, 失去焦点, 按键抬起

  4. 表单提交的事件

代码实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css"/>
    <title></title>
    <!--
        1. 首先给必填项,添加尾部添加一个小红点
        2. 获取用户输入的信息,做相应的校验
        3. 事件: 获得焦点, 失去焦点, 按键抬起
        4. 表单提交的事件

        Jq的方式来实现:
            1. 导入JQ的文件
            2. 文档加载事件: 在必填项后天加一个小红点
            3. 表单校验确定事件: blur focus keyup
            4. 提交表单 submit
    -->
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script>

        $(function () {//默认做一些页面初始化
            // 在所有必填项后天加一个小红点 *
            $(".bitian").after("<font class='high'>*</font>");

            //给必填项绑定事件
            $(".bitian").blur(function () {

                //首先获取用户当前输入的值
//var value = this.value;
                var value = $(this).val();

                //清空当前必填项后面的span
//$(".formtips").remove();
                $(this).parent().find(".formtips").remove();

                //获得当前事件是谁的
                if ($(this).is("#username")) { //判断是否是用户名输入项
                    //校验用户名
                    if (value.length < 6) {
                        $(this).parent().append("<span class='formtips onError'>用户名太短了</span>");
                    } else {
                        $(this).parent().append("<span class='formtips onSuccess'>用户名够用</span>");
                    }
                }

                if ($(this).is("#password")) {//判断是否是密码输入项
                    //校验密码
                    if (value.length < 3) {
                        $(this).parent().append("<span class='formtips onError'>密码太短了</span>");
                    } else {
                        $(this).parent().append("<span class='formtips onSuccess'>密码够用</span>");
                    }
                }
            }).focus(function () {
                $(this).triggerHandler("blur");
            }).keyup(function () {
                $(this).triggerHandler("blur");
            });

//$(".bitian").blur(function(){}).focus(function(){}).keyup(function(){})

            //给表单绑定提交事件
            $("form").submit(function () {
                //触发必填项的校验逻辑
                $(".bitian").trigger("focus");
                //找到错误信息的个数
                var length = $(".onError").length
                if (length > 0) {
                    return false;
                }
                return true;
            });
        });

    </script>
</head>

<body>
<form action="index.html">
    <div>
        用户名:<input type="text" class="bitian" id="username"/>
    </div>
    <div>
        密码:<input type="password" class="bitian" id="password"/>
    </div>
    <div>
        手机号:<input type="tel"/>
    </div>
    <div>
        <input type="submit"/>
    </div>
</form>
</body>
</html>
赞 (0)

相关推荐