Jquery 验证表单数据Javascript

因此，我试图为页面上的两个表单设置表单验证，一次只能看到其中一个表单。当一个表单可见时（display='inline'），另一个表单隐藏时（display='none'）

我正在连接表单“提交”事件并返回“false”，以便在手动提交表单之前验证表单字段

我遇到的问题是当我尝试将代码模块化时，即尝试使用常用方法在两个表单上设置表单行为。当我尝试这样做时，我无法在单击提交按钮时使表单不提交。但是，当我单独设置这两个表单时（重复的方法做完全相同的事情，只是使用不同的DOM对象），我可以让功能正常工作

下面是我尝试在传入DOM对象时在方法中创建DOM对象的两个数组之间循环的过程：

if($('#payment_wrapper').length > 0){
    var form_elements = [['#nr_form', '#nr_submit_button', '#nr_notes',     
'#nr_amount'],['#rec_form', '#rec_submit_button', '#rec_notes', '#nr_amount']];
    for (var i = 0; i < 2; i++){
        setupForms(form_elements[i]);
    }
}

    function setupForms(arr){
        $(arr[0]).submit(function(event) {
            (arr[1]).prop('disabled', true);
            validateForm(arr[0], arr[1], arr[2], arr[3]);
            return false;
        });
    }

    function validateForm(form, button, notes, amount){
        var err = false;
        var note = $(button).val().length
        var payment = $(amount).val();
        if(note > 150){
            alert("note is greater than 150");
            $('.payment_errors').text("It seems that your note is too long.  Please make sure it is 150 characters of less")
            $(button).prop('disabled', false);
            err = true; 
        } else if (!validateAmount(payment, button)){
            err = true;
        } else if ( err == false){
            $(form).get(0).submit();
        }
    }

    function validateAmount(payment, submit_button){
        var match = payment.match(/^[0-9]+\.[0-9]{2}/)
        if (payment.length == 0) {
            $('.payment_errors').text("You must enter a valid amount before submitting")
            $(submit_button).prop('disabled', false);
            return false;
        } else if (!match) {
            $('.payment_errors').text("Hmmmm, something is wrong with your payment amount.  Make sure your amount is in the proper format")
            $(submit_button).prop('disabled', false);
            return false;
        } else {
            return true;    
        }
    }

if（$（'#付款包装器'）。长度>0）{
var form_elements=['#nr_form'、'#nr_submit_button'、'#nr_notes'，
“#记录金额”]、[#记录表格”、“#记录提交按钮”、“#记录备注”、“#记录金额”]；
对于（变量i=0；i<2；i++）{
设置格式（格式元素[i]）；
}
}
函数设置窗体（arr）{
$（arr[0]）。提交（函数（事件）{
（arr[1]）道具（“禁用”，正确）；
validateForm（arr[0]，arr[1]，arr[2]，arr[3]）；
返回false；
});
}
函数validateForm（表单、按钮、注释、金额）{
var-err=false；
var note=$（按钮）.val（）.length
var付款=$（金额）.val（）；
如果（注>150）{
警报（“注释大于150”）；
$（'.payment_errors'）.text（“您的便笺似乎太长了，请确保少于150个字符”）
$（按钮）.prop（'disabled'，false）；
错误=正确；
}否则，如果（！validateAmount（付款，按钮））{
错误=正确；
}else if（err==false）{
$（表单）.get（0.submit（）；
}
}
功能validateAmount（付款、提交按钮）{
var match=payment.match（/^[0-9]+\[0-9]{2}/）
如果（payment.length==0）{
$（'.payment_errors'）.text（“提交前必须输入有效金额”）
$（提交按钮）.prop（'disabled'，false）；
返回false；
}否则如果（！匹配）{
$（'.payment_errors'）.text（“嗯，您的付款金额有问题。请确保您的金额格式正确”）
$（提交按钮）.prop（'disabled'，false）；
返回false；
}否则{
返回true；
}
}

任何帮助都将不胜感激。谢谢。

试试看

event.preventDefault();

---

在返回false之前。

省去一些麻烦，直接使用。有什么原因不能使用jquery验证插件而不是编写自己的解决方案吗；如果你把你的javascript和标记放在js FIDLE中，你会得到更快的帮助。我没有特别的理由不使用这个插件。更多的只是试图理解这个特殊的案例。你说头痛是什么意思？我想做的事情比插件更难实现吗？如果是，为什么？当使用jQuery时，没有必要同时做这两件事。另外，它与纯JavaScript的

preventDefault（）

不完全相同。另外，

preventDefault（）

应该是函数中的第一项，而

returnfalse

是最后一项。