Question

我想弄清楚表单有什么问题。它只是打开文件＆＃34; form.hmtl＆＃34;并给我一个错误。

<!DOCTYPE html>
<html lang="en-US" class="Html" id="Main" dir="auto">
<head class="Head" id="Main">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="description" content="NRN">
<meta name="author" content="NRN">
<title class="Title" id="Title">NRN</title>
</head>
<body class="Body" id="Main">
<script type="text/javascript">

  function checkForm(form)
  {
    var x = document.getElementById("name");
    x.value = x.value.toUpperCase();

    var y = document.getElementById("number");
    y.value = y.value.split(-,4);

    var z = document.getElementById("three");

    var i = document.getElementById("four");

    var alph = /^[\w ]+$/;
    var cardnumb = /^\d{4}-\d{4}-\d{4}-\d{4}$/;
    var cvvnumb = /^\d{3}$/;
    var monthnumb = /^\d{1,2}$/;
    var yearnumb = /^\d{4}$/;
    var errors=[]; 

    if(form.one.value == "") {
      errors.push("Please enter your full name!");
    }

    else if(!alph.test(form.one.value)) {
      errors.push("Full name is wrong or includes invalid characters!");

    if(form.two.value == "") {
      errors.push("Please enter your 16-digit code!");
    }

    else if(!cardnumb.test(form.two.value)) {
      errors.push("Card number does not consist of 16 digits or includes invalid characters!");

    if(form.three.value == "") {
      errors.push("Please enter your month of expiration!");
    }

    else if(!monthnumb.test(form.three.value)) {
      errors.push("The month does not consist of 2 digits or includes invalid characters!");

    if Number(z.value) > 12 {
       errors.push("The month must be between (0)1 or 12!");
    } 

    if(form.four.value == "") {
      errors.push("Please enter your year of expiration!");
    }

    else if(!yearnumb.test(form.four.value)) {
      errors.push("The year does not consist of 4 digits or includes invalid characters!");

    if Number(i.value) < 2017 {
       errors.push("The year must be greather than 2017!");
    } 

    if(form.five.value == "") {
      errors.push("Please enter your 3-digit CVV code!");
    }

    else if(!cvvnumb.test(form.five.value)) {
      errors.push("The CVV does not consist of 3 digits or includes invalid characters!");

    if (errors.lenght > 0) {
        var msg = "Errors: \n\n";
        for (var i=0; i<errors.lenght; i++) {
            msg += errors[i] + "\n";
        }
        alert(msg);
        return false;
    }
    return true;
  }

</script>

<nav>
    <ul>
        <li><a href="index.php">Home</a></li>
    </ul>
</nav>
<p class="p1">Payment form validation using JavaScript<p>
<form method="post" action="form.html" onsubmit="return checkForm(this);">
<div class="form-group-name">
    <label for="name">Owner</label><br>
    <input type="text" placeholder="Name on card" class="form-control-1" id="name" name="one">
</div>
<div class="form-group-number">
    <label for="number">Card number</label><br>
    <input type="text" placeholder="16-digit code" class="form-control-2" id="number" name="two">
</div>
<div class="form-group-date">
    <label for="date">Expiration date</label><br>
    <input type="text" placeholder="Month" class="form-control-3" id="date" name="three">
    <input type="text" placeholder="Year" class="form-control-3" id="date2" name="four">
</div>
<div class="form-group-cvv">
    <label for="cvv">CVV</label><br>
    <input type="text" placeholder="3-digit code" class="form-control-4" id="cvv" name="five">
</div>
<div class="form-group-submit">
    <input type='submit' class='submit_form' value='Validate'>
</div>
</form>

可能是什么问题？请帮我！预先感谢！也许这是不明显的事情。

Answer 1

<script type="text/javascript">


function checkForm(form) {
    var x = document.getElementById("name");
    x.value = x.value.toUpperCase();

    var y = document.getElementById("number");
    y.value = y.value.split(-, 4);

    var z = document.getElementById("three");

    var i = document.getElementById("four");

    var alph = /^[\w ]+$/;
    var cardnumb = /^\d{4}-\d{4}-\d{4}-\d{4}$/;
    var cvvnumb = /^\d{3}$/;
    var monthnumb = /^\d{1,2}$/;
    var yearnumb = /^\d{4}$/;
    var errors = [];

    if (form.one.value == "") {
        errors.push("Please enter your full name!");
    }

    else if (!alph.test(form.one.value)) {
        errors.push("Full name is wrong or includes invalid characters!");
    }
    if (form.two.value == "") {
        errors.push("Please enter your 16-digit code!");
    }

    else if (!cardnumb.test(form.two.value)) {
        errors.push("Card number does not consist of 16 digits or includes invalid characters!");
    }
    if (form.three.value == "") {
        errors.push("Please enter your month of expiration!");
    }

    else if (!monthnumb.test(form.three.value)) {
        errors.push("The month does not consist of 2 digits or includes invalid characters!");
    }
    if (Number(z.value) > 12) {
        errors.push("The month must be between (0)1 or 12!");
    }

    if (form.four.value == "") {
        errors.push("Please enter your year of expiration!");
    }

    else if (!yearnumb.test(form.four.value)) {
        errors.push("The year does not consist of 4 digits or includes invalid characters!");
    }
    if (Number(i.value) < 2017) {
        errors.push("The year must be greather than 2017!");
    }

    if (form.five.value == "") {
        errors.push("Please enter your 3-digit CVV code!");
    }

    else if (!cvvnumb.test(form.five.value)) {
        errors.push("The CVV does not consist of 3 digits or includes invalid characters!");
    }
    if (errors.lenght > 0) {
        var msg = "Errors: \n\n";
        for (var i = 0; i < errors.lenght; i++) {
            msg += errors[i] + "\n";
        }
        alert(msg);
        return false;
    }
    return true;
}

</script>

更改您的所有js代码并尝试。

Javascript表单无法正常工作

1 个答案: