jQuery 验证

【问题标题】：Jquery validationjQuery 验证
【发布时间】：2015-04-17 18:52:39
【问题描述】：

我是新人在 jquery 中使用公式创建验证和计算。我创建了六个输入字段。创建验证所有字段。但是当所有字段为空时单击计算红星符号显示前两个字段未显示剩余四个字段请帮助我的朋友

这是我的代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        function isNumber(evt) {
            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            if (charCode > 31 && (charCode < 48 || charCode > 57)) {
                return false;
            }
            return true;
        }

        function calculate() {

            var answer = 0;

            if (validate()) {

                var valueA = $("#valuea").val()

                var valueB = $("#valueb").val()

                var valueC = $("#valuec").val()

                var valueD = $("#valued").val()

                var valueE = $("#valuee").val()

                var valueF = $("#valuef").val()


                if (valueA && valueB && valueC && valueD && valueE && valueF) {
                    answer = ((parseFloat(valueB / valueA)) + (parseFloat(valueD / valueC)) + (parseFloat(valueF / valueE))) / 3;
                }
                else {

                    if (valueA && valueB && valueC && valueD)
                        answer = ((parseFloat(valueB / valueA)) + (parseFloat(valueD / valueC))) / 2;
                    else {
                        if (valueA && valueB && valueE && valueF)
                            answer = ((parseFloat(valueB / valueA)) + (parseFloat(valueF / valueE))) / 2;

                        else (valueA && valueB)
                        answer = ((parseFloat(valueB / valueA)));
                    }                   
                }
                if (parseFloat(answer) > .0238)
                    alert("Your Effective Rate = " + parseFloat(answer * 100).toFixed(2));
                else if (answer == 0)
                    alert("Your Effective Rate:0.00% ");
                else
                    alert("Oops, something has gone terribly wrong!Please attach at least 2 months of your most recent credit card processing statements and one of our specialists will respond within 24 hours with an accurate cost analysis");

            }
            return false;
        }
        function validate() {
            var status = false;

            var valueA = $("#valuea").val()

            var valueB = $("#valueb").val()

            var valueC = $("#valuec").val()

            var valueD = $("#valued").val()

            var valueE = $("#valuee").val()

            var valueF = $("#valuef").val()

            if (valueA) {
                $("#spana").hide();
                status = true;
            }
            else {
                $("#spana").show();

                status = false;
            }

            if (valueB) {
                status = true;
                $("#spanb").hide();
            }
            else {
                status = false;
                $("#spanb").show();
            }
            if (valueC && !valueD) {
                status = false;
                $("#spand").show();
                $("#spanc").hide();
            }
            if (!valueC && valueD) {
                status = false;
                $("#spanc").show();
                $("#spand").hide();
            }

            if (valueE && !valueF) {
                status = false;
                $("#spanf").show();
                $("#spane").hide();
            }
            if (!valueE && valueF) {
                status = false;
                $("#spane").show();
                $("#spanf").hide();
            }
            if (valueC && valueD) {
                $("#spand").hide();
                $("#spanc").hide();
                return true;
            }
            if (valueE && valueF) {
                status = true;
                $("#spane").hide();
                $("#spanf").hide();
            }           

            return status;

        }
    </script>
</head>
<body>
    <form>
    <table class="calculator" border='0' width='500px' cellpadding='3' cellspacing='1'
        class="table">
        <tr class="calcheading">
            <td colspan="3" align="center">
                Whats your effective rate?
            </td>
        </tr>
        <tr class="monthheading">
            <td colspan="2">
                <strong>Month 1</strong>
            </td>
        </tr>
        <tr class="calcrow">
            <td>
                Total Sales, Including Amex
            </td>
            <td align="center">
                <input type='text' name='valuea' id="valuea" onkeypress="return isNumber(event)"
                    autocomplete="off" />
                <td align="center">
                    <span style="color: Red; font-weight: bold; display: none;" id="spana">*</span>
                </td>
        </tr>
        <tr class="calcrow2">
            <td>
                Total Fees, less any terminal or rental fees
            </td>
            <td align="center">
                <input type='text' name='valueb' id="valueb" onkeypress="return isNumber(event)"
                    autocomplete="off" />
            </td>
            <td align="center">
                <span style="color: Red; font-weight: bold; display: none;" id="spanb">*</span>
            </td>
        </tr>
        <tr class="monthheading">
            <td colspan="2">
                <strong>Month 2</strong>
            </td>
        </tr>
        <tr class="calcrow">
            <td>
                Total Sales, Including Amex
            </td>
            <td align="center">
                <input type='text' name='valuec' id="valuec" onkeypress="return isNumber(event)"
                    autocomplete="off" />
            </td>
            <td align="center">
                <span style="color: Red; font-weight: bold; display: none;" id="spanc">*</span>
            </td>
        </tr>
        <tr class="calcrow2">
            <td>
                Total Fees, less any terminal or rental fees
            </td>
            <td align="center">
                <input type='text' name='valued' id="valued" onkeypress="return isNumber(event)"
                    autocomplete="off" />
            </td>
            <td align="center">
                <span style="color: Red; font-weight: bold; display: none;" id="spand">*</span>
            </td>
        </tr>
        <tr class="monthheading">
            <td colspan="2">
                <strong>Month 3</strong>
            </td>
        </tr>
        <tr class="calcrow">
            <td>
                Total Sales, Including Amex
            </td>
            <td align="center">
                <input type='text' name='valuee' id="valuee" onkeypress="return isNumber(event)"
                    autocomplete="off" />
            </td>
            <td align="center">
                <span style="color: Red; font-weight: bold; display: none;" id="spane">*</span>
            </td>
        </tr>
        <tr class="calcrow2">
            <td>
                Total Fees, less any terminal or rental fees
            </td>
            <td align="center">
                <input type='text' name='valuef' id="valuef" onkeypress="return isNumber(event)"
                    autocomplete="off" />
            </td>
            <td align="center">
                <span style="color: Red; font-weight: bold; display: none;" id="spanf">*</span>
            </td>
        </tr>
        <tr class="submit">
            <td colspan="3" align="center">
                <input type='submit' value='Calculate' onclick="return calculate();" />
            </td>
        </tr>
        <tr class="calcrow">
            <td colspan="3" align="center">
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

计算一切正常。当将字段留空时点击计算显示红色星号需要前两列仍然没有显示帮助我的朋友

【问题讨论】：

  • 你为什么不为此创建一个小提琴？使用 www.jsfiddle.net

标签： javascript php jquery validation


【解决方案1】：

您为 valueC、valueD、valueE 和 valueF 编写的条件有误。如果你想实现你想要的功能，你应该继续 valueA 和 valueA 其余部分。

但是，我的建议是使用http://jqueryvalidation.org/ 插件来验证元素。根据需要使用和自定义非常方便。

谢谢

【讨论】：

    【解决方案2】：

    检查您的条件。您的条件中的小逻辑错误。例如。

    if (valueC && !valueD) {
            status = false;
            $("#spand").show();
            $("#spanc").hide();
        }
        if (!valueC && valueD) {
            status = false;
            $("#spanc").show();
            $("#spand").hide();
        }

    这将检查 valuec 或 valued 是否为空。您没有检查两者是否为空。你需要添加这样的东西

          if (!valueC && !valueD) {
            status = false;
            $("#spand").show();
            $("#spanc").hide();
        }

    【讨论】：

      【解决方案3】：

      兄弟，让你的代码冗长不是一个好办法。您可以通过使用每个功能来实现您的目标。下面是一个这样做的例子。请看一看。 

      function validate(){

 var formValidate = true;
    jQuery(form + " select," + form + " input").each(
            function (index) {
                var input = jQuery(this);

                    if (input.val() == "" ) {
                        input.addClass("error");
                        input.parent().next("td").fadeIn("slow");
                    }
                    else {
                        input.removeClass("error");
                        input.parent().next("td").fadeOut("slow");
                    }
                    if (input.hasClass('error')) {
                        if (formValidate == true) {
                            formValidate = false;
                        }
                    }

            }
    );

    if (formValidate == true) {

        return true;
    }
    else {

        return false;
    }

}

      【讨论】：

        【解决方案4】：

        您的答案的确切解决方案如下，请复制粘贴然后检查。

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../jQuery/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
function calculate() {

var answer = 0;
if (validate()) {
var valueA = $("#valuea").val()

var valueB = $("#valueb").val()

var valueC = $("#valuec").val()

var valueD = $("#valued").val()

var valueE = $("#valuee").val()

var valueF = $("#valuef").val()


if (valueA && valueB && valueC && valueD && valueE && valueF) {
answer = ((parseFloat(valueB / valueA)) + (parseFloat(valueD / valueC)) + (parseFloat(valueF / valueE))) / 3;
}
else {
if (valueA && valueB && valueC && valueD)
answer = ((parseFloat(valueB / valueA)) + (parseFloat(valueD / valueC))) / 2;
else {
if (valueA && valueB && valueE && valueF)
                        answer = ((parseFloat(valueB / valueA)) + (parseFloat(valueF / valueE))) / 2;

                    else (valueA && valueB)
                    answer = ((parseFloat(valueB / valueA)));
                }                   
            }
            if (parseFloat(answer) > .0238)
                alert("Your Effective Rate = " + parseFloat(answer * 100).toFixed(2));
            else if (answer == 0)
                alert("Your Effective Rate:0.00% ");
            else
                alert("Oops, something has gone terribly wrong!Please attach at least 2 months of your most recent credit card processing statements and one of our specialists will respond within 24 hours with an accurate cost analysis");

        }
        return false;
    }
    function validate() {
        var status = false;

        var valueA = $("#valuea").val()
        var valueB = $("#valueb").val()
        var valueC = $("#valuec").val()
        var valueD = $("#valued").val()
        var valueE = $("#valuee").val()
        var valueF = $("#valuef").val()

        if (valueA) {
            $("#spana").hide();
            status = true;
        }
        else {
            $("#spana").show();
            status = false;
        }

        if (valueB) {
            status = true;
            $("#spanb").hide();
        }
        else {
            status = false;
            $("#spanb").show();
        }
        if (valueC && !valueD) {
            status = false;
            $("#spand").show();
            $("#spanc").hide();
        }
        if (!valueC && valueD) {
            status = false;
            $("#spanc").show();
            $("#spand").hide();
        }

        if (valueE && !valueF) {
            status = false;
            $("#spanf").show();
            $("#spane").hide();
        }
        if (!valueE && valueF) {
            status = false;
            $("#spane").show();
            $("#spanf").hide();
        }
        if (valueC && valueD) {
            $("#spand").hide();
            $("#spanc").hide();
            return true;
        }
        if (valueE && valueF) {
            status = true;
            $("#spane").hide();
            $("#spanf").hide();
        } 

        //change is here 
        //change status value as per your requirement
        if (!valueC && !valueD) {
            //status = false;
            $("#spand").show();
            $("#spanc").show();
        }

        if (!valueE && !valueF) {
            //status = false;
            $("#spanf").show();
            $("#spane").show();
        }


        return status;

    }
</script>
</head>
<body>
<form>
<table class="calculator" border='0' width='500px' cellpadding='3' cellspacing='1' class="table">
    <tr class="calcheading">
        <td colspan="3" align="center">
            Whats your effective rate?
        </td>
    </tr>
    <tr class="monthheading">
        <td colspan="2">
            <strong>Month 1</strong>
        </td>
    </tr>
    <tr class="calcrow">
        <td>
            Total Sales, Including Amex
        </td>
        <td align="center">
            <input type='text' name='valuea' id="valuea" onkeypress="return isNumber(event)"
                autocomplete="off" /></td>
            <td align="center">
                <span style="color: Red; font-weight: bold; display: none;" id="spana">*</span>
            </td>
    </tr>
    <tr class="calcrow2">
        <td>
            Total Fees, less any terminal or rental fees
        </td>
        <td align="center">
            <input type='text' name='valueb' id="valueb" onkeypress="return isNumber(event)"
                autocomplete="off" />
        </td>
        <td align="center">
            <span style="color: Red; font-weight: bold; display: none;" id="spanb">*</span>
        </td>
    </tr>
    <tr class="monthheading">
        <td colspan="2">
            <strong>Month 2</strong>
        </td>
    </tr>
    <tr class="calcrow">
        <td>
            Total Sales, Including Amex
        </td>
        <td align="center">
            <input type='text' name='valuec' id="valuec" onkeypress="return isNumber(event)"
                autocomplete="off" />
        </td>
        <td align="center">
            <span style="color: Red; font-weight: bold; display: none;" id="spanc">*</span>
        </td>
    </tr>
    <tr class="calcrow2">
        <td>
            Total Fees, less any terminal or rental fees
        </td>
        <td align="center">
            <input type='text' name='valued' id="valued" onkeypress="return isNumber(event)"
                autocomplete="off" />
        </td>
        <td align="center">
            <span style="color: Red; font-weight: bold; display: none;" id="spand">*</span>
        </td>
    </tr>
    <tr class="monthheading">
        <td colspan="2">
            <strong>Month 3</strong>
        </td>
    </tr>
    <tr class="calcrow">
        <td>
            Total Sales, Including Amex
        </td>
        <td align="center">
            <input type='text' name='valuee' id="valuee" onkeypress="return isNumber(event)"
                autocomplete="off" />
        </td>
        <td align="center">
            <span style="color: Red; font-weight: bold; display: none;" id="spane">*</span>
        </td>
    </tr>
    <tr class="calcrow2">
        <td>
            Total Fees, less any terminal or rental fees
        </td>
        <td align="center">
            <input type='text' name='valuef' id="valuef" onkeypress="return isNumber(event)"
                autocomplete="off" />
        </td>
        <td align="center">
            <span style="color: Red; font-weight: bold; display: none;" id="spanf">*</span>
        </td>
    </tr>
    <tr class="submit">
        <td colspan="3" align="center">
            <input type='submit' value='Calculate' onclick="return calculate();" />
        </td>
    </tr>
    <tr class="calcrow">
        <td colspan="3" align="center">
        </td>
    </tr>
</table>
</form>
</body>
</html>

        【讨论】：

          【解决方案5】：

          如果您真的想这样做，请考虑以下验证方法。 我假设您想要检查输入字段是否为空。你做了什么我还不清楚。

          要进行适当的验证，您需要确定并说明应检查的内容以及应如何处理。 

          function validate() {
        var status = false;

        var valueA = $("#valuea").val();

        var valueB = $("#valueb").val();

        var valueC = $("#valuec").val();

        var valueD = $("#valued").val();

        var valueE = $("#valuee").val();

        var valueF = $("#valuef").val();

        if (valueA) {
            $("#spana").hide();
            status = true;
        }
        else {
            $("#spana").show();
            status = false;
        }
        if (valueB) {
            $("#spanb").hide();
            status = true;
        }
        else {
            $("#spanb").show();
            status = false;
        }
        if (valueC) {
            $("#spanc").hide();
            status = true;
        }
        else {
            $("#spanc").show();
            status = false;
        }
        if (valueD) {
            $("#spand").hide();
            status = true;
        }
        else {
            $("#spand").show();
            status = false;
        }
        if (valueE) {
            $("#spane").hide();
            status = true;
        }
        else {
            $("#spane").show();
            status = false;
        }
        if (valueF) {
            $("#spanf").hide();
            status = true;
        }
        else {
            $("#spanf").show();
            status = false;
        }


        return status;

    }

          【讨论】：

          • 在剩余字段可选后，我不需要前两个字段，我的字段也接受零值。如果输入零值，任何时间字段也需要显示红色星号
          猜你喜欢
          • 2010-11-25
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多
          热门标签
          Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode