javascript - 使用 javascript 验证各个表单输入

Question

我有一个注册表单，用于验证文本字段，如果用户单击/选项卡关闭时文本字段为空，则会显示错误消息。我对下面的代码的问题是它在多个表单字段中重复很多。下面的示例是针对名字的，但我看不到一种方法来使用我必须对多个字段执行相同操作的方法。

            /* this will call ajax call after entering all the below three fiels */
    var $fields = $('#testid');
    $fields.live('blur',function(e) {
        e.preventDefault();
        var $emptyFields = $fields.filter(function() {
            return $.trim(this.value) === "";
        });

        if ($emptyFields.length) {

                var frm = $(this).parents('form');
                var url=$('#valNameEmail').val();
                jQuery.ajax({
                         url: url,
                         data: $(this).parents('form').serialize(),
                         type: 'POST',
                         dataType: "json",
                         success: function(response){
                            if (response.HtmlMessage === 'success'){
                                $('.reg-alreadyRegistered').html('');
                                $('.reg-alreadyRegistered').css('display', 'none');
                                 ACC.registration.tickIcon($('#testid'));

                                 var radioExCustValue = $('#registration-form input[name=existingCustomer]:checked').val();
                                 if (userNameAjax === true) {
                                     if (radioExCustValue == 'false'){
                                         $('#regFormSubmit').removeAttr('disabled');
                                     }
                                     else {
                                         if (customerValidation == true){
                                             $('#regFormSubmit').removeAttr('disabled');
                                         }
                                     }
                                 }
                                 emailIDajax = true;
                             } else {
                                 ACC.registration.errorIcon($('#testid'));


                                 $('.reg-alreadyRegistered').html(response.HtmlMessage);
                                 $('.reg-alreadyRegistered').css('display', 'block');
                                 emailIDajax = false;
                                 $('#regFormSubmit').attr('disabled','disabled');
                             }
                         },
                         error: function(){
                                //alert(response);
                                //console.log('ERROR!')
                         }

                  });
        }
    });

Answer 1

您可以为需要相同类型验证的相同输入提供一个类(或者，如果您想要它用于所有input[type=text]，那么您可以将它用于选择器。

假设我有一个这样的表单:

<form id="mform">
    <input type="text" class="inptxt" name="it1" />
    <input type="text" class="inptxt" name="it2" />
    <!-- other similar text inputs with the same class -->
    <input type="submit" id="sub" value="Submit" />
</form>

我有一个用于文本输入的函数，如果字段为空，则返回 false，否则返回 true:

$.fn.isValid = function() {
    return $.trim($(this).val());
}

然后我按类别获取输入并立即验证它们:

$('#mform').on('submit', function(e) {
    e.preventDefault();
    var allValid = true;
    $('.inptxt').each(function() {
        if (!$(this).isValid()) {
            $(this).css('background-color', 'red');
            allValid = false;
        }
        else
            $(this).css('background-color', 'white');
    });
    if(allValid) {
        //everything's valid ... submit the form
    }
});

jsfiddle DEMO