Question

这是onSubmit事件的验证码片段：

/**
 * ensure user name was provided:
 */
if (user_name.val() === '') {

    // display error on the name element 
    user_name.parent().addClass('error');
    user_name.parent().find('.error_msg').html('Name is required.');
    error = true;

} else {

    // reset error state
    user_name.parent().removeClass('error');
    user_name.parent().find('.error_msg').empty();

}

/**
 * Ensure user email was provided:
 */
if (user_email.val() === '') {

    // display error on the email element
    user_email.parent().addClass('error');
    user_email.parent().find('.error_msg').html('Email is required.');

} else {

    // reset error state 
    user_email.parent().removeClass('error');
    user_email.parent().find('.error_msg').empty();

}

/**
 * Ensure Message Subject was provided 
 */
if (message_subject.val() === '') {

    // display error on the subject element
    message_subject.parent().addClass('error');
    message_subject.parent().find('.error_msg').html('Message subject is required.');

} else {

    message_subject.parent().removeClass('error');
    message_subject.parent().find('.error_msg').empty();

}

/**
 * Ensure Message Body was provided
 */
if (message_body.val() === '') {

    // display error on the message body element
    message_body.parent().addClass('error');
    message_body.parent().find('.error_msg').html('A message is required.');

} else {

    message_body.parent().removeClass('error');
    message_body.parent().find('.error_msg').empty();

}

正如您所看到的，许多重复的if / else块具有简单的逻辑。

在完成相同行为的同时优化此代码以减小整体规模的好方法是什么？

Answer 1

我会让CSS完成大部分工作。

将错误消息放在HTML中，如下所示：

<div>
  <input id="user_name" type="text">
  <span class="error_msg">Name is required.</span>
</div>

默认情况下隐藏它们，但如果父级有error类，则可见：

.error_msg {
  display: none;
}

div.error .error_msg {
  display: inline;
}

然后您的代码将缩减为：

$('input, textarea').change(function() {
  $(this).parent('div').toggleClass('error', !$(this).val());
}).change();

Fiddle

Answer 2

老实说，你可以简化它开发验证引擎，但是等等！有很多验证库。例如，ParsleyJS（有很多......）。

使用验证库会压缩行而不是简化它们，并且许多验证库实现声明性验证（即它们使用HTML required，min-length，{{1}等HTML属性}} ... ）所以几乎没有JavaScript代码来执行表单验证。

当然，您也可以使用像其他答案建议的那样简化您的代码......但是，老实说，如果您正在开发一个具有表单并且需要验证它们的网站或应用程序（我会说你必须验证表格!! ），我不会浪费时间手动执行表单验证。 Keep it simple

Answer 3

我会做以下功能，我会为每个字段调用它：

function validation_check(obj, msg) {
    if (obj.val() === '') {
       obj.parent().addClass('error');
       obj.parent().find('.error_msg').html(msg);
    } else {
       message_body.parent().removeClass('error');
       message_body.parent().find('.error_msg').empty();
    }
}

Answer 4

这是另一种做你要求的方式 - empty check。编写一个函数，该函数将采用选项和函数的对象来完成剩下的工作。请记住，这只是一个演示，您可能需要改变一切以满足您的需求。

＆＃13;

function validate(opts) {
    var isError = false;
    $.each(opts.fields, function(field, msg) {
        var $field = opts.form.find("input[name='" + field + "']");
        var $parent = $field.parent();
        if ( $.trim($field.val()) === "") {
            $parent.addClass(opts.errorToggleClass).
            find(opts.errorMsgClass).html(msg);
            isError = true;
        } else {
            $parent.removeClass(opts.errorToggleClass).
            find(opts.errorMsgClass).empty();
        }
    });
    return isError;
}

$(".go").on("click", function(evt) {

    var isError = validate({
        form: $(".myForm"),
        fields: {
            "user_name": 'Name is required.',
            "user_email": 'Email is required.',
            "message_subject": 'Message subject is required.',
            "message_body": 'A message is required.'    
        },
        errorToggleClass: 'error',
        errorMsgClass: '.error_msg'
    });
    alert ("Error: " + isError);
});

＆＃13;

.error {
    color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="myForm">
    <div>
        <p class="error_msg"></p>
        <input name="user_name" type="text" />
    </div>
    <div>
        <p class="error_msg"></p>
        <input name="user_email" type="text" />
    </div>
    <div>
        <p class="error_msg"></p>
        <input name="message_subject" type="text" />
    </div>
    <div>
        <p class="error_msg"></p>
        <input name="message_body" type="text" />
    </div>
    <input class="go" type="button" value="Submit" />
</form>

＆＃13;

如何优化重复的if / else块？

4 个答案: