javascript - 验证此表单(仅限数字)？

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 return false 吗？

//第一步
$('form').submit(function(){ return false; });
$('#submit_first').click(函数(){
   //删除类
    $('#first_step input').removeClass('错误').removeClass('有效');


   //检查输入的金额是否为数字
    var fields = $('#first_step input[type=amountborrow]');
    var numOnly =/^[0-9]+$/;
    变种错误= 0;
    fields.each(函数(){
        变量值 = $(this).val();
        if( value.length<3 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='amountborrow' && !numOnly.test (值(value)) ) ) {
            $(this).addClass('错误');
            $(this).effect("摇", { times:3 }, 50);


        } 别的 {
            $(this).addClass('有效');
        }
    });


   //检查输入是否不为空
    var fields = $('#first_step input[type=password]');
    变种错误= 0;
    fields.each(函数(){
        变量值 = $(this).val();
        if( value.length<4 || value==field_values[$(this).attr('id')] ) {
            $(this).addClass('错误');
            $(this).effect("摇", { times:3 }, 50);

            错误++；
        } 别的 {
            $(this).addClass('有效');
        }
    });


    如果(!错误){
        if( $('#password').val() != $('#cpassword').val() ) {
                $('#first_step input[type=password]').each(function(){
                    $(this).removeClass('有效').addClass('错误');
                    $(this).effect("摇", { times:3 }, 50);
                });

                返回假；
        } 别的 {
           //更新进度条
            $('#progress_text').html('33% 完成');
            $('#progress').css('宽度','113px');

           //滑动步骤
            $('#first_step').slideUp();
            $('#second_step').slideDown();
        }
    }否则返回假；
});

请进一步指教

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