JavaScript中的数字验证

Number validation in JavaScript

本文关键字:验证 数字 JavaScript      更新时间:2023-09-26

我已经创建了一个外部JavaScript来验证我在HTML中创建的表单。有些验证可以工作,但是当我使用相同的代码来验证其他字段时,它将不起作用。例如,邮政编码必须包含数字-如果没有,邮政编码无效。

我尝试使用相同的信用卡代码,即信用卡必须有16位数字-如果不是,信用卡号码无效。我为邮政编码编写了代码,它工作了,但是当我试图重新排列它以适应信用卡功能时,它不起作用。不太确定为什么?我应该用不同的函数吗?

这是我的外部javascript:
function validateForm()
{   
     if (isNaN(document.getElementById("postcode").value))
     {
         alert ("Your postcode is not valid");
     }
     else 
     {
         alert ("You have entered your postcode correctly");
     }
    if (document.getElementById ("email").value.length < 5 ||     
        document.getElementById ("email").value.indexOf("@")== -1) 
    {
        alert("Please enter your email min 5 chars and include @ symbol");
        document.getElementById("email").focus();
        return false;
    }
    if (isNaN(document.getElementById("creditcard").value))
    {
        alert ("Your creditcard is not valid");
    }
    else 
    {
    alert ("You have entered your creditcard correctly");
    }
    alert("Thank you for your submission!");
    return true;
}

首先,您可能不希望一次用10个错误对话框提示用户。所以你应该嵌套if else条款。该函数将在第一个错误后停止。其次,isNaN无疑是一个很好的求值器,因为input.value可能返回字符串类型的值。使用正则表达式是一种更健壮的错误检查输入方式。第三,你要考虑用户的混淆错误。用户经常会想(我也是):"等等,我是不是也应该在信用卡上写上破折号呢?"

所以你会删除点,破折号&继续之前的空白(可能在不知不觉中包含这些空白)。其他字符是无效的。对于您的信用卡输入,它将是:

var ccVal = document.getElementById("creditcard").value;
// remove dots, dashes & whitespace
ccVal = ccVal.replace(/('s|'.|'-)/g, ''); 
// if any other chars there, input value = incorrect & stop function
if ( ccVal.match(/'D/) ) { 
  alert('A credit card number only has decimals, silly.');
  return false;
} else {
  // Check for length now
  if ( ccVal.length !== 16) {
    alert('A credit card has 16 decimals, silly.');
    return false;
  } else {
    // more checks
    document.getElementById('myform').submit()
  }
}

查看下面的实现示例:http://jsbin.com/betawahi/1/edit

isNaN检查值是否为整数,您将需要额外检查长度。

保持代码与您设置函数其余部分的方式相似,检查信用卡是否是一个长度为16的数字,您将需要:

if( !(isNaN(document.getElementById("creditcard").value) && document.getElementById("creditcard").value.length === 16) {
    alert("Credit Card Is Valid");
}else{
    alert("Your Credit Card is Not Valid");
    return false;
}