Javascript 表单上的简单验证_Javascript_Jquery

Javascript 表单上的简单验证

javascript jquery

Javascript 表单上的简单验证,javascript,jquery,Javascript,Jquery,我必须使用jquery制作简单的验证表单，（没有第三方插件）为此，我编写了以下代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

我必须使用jquery制作简单的验证表单，（没有第三方插件）为此，我编写了以下代码

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
        <style>
        .InvaildField {
             border: 0.5px solid red;
        }
    </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#btnSubmit').attr("disabled", true);
                $('.emptyField').blur(function () {
                    if ($(this).val() == '') {
                        $(this).removeAttr('class');
                        $(this).addClass('InvaildField');
                        $('#btnSubmit').attr("disabled", true);
                    } else {
                        $(this).removeAttr('class');
                        $('#btnSubmit').attr("disabled", false);
                    }
                });
                $('.emptyField').keyup(function () {
                    if ($(this).val() == '') {
                        $(this).removeAttr('class');
                        $(this).addClass('InvaildField');
                        $('#btnSubmit').attr("disabled", true);
                    } else {
                        $(this).removeAttr('class');
                        $('#btnSubmit').attr("disabled", false);
                    }
                });
            });
        </script>
    </head>
        <body>
            <table>
                <tr>
                    <td>Name</td>
                    <td><input  class="emptyField" type="text"/></td>
                </tr>
                <tr>
                    <td>Email</td>
                    <td><input class="emptyField" type="text"/></td>
                </tr>
                <tr>
                    <td>Mobile Number</td>
                    <td><input class="emptyField" type="text"/></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input id="btnSubmit" class="emptyField" type="button" value="Submit"/>
                    </td>
                </tr>
            </table>
        </body>
    </html>


艾尔德菲尔德先生{
边框：0.5px纯红；
}
$（文档）.ready（函数（）{
$（'btnSubmit'）.attr（“disabled”，true）；
$（'.emptyField'）.blur（函数（）{
if（$（this.val（）=''）{
$（this.removeAttr（'class'）；
$（this.addClass（'InvaildField'）；
$（'btnSubmit'）.attr（“disabled”，true）；
}否则{
$（this.removeAttr（'class'）；
$（'btnSubmit'）.attr（“禁用”，false）；
}
});
$（'.emptyField'）.keyup（函数（）{
if（$（this.val（）=''）{
$（this.removeAttr（'class'）；
$（this.addClass（'InvaildField'）；
$（'btnSubmit'）.attr（“disabled”，true）；
}否则{
$（this.removeAttr（'class'）；
$（'btnSubmit'）.attr（“禁用”，false）；
}
});
});
名称
电子邮件
手机号码

但问题是，当我填充第一个文本框时，按钮是enable，当所有文本框都不为空时，如何启用按钮

我想这会帮助你：

        <table>
            <tr>
                <td>Name</td>
                <td><input  class="emptyField" onkeyup="check()" type="text"/></td>
            </tr>
            <tr>
                <td>Email</td>
                <td><input class="emptyField" onkeyup="check()" type="text"/></td>
            </tr>
            <tr>
                <td>Mobile Number</td>
                <td><input class="emptyField" onkeyup="check()" type="text"/></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input id="btnSubmit" class="emptyField" disabled="disabled" type="button" value="Submit"/>
                </td>
            </tr>
        </table>

    <script type="text/javascript">

        function check(){
            var allFilled = true;
            $(".emptyField").each(function(){
                if(!$(this).val()){
                    allFilled = false;
                    return false;
                }
            });
            if(allFilled)
                $('#btnSubmit').removeAttr("disabled")
            else
                 $('#btnSubmit').attr("disabled", "disabled");
        }

    </script>


名称
电子邮件
手机号码
函数检查（）{
var-allFilled=true；
$（“.emptyField”）.each（函数（）{
if（！$（this.val（））{
allFilled=false；
返回false；
}
});
如果（全部填写）
$（'btnSubmit'）.removeAttr（“已禁用”）
其他的
$（'btnSubmit'）.attr（“禁用”、“禁用”）；
}

如果您的非空输入数与输入数一样多，请启用。

是的，这不是问题，我写的是为了这项工作，而不是

removeAttr（class）

，您应该对要删除的类使用

removeClass

，这样，您不会删除用于样式设置的类或以后添加的其他类。在以前的代码中，也会发生这种情况，不是吗：）。我会解决这个问题，你给出了很好的解决方案，但是使用这个代码，当texbox为空时，我在显示redborder时遇到了问题，我想使用你的代码。我正在添加它，请给mre一些timwe ok:）

<script type="text/javascript">

        $(document).ready(function () {

            $('#btnSubmit').attr("disabled", true);

            $('.emptyField').on("keyup blur", function () {

                if($(this).val().length == 0)
                {
                    $(this).addClass('InvaildField');
                }
                else
                {
                   $(this).removeClass('InvaildField');
                }


                var len = true;

                $(':text').each(function () {

                   if ($(this).val().length == 0) 
                    {
                        len = false;                    
                    }
                });

                if (!len) {        
                    $('#btnSubmit').attr("disabled", true);
                } else {
                    $('#btnSubmit').attr("disabled", false);
                }
            });

        });
        </script>

<script type="text/javascript">

        $(document).ready(function () {

            $('#btnSubmit').attr("disabled", true);

            $('.emptyField').on("keyup blur", function () {

                if($(this).val().length == 0)
                {
                    $(this).addClass('InvaildField');
                }
                else
                {
                   $(this).removeClass('InvaildField');
                }


                var len = true;

                $(':text').each(function () {

                   if ($(this).val().length == 0) 
                    {
                        len = false;                    
                    }
                });

                if (!len) {        
                    $('#btnSubmit').attr("disabled", true);
                } else {
                    $('#btnSubmit').attr("disabled", false);
                }
            });

        });
        </script>

.InvaildField {
     border:1px solid red;
}