欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-05 15:48:04
使用JQuery完成表单的校验(扩展) 事件: ​获得焦点事件: onfocus ​失去焦点事件: onblur ​按键抬起事件: onkeyup ​鼠标移入: onmouseenter ​鼠标移出: onmouseout JS引入外部文件 : script标签 需求分析 在用户提交表单的 ......

使用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>