1

我有一个 php 页面，上面有几种形式。总共大约 9 个，但为了简洁起见，我的示例仅反映 4 个。我终于得到了代码来成功找到元素 id，具体取决于单击它的表单上的哪个按钮，并验证 url 是否已正确添加到表单中，如果没有，它将显示错误消息并突出显示输入（同时还留下一个支持跨度标签中 div 底部的错误消息。该代码运行良好，如果需要，欢迎任何人使用它。我只需要帮助来压缩它。无论如何，有没有让 Switch 不那么笨重？

===示例表单 HTML（一页上有几个）===

<div class="thumbnail">

    <form id="buyMe" action="#" method="post">
            <input type="hidden" name="none" value="#">
            <input type="hidden" name="#">
        <table id="myTable">
            <tr><td><select id="select" name="os0">
                    <option value="opt1">option 1</option>
                    <option value="opt2">Option 2</option>
                    <option value="opt3">Option 3</option>
                    <option value="opt4">Option 4</option>
                </select> 
            </td></tr>
            <tr><td><input type="hidden" id="on1" name="on1" value="This Title">This One Title</td></tr>
            <tr><td><input id="os1" type="text" value="http://" name="urlText" maxlength="200"></td></tr>
        </table>
            <input type="hidden" name="something" value="something">
            <button alt="tryThis" id="purchase1" name="submit" class="btn" type="image">Try This</button>
            <img alt="" border="0" src="pixel.gif" width="1" height="1">
    </form>
    <span id="msgsText1">Error Msgs appear here</span>
</div>

=== JQuery SWITCH/CASE ==

    //BEGINNING OF SWITCH CODE
    emptyerror2 = "Please enter a valid URL";
    htmlEmpty = "Please use the proper URL format";
    success2 = "Added to cart successfully!";

$(' :button').click(function (e) {
    var btns = ["purchase1", "purchase2", "purchase3", "purchase4"];
    for (var i = 0, ii = btns.length; i < ii; i++) {
        var aTc = btns[i];
        var whatSpan = $(this).parent('#buyMe').nextAll('span').eq(0).attr('id');
        var msgSpan = $('#'+ whatSpan);
        var whoseInput = $(this).siblings('#myTable').find(':input').eq(2).attr('id');
        var myInput = $('#'+ whoseInput);
        if ((e.target || e.srcElement).id == aTc) {
            switch (aTc) {
                case 'purchase1':
                            if (!/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(myInput.val())) {
                            myInput.addClass("errorAlert");
                            myInput.val(emptyerror2);
                            msgSpan.addClass("text-error");
                            msgSpan.html(htmlEmpty);
                            return false;
                            } else {
                            myInput.removeClass("errorAlert");
                            msgSpan.removeClass("text-error");
                            msgSpan.addClass("text-success");
                            msgSpan.html(success2);
                            return true;
                            } // end of if else
                        break;
                case 'purchase2':
                            if (!/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(myInput.val())) {
                            myInput.addClass("errorAlert");
                            myInput.val(emptyerror2);
                            msgSpan.addClass("text-error");
                            msgSpan.html(htmlEmpty);
                            return false;
                            } else {
                            myInput.removeClass("errorAlert");
                            msgSpan.removeClass("text-error");
                            msgSpan.addClass("text-success");
                            msgSpan.html(success2);
                            return true;
                            } // end of if else
                        break;
                case 'purchase3':
                            if (!/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(myInput.val())) {
                            myInput.addClass("errorAlert");
                            myInput.val(emptyerror2);
                            msgSpan.addClass("text-error");
                            msgSpan.html(htmlEmpty);
                            return false;
                            } else {
                            myInput.removeClass("errorAlert");
                            msgSpan.removeClass("text-error");
                            msgSpan.addClass("text-success");
                            msgSpan.html(success2);
                            return true;
                            } // end of if else
                        break;
                case 'purchase4':
    if (!/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(myInput.val())) {
                            myInput.addClass("errorAlert");
                            myInput.val(emptyerror2);
                            msgSpan.addClass("text-error");
                            msgSpan.html(htmlEmpty);
                            return false;
                            } else {
                            myInput.removeClass("errorAlert");
                            msgSpan.removeClass("text-error");
                            msgSpan.addClass("text-success");
                            msgSpan.html(success2);
                            return true;
                            } // end of if else
                        break;
               }//end of switch
            } //end of if
        } // end of for loop
    }); //end of button event code
4

2 回答 2

2

我不太确定您是否需要循环或开关。switch 语句看起来都一样。跨度和输入似乎都由执行上下文决定。只是：

  $(' :button').click(function (e) {
        var whatSpan = $(this).parent('#buyMe').nextAll('span').eq(0).attr('id');
        var msgSpan = $('#'+ whatSpan);
        var whoseInput = $(this).siblings('#myTable').find(':input').eq(2).attr('id');
        var myInput = $('#'+ whoseInput);
        if (!/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(myInput.val())) {
                            myInput.addClass("errorAlert");
                            myInput.val(emptyerror2);
                            msgSpan.addClass("text-error");
                            msgSpan.html(htmlEmpty);
                            return false;
                            } else {
                            myInput.removeClass("errorAlert");
                            msgSpan.removeClass("text-error");
                            msgSpan.addClass("text-success");
                            msgSpan.html(success2);
                            return true;
                            }

如果您担心“杂散”点击事件（页面上有其他按钮），请给这四个单独的类。否则，您似乎只是在检查按钮是否是四个之一（您可以知道它在哪里），并且无论如何都执行相同的验证。当然，我可能会遗漏一些东西！

于 2013-09-06T13:43:19.600 回答
0

有几种方法可以使代码更紧凑。

一种是使用对象进行切换：

var switcher = { 'purchase1': purchase1, ... };
...
switcher[aTc]();

这使您可以将代码分布在多个函数上。接下来，似乎每个 switch 语句中的代码看起来非常相似。所以你可以使用这种模式：

var data = { msgSpan: $('#'+ whatSpan), ... };
var validators = { 'purchase1': function(text) {
    return !/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(text); }
    ...
};
var validator = validators[aTc];
updateUI(data, validator(myInput.val()));

updateUI对于每种情况，该功能都是相同的。

这种方法允许您将庞大的函数拆分为许多可以独立测试的小构建块。您还可以为每件作品赋予有意义的名称，作为可靠的文档来源。

或者，您可以在创建验证器时使用jQuery.data()将验证器附加到元素并像这样使用它：

var validator = myInput.data('validator');
updateUI(data, validator(myInput.val()));
于 2013-09-06T13:54:17.807 回答