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信息很棒:)谢谢！

但表单仍然接受不正确的信息... “字段”不会，但表单会执行并继续下一步。我需要在其他地方返回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;
});

//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

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

背景##

问题

1 个答案: