Question

我是一个jQuery新手，但是很长时间的Perl开发人员并且知道正则表达式，所以我不想使用jQuery Validation插件。

我正在尝试验证以下3个网络表单，每个表单都有一个文本或textarea输入字段 #blah_txt 和一个提交按钮 #blah_btn ：

alt text

我正在使用以下jQuery代码验证它们，这似乎运行良好：

<script type="text/javascript" src="/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function() {
        $('#mks_btn').click(function(e) {
                $('#cl_txt').css('border', '2px solid black');
                $('#comment_txt').css('border', '2px solid black');

                if (! $('#mks_txt').val().match(/^(CL\s*)?[0-9]{6,}$/i)) {
                        $('#mks_txt').css('border', '2px solid red');
                        e.preventDefault();
                }
        });
        $('#cl_btn').click(function(e) {
                $('#mks_txt').css('border', '2px solid black');
                $('#comment_txt').css('border', '2px solid black');

                if (! $('#cl_txt').val().match(/^(MKS\s*)?[0-9]{6,}$/i)) {
                        $('#cl_txt').css('border', '2px solid red');
                        e.preventDefault();
                }
        });
        $('#comment_btn').click(function(e) {
                $('#mks_txt').css('border', '2px solid black');
                $('#cl_txt').css('border', '2px solid black');

                if ($('#comment_txt').val().length < 2) {
                        $('#comment_txt').css('border', '2px solid red');
                        e.preventDefault();
                }
        });
});
</script>

我的（化妆品）问题是：

当用户在第一个文本字段（“MKS”）中输入无效值并单击“添加MKS”按钮时，我的代码将阻止表单提交并使文本字段的边框显示为红色。然后用户改变主意并决定将文本输入另一个 Web表单并再次输入无效数据。然后我会有2个红色边框，这会激怒用户。

我正在尝试通过在按钮单击上将其他文本字段设置为纯黑色来解决此问题 - 如上所示。但这看起来不太好，因为在用户开始输入任何内容之前，原始边框已经是其他东西了。

所以我想知道，如果我能以某种方式恢复所有文本输入字段的原始 css（'border'）值 - 当点击一个按钮时（或者可能在模糊或其他一些事件，表明用户已切换到另一个网络表单？）

感谢您的任何建议！亚历

更新

我的浏览器是Firefox 3.6.12 / WinXP，但我希望所有浏览器都能正常工作： - ）

更新2

下面是3个网络表单的HTML代码，除此之外我只有文本和链接，网页上没有其他元素：

<form>
<tr valign="top">
<th>MKS</th><td>
<input name="show_id" type="hidden" value="20110111172527685">
<input name="toggle_mks" id="mks_txt" type="text" size="10" maxsize="10">
<input type="submit" id="mks_btn" value="Add MKS" class="toggle">
</td></tr>
</form>

<form>
<tr bgcolor="#EEEEEE" valign="top">
<th>CL</th><td>
<input name="show_id" type="hidden" value="20110111172527685">
<input name="toggle_cl" id="cl_txt" type="text" size="10" maxsize="10">
<input type="submit" id="cl_btn" value="Add CL" class="toggle">
</td></tr>
</form>

<form>
<tr valign="top">
<th>Comments</th><td>
<input name="show_id" type="hidden" value="20110111172527685">
<textarea name="comment" id="comment_txt" rows="4" cols="60" maxsize="320">
</textarea>
<input type="submit" id="comment_btn" value="Add comment" class="toggle">
</td></tr>
</form>

Answer 1

一旦页面加载，我就会将元素的类值保存到元素的.data()集合中。

$('input')each(function(i) { 
   $(this).data('original_class', $(this).attr('class'))
});

然后使用.data('original_class')检索它。

更新：我会单独留下单独的css属性，因为它可能会变得混乱，现在你在JavaScript中内联css样式。我会在样式表中定义一个.error类，然后打开或关闭它。

Answer 2

而不是

$('#mks_txt').css(

在样式表中创建两个css类，一个用于正常状态，另一个用于错误状态。在HTML中应用普通的状态类，并通过jQuery设置错误状态类。

.className {
   border: 2px solid red;
}

使用

 $('#mks_txt').addClass("className");

添加一个类并使用

 $('#mks_txt').removeClass("className");

删除它并将元素恢复到以前的状态。通过这种方式，您可以使用背景颜色或字体样式等更多“功能”来装饰您的啤酒。

更新：您可以执行以下操作：

    /** css: **/
    input {
      border:solid 1px;
    }
    .error {
       border-color:#f00;
    }     


    /** script: **/

            var resetForm = function () {
          $('#cl_txt, #comment_txt, #mks_txt').removeClass('error');
    }
    var renderError = function (elm, isValid) {
          if(!isValid){
             elm.addClass('error');
          }
    }
    var validate = function (value, reg){
        return value.match(reg);
    }

    $('#mks_btn').click(function(e) {
            resetForm();
            var elm = $('#mks_txt');
            renderError(elm, validate(elm.val(), 
                                         /^(CL\s*)?[0-9]{6,}$/i))
            e.preventDefault();
    });
    $('#cl_btn').click(function(e) {
            resetForm();
            var elm = $('#cl_txt');
            renderError(elm, validate(elm.val(), 
                            /^(MKS\s*)?[0-9]{6,}$/i))
            e.preventDefault();
    });
    $('#comment_btn').click(function(e) {

            resetForm();
            var elm = $('#comment_txt');
            renderError(elm, validate(elm.val(),
                             elm.val().length < 2))
            e.preventDefault();
    });

Answer 3

在样式表中为错误类（类似.formerror）创建css规则，然后使用：

$('#IDOFBOX').toggleClass('formerror');

然后CSS可能是

.formerror{border: 2px solid red;}

Answer 4

考虑在jQuery中设置CSS类而不是原始CSS - 它更容易维护（颜色和化妆品在CSS中）并且让你在更高的抽象上工作。

例如，如果验证失败（在外部CSS样式表中使用红色边框设置样式），则将“validationError”CSS类设置为所需的HTML元素，并在想要返回默认值时再次将其删除。

http://api.jquery.com/addClass/

jQuery：在验证表单时恢复初始css（'value'）

4 个答案: