jquery 校验

最新推荐文章于 2024-07-14 03:35:40 发布

原创最新推荐文章于 2024-07-14 03:35:40 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

前端专栏收录该内容

32 篇文章

订阅专栏

本文介绍了如何在网页中使用JavaScript实现输入验证功能，并在用户尝试提交表单时确保所有必填字段都被填写。

<input id="Text1" type="text" /><span id="Text1Note"></span><br />
        <input id="Text2" type="text" /><span id="Text2Note"></span><br />
        <input id="Text3" type="text" /><span id="Text3Note"></span><br />
        <input id="Text4" type="text" /><span id="Text4Note"></span><br />
        <input id="Button1" type="button" value="button" onclick="return onsumbit()" />
        <script>
            //假设文本框1和3必须输入
            //focusin事件为光标进入，focusout为光标离开
            $("#Text1").focusin(function () {
                $("#Text1Note").html("文本框1该项必须填写！");
            }).focusout(function () {
                if ($("#Text1").val() == "")
                    $("#Text1Note").html("文本框1该项必须填写！");
                else
                    $("#Text1Note").html("");
            });

            $("#Text3").focusin(function () {
                $("#Text3Note").html("文本框3该项必须填写！");
            }).focusout(function () {
                if ($("#Text3").val() == "")
                    $("#Text3Note").html("文本框3该项必须填写！");
                else
                    $("#Text3Note").html("");
            });
            //不做任何输入直接提交执行提交执行
            function onsumbit() {
                if ($("#Text1").val() == "")
                    $("#Text1Note").html("文本框1该项必须填写！");
                if ($("#Text3").val() == "")
                    $("#Text3Note").html("文本框3该项必须填写！");
                return false;
            }
        </script>