使用jQuery对用户表单进行验证

Question

目前，我有一个非常坏的习惯，就是编写特定于全局的函数来处理数据，并且觉得我可以通过停止复制来减少我的工作负担。

基本上，我有一个在行验证中执行的注册表单，并且不想使用像jQuery验证这样的外部库。我的验证执行时，用户已经焦点出框和标志一个错误，如果有错误。

下面是一些HTML表单数据：

 <div class="inputs">    
  <input class="required" type="text" name="first_name" id="register_first_name" />
  <input class="required" type="text" name="last_name" id="register_last_name" />
  <input class="required" type="text" name="email" id="register_email" />
  <input class="required" type="text" name="telephone" id="register_telephone" />
 </div>

清除错误的Javascript：

/** Remove red error_show borders **/
jQuery(document).on('blur keypress change autocompletechange', '#register_first_name', function() {
    jQuery(this).removeClass("error_show");
});

jQuery(document).on('blur keypress change autocompletechange', '#register_last_name', function() {
    jQuery(this).removeClass("error_show");
});

jQuery(document).on('blur keypress change autocompletechange', '#register_email', function() {
    jQuery(this).removeClass("error_show");
});

jQuery(document).on('blur keypress change autocompletechange', '#register_telephone', function() {
    jQuery(this).removeClass("error_show");
});

在输入数据时运行函数的Javascript：

jQuery(document).on( 'blur change autocompletechange', '#register_first_name', function() {
    formatHyphenatedLastname('#register_first_name');
    validFirstname(jQuery("#register_first_name").val());} );

jQuery(document).on( 'blur change autocompletechange', '#register_last_name', function() {
    formatHyphenatedLastname('#register_last_name');
    validLastname(jQuery("#register_last_name").val())

    } );    

jQuery(document).on( 'blur autocompletechange change', '#register_telephone', function() {  
    uppercaseField('#register_telephone'); 
    collapseSpaces('#register_telephone')
    validTelephone(jQuery("#register_telephone").val());
});

jQuery(document).on( 'blur', '#register_email', function() {  lowercaseField('#register_email');
                                                                checkEmail(jQuery("#register_email").val());
                                                            });

Register.js：

function validFirstname(firstname)
{

jQuery(".firstname.input").find(".required").removeClass("valid");
 if(!firstname || firstname.length === 0 )
 }
 else{
    jQuery(".firstname.input").find(".required").addClass("valid");
 }
}

function validLastname(lastname)
{
 jQuery(".lastname.input").find(".required").removeClass("valid");
 if(!lastname || lastname.length === 0 )
 {
 }
 else{
    jQuery(".lastname.input").find(".required").addClass("valid");
 }
}

function formatHyphenatedLastname(field)
{
f=trim(jQuery(field).val());
// first sentance case it
f=sentenceCase(f);
// no sort double barrelled names
if(f.indexOf("-"))
    {
    p=f.indexOf("-");
    f=f.substring(0,p+1)+f.substring(p+1,p+2).toUpperCase()+f.substring(p+2);
    }
// sort mcs and macs
if(f.indexOf("Mc")==0 || (f.indexOf("Mc")==f.indexOf("-Mc")+1) )
    {
    p=f.indexOf("Mc");
    f=f.substring(0,p+2)+f.substring(p+2,p+3).toUpperCase()+f.substring(p+3);
    }
jQuery(field).val(f);
}

function validTelephone(phone)
{
    pattern = /^((\(?0\d{4}\)?\s?\d{3}\s?\d{3})|(\(?0\d{3}\)?\s?\d{3}\s?\d{4})|(\(?0\d{2}\)?\s?\d{4}\s?\d{4}))(\s?\#(\d{4}|\d{3}))?$/i;
    jQuery(".telephone.input").children(".sidetip").find(".active").removeClass("active");
    jQuery(".telephone.input").find(".required").removeClass("valid");
    if(!pattern.test(phone))
    {
        jQuery(".telephone.input").children(".sidetip").children(".invalid").addClass("active");
    }
    else{
        //jQuery(".telephone.input").children(".sidetip").children(".ok").addClass("active");
        jQuery(".telephone.input").find(".required").addClass("valid");
    }
}

正如您所看到的，我一遍又一遍地编写相同的函数，但是检查不同的参数，这只会使代码看起来非常混乱，很难调试。

我已经研究了一个模块模式，但我不知道如何在这样一个单独和特定的输入上实现这个模式。

Answer 1

通过快速浏览代码，我认为Register.js文件还不错。在前两个示例中，您有很多代码重复，可以用一般包装函数来解决。

您希望通过类而不是id来针对需要的输入提供共享功能。

您可以创建用于删除错误的通用函数：

function removeError() {
    this.removeClass('error_show');
}

然后将这个函数作为回调传递给所有输入：

$('input.required').each(function(el, index) {
    el.on('blur keypress change autocompletechange', removeError);
});