验证此表格（仅限数字）？

Question

背景##

我完全是个JS的菜鸟（我会稍微看懂，但不会写）

问题

链接：http://s328792954.websitehome.co.uk//multi_step_form/

我正在尝试制作一个多步骤表单， 我发现了一个在线教程，其中显示了一个基本示例。

无论如何.....

我添加了一个仅限数字的字段（例如：贷款金额） 但我使用的编码显然是错误的，因为现在它不会接受任何形式的输入
+ 我认为它会干扰其他编码。

以'//检查金额输入是否为数字'开头的部分是问题

复制代码

   $(function(){
//original field values
var field_values = {
        //id        :  value
        'username'  : 'username',
        'password'  : 'password',
        'cpassword' : 'password',
        'firstname'  : 'first name',
        'lastname'  : 'last name',
        'email'  : 'email address',
        'amountborrow' : '000'
};


//inputfocus
$('input#username').inputfocus({ value: field_values['username'] });
$('input#password').inputfocus({ value: field_values['password'] });
$('input#cpassword').inputfocus({ value: field_values['cpassword'] }); 
$('input#lastname').inputfocus({ value: field_values['lastname'] });
$('input#firstname').inputfocus({ value: field_values['firstname'] });
$('input#email').inputfocus({ value: field_values['email'] });
$('input#amountborrow').inputfocus({ value: field_values['amountborrow'] });  




//reset progress bar
$('#progress').css('width','0');
$('#progress_text').html('0% Complete');

//first_step
$('form').submit(function(){ return false; });
$('#submit_first').click(function(){
    //remove classes
    $('#first_step input').removeClass('error').removeClass('valid');


    //check if amount input is numbers
    var fields = $('#first_step input[type=amountborrow]');
    var  numOnly = /^[0-9]$/;
    var error = 0;
    fields.each(function(){
        var value = $(this).val();
        if( value.length<4 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='amountborrow' && !numOnly(value) ) ) {
            $(this).addClass('error');
            $(this).effect("shake", { times:3 }, 50);

            error++;
        } else {
            $(this).addClass('valid');
        }
    });  




    //check if inputs aren't empty
    var fields = $('#first_step input[type=password]');
    var error = 0;
    fields.each(function(){
        var value = $(this).val();
        if( value.length<4 || value==field_values[$(this).attr('id')] ) {
            $(this).addClass('error');
            $(this).effect("shake", { times:3 }, 50);

            error++;
        } else {
            $(this).addClass('valid');
        }
    });     


    if(!error) {
        if( $('#password').val() != $('#cpassword').val() ) {
                $('#first_step input[type=password]').each(function(){
                    $(this).removeClass('valid').addClass('error');
                    $(this).effect("shake", { times:3 }, 50);
                });

                return false;
        } else {   
            //update progress bar
            $('#progress_text').html('33% Complete');
            $('#progress').css('width','113px');

            //slide steps
            $('#first_step').slideUp();
            $('#second_step').slideDown();     
        }               
    } else return false;
});


$('#submit_second').click(function(){
    //remove classes
    $('#second_step input').removeClass('error').removeClass('valid');

    var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
    var fields = $('#second_step input[type=text]');
    var error = 0;
    fields.each(function(){
        var value = $(this).val();
        if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
            $(this).addClass('error');
            $(this).effect("shake", { times:3 }, 50);

            error++;
        } else {
            $(this).addClass('valid');
        }
    });

    if(!error) {
            //update progress bar
            $('#progress_text').html('66% Complete');
            $('#progress').css('width','226px');

            //slide steps
            $('#second_step').slideUp();
            $('#third_step').slideDown();     
    } else return false;

});


$('#submit_third').click(function(){
    //update progress bar
    $('#progress_text').html('100% Complete');
    $('#progress').css('width','339px');

    //prepare the fourth step
    var fields = new Array(
        $('#username').val(),
        $('#password').val(),
        $('#email').val(),
        $('#firstname').val() + ' ' + $('#lastname').val(),
        $('#age').val(),
        $('#gender').val(),
        $('#country').val(),
        $('#amountborrow').val()                       
    );
    var tr = $('#fourth_step tr');
    tr.each(function(){
        //alert( fields[$(this).index()] )
        $(this).children('td:nth-child(2)').html(fields[$(this).index()]);
    });

    //slide steps
    $('#third_step').slideUp();
    $('#fourth_step').slideDown();            
});


$('#submit_fourth').click(function(){
    //send information to server
    alert('Data sent');
});

});

请帮忙 （对不起，如果这是错误的部分，我真的不明白论坛部分）

#edit#
@Banaan 信息很棒 :) 谢谢！

但表单仍然接受不正确的信息... '字段'没有，但表格会并继续下一步。 我需要 }else 在某处返回 false 吗？

 //first_step
$('form').submit(function(){ return false; });
$('#submit_first').click(function(){
    //remove classes
    $('#first_step input').removeClass('error').removeClass('valid');


    //check if amount input is numbers
    var fields = $('#first_step input[type=amountborrow]');
    var  numOnly = /^[0-9]+$/;
    var error = 0;
    fields.each(function(){
        var value = $(this).val();
        if( value.length<3 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='amountborrow' && !numOnly.test(value) ) ) {
            $(this).addClass('error');
            $(this).effect("shake", { times:3 }, 50);


        } else {
            $(this).addClass('valid');
        }           
    });  


    //check if inputs aren't empty
    var fields = $('#first_step input[type=password]');
    var error = 0;
    fields.each(function(){
        var value = $(this).val();
        if( value.length<4 || value==field_values[$(this).attr('id')] ) {
            $(this).addClass('error');
            $(this).effect("shake", { times:3 }, 50);

            error++;
        } else {
            $(this).addClass('valid');
        }
    });     


    if(!error) {
        if( $('#password').val() != $('#cpassword').val() ) {
                $('#first_step input[type=password]').each(function(){
                    $(this).removeClass('valid').addClass('error');
                    $(this).effect("shake", { times:3 }, 50);
                });

                return false;
        } else {   
            //update progress bar
            $('#progress_text').html('33% Complete');
            $('#progress').css('width','113px');

            //slide steps
            $('#first_step').slideUp();
            $('#second_step').slideDown();     
        }               
    } else return false;
});

请多多指教

Answer 1

您创建了某种新的RegExp 对象，这是正确的方向，但您可能希望接受任何数字而不是单个数字：

var numOnly = /^[0-9]+$/;

其中[0-9] 表示一个数字，+ 表示出现一次或多次。

但是，您使用 RegExp 对象的方式是不正确的。如果您查看第二步中的电子邮件正则表达式，他们使用

var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var value = $(this).val();
emailPattern.test(value)

emailPattern.test(value) 部分是您错过的。要检查输入是否为数字，请不要使用!numOnly(value)，而是使用!numOnly.test(value)。

有关 javascript 正则表达式的更完整教程，您可能需要查看W3Schools