当我点击提交时，JavaScript onsubmit验证无法正常工作请求到期日期和CVV

时间：2016-08-04 06:24:07

标签： javascript html

我对onsubmit JavaScript函数有问题。我为CVV和到期日设置了验证。当我只输入CVV时，它没有输入日期提交，但是当我输入日期时，它也询问CVV，但在CVV情况下它没有要求到期日。

<form  name="card" method="post" onsubmit="return validateexpiry()|| validate_cvv(document.card.cvv);">
    <table>
      <tr>
        <td> Expiry Date
        <td>
        <td>
          <select  id="exMonth" title="select a month">
            <option value="0">Month
            </option>
            <option value="01">January
            </option>
            <option value="02">February
            </option>
            <option value="03">March
            </option>
            <option value="04">April
            </option>
            <option value="05">May
            </option>
            <option value="06">June
            </option>
            <option value="07">July
            </option>
            <option value="08">August
            </option>
            <option value="09">September
            </option>
            <option value="10">October
            </option>
            <option value="11">November
            </option>
            <option value="12">December
            </option>
          </select>
          <select   id="exYear" title="select a year">
            <option value="0">Year
            </option>
            <option value="2016">2016
            </option>
            <option value="2017">2017
            </option>
            <option value="2018">2018
            </option>
            <option value="2019">2019
            </option>
            <option value="2020">2020
            </option>
            <option value="2021">2021
            </option>
            <option value="2022">2022
            </option>
            <option value="2023">2023
            </option>
            <option value="2024">2024
            </option>
            <option value="2025">2025
            </option>
            <option value="2026">2026
            </option>
            <option value="2027">2027
            </option>
            <option value="2028">2028
            </option>
            <option value="2029">2029
            </option>
            <option value="2030">2030
            </option>
            <option value="2031">2031
            </option>
          </select>
        </td>
      <tr>
        <td>
          <span id="invalidexpiry">
          </span>
        </td>
      </tr>
      <tr>
        <td>
          CVV
          <input type="text" name="cvv" class="cvv" onkeypress="return isNumber(event)" >
          <span id="usernameError">
          </span>
        </td>
      </tr>
      <tr>
        <td>
          <div id="centreimg">
            <input type="submit" name="S1" value="Submit response" />
          </div>
        </td>
      </tr>
    </table>
      </form>

＆＃13;
＆＃13; 
function validateexpiry()
{
var today, someday;
var exMonth=document.getElementById("exMonth").value;
var exYear=document.getElementById("exYear").value;
today = new Date();
someday = new Date();
someday.setFullYear(exYear, exMonth, 1);
if (someday 
< today) {
        document.getElementById('invalidexpiry').innerHTML="Invalid expiry date";
        return false;
        }
        }
        // cvv
        function validate_cvv(cvv){
        var myRe = /^[0-9]{3,4}$/;
        if(cvv.value.match(myRe))
        {
        return true;  
        }  
        else (card.cvv.value.length==2)
        {
        document.getElementById('usernameError').innerHTML="Invalid CVV";//invalid cvv number
        return false;
        }
        }
＆＃13; 
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Recharge</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="header.css" text="text/css" rel="stylesheet">
      <script src="time.js" type="text/javascript"></script>
	  <script src="jquery-2.2.3.min.js" type="text/javascript"></script>
      <style type="text/css"></style>
<body>
<form  name="card" method="post" onsubmit="return validateexpiry()&& validate_cvv(document.card.cvv);">


<table>
<tr>
<td> Expiry Date<td>
<td>
<select  id="exMonth" title="select a month">
<option value="0">Month</option>
    <option value="01">January</option>
    <option value="02">February</option>
    <option value="03">March</option>
    <option value="04">April</option>
    <option value="05">May</option>
    <option value="06">June</option>
    <option value="07">July</option>
    <option value="08">August</option>
    <option value="09">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
</select>

<select   id="exYear" title="select a year">
 <option value="0">Year</option>
    
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
    <option value="2023">2023</option>
    <option value="2024">2024</option>
    <option value="2025">2025</option>
    <option value="2026">2026</option>
    <option value="2027">2027</option>
    <option value="2028">2028</option>
    <option value="2029">2029</option>
    <option value="2030">2030</option>
    <option value="2031">2031</option>
</select>
</td>
<tr><td><span id="invalidexpiry"></span></td></tr>
<tr><td>
CVV
<input type="text" name="cvv" class="cvv" onkeypress="return isNumber(event)" ><span id="usernameError"></span>
</td></tr>
 <tr>
 <td>
<div id="centreimg">
<input type="submit" name="S1" value="Submit response" />

</div>
</td>
</tr>
</form>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

如果没有看到validateexpirty和validate_cvv的代码，很难给出明确的答案，但我最初的猜测是你的验证逻辑是错误的：

onsubmit="return validateexpiry()|| validate_cvv(document.card.cvv);"

应该包括&&而不是||。

||运算符从左到右工作。也就是说，它将首先评估validateexpiry()，如果它返回true，则不会评估表达式的其余部分（因为无论发生什么，结果都是true）。另一方面，如果它的计算结果为false，则只评估表达式的第二部分。这将一直持续到谓词返回true（在这种情况下表达式将返回true）或所有谓词都计算为false（在这种情况下表达式将返回{{} 1}}）。

编辑：答案是正确的，答案不适合你的原因是因为你的CVV验证码被破坏了。修复了你在问题和评论中发布的HTML和JS片段，这就是我所拥有的。修复错误后它正确工作。

false

将更正后的验证码与您的版本进行比较：

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Recharge</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style type="text/css"></style>
<body>
<script>
function validateexpiry() {
    var today, someday;
    var exMonth=document.getElementById("exMonth").value;
    var exYear=document.getElementById("exYear").value;
    today = new Date();
    someday = new Date();
    someday.setFullYear(exYear, exMonth, 1);
    if (someday < today) {
        document.getElementById('invalidexpiry').innerHTML="Invalid expiry date";
        return false;
    }
    return true;
}


function validate_cvv(cvv) {
    var myRe = /^[0-9]{3,4}$/;
    if(cvv.value.match(myRe)) {
        return true;
    } else {
        document.getElementById('usernameError').innerHTML="Invalid CVV";
        return false;
    }
} 
</script>
<form  name="card" action="/" method="post" onsubmit="return validateexpiry()&& validate_cvv(document.card.cvv);">


<table>
<tr>
<td> Expiry Date<td>
<td>
<select  id="exMonth" title="select a month">
<option value="0">Month</option>
    <option value="01">January</option>
    <option value="02">February</option>
    <option value="03">March</option>
    <option value="04">April</option>
    <option value="05">May</option>
    <option value="06">June</option>
    <option value="07">July</option>
    <option value="08">August</option>
    <option value="09">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
</select>

<select   id="exYear" title="select a year">
 <option value="0">Year</option>

    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
    <option value="2023">2023</option>
    <option value="2024">2024</option>
    <option value="2025">2025</option>
    <option value="2026">2026</option>
    <option value="2027">2027</option>
    <option value="2028">2028</option>
    <option value="2029">2029</option>
    <option value="2030">2030</option>
    <option value="2031">2031</option>
</select>
</td>
<tr><td><span id="invalidexpiry"></span></td></tr>
<tr><td>
CVV
<input type="text" name="cvv" class="cvv" ><span id="usernameError"></span>
</td></tr>
 <tr>
 <td>
<div id="centreimg">
<input type="submit" name="S1" value="Submit response" />

</div>
</td>
</tr>
</form> 
</body>
</html>
如果值正确，则

function validateexpiry() { var today, someday; var exMonth=document.getElementById("exMonth").value; var exYear=document.getElementById("exYear").value; today = new Date(); someday = new Date(); someday.setFullYear(exYear, exMonth, 1); if (someday < today) { document.getElementById('invalidexpiry').innerHTML="Invalid expiry date"; return false; } } function validate_cvv(cvv){ var myRe = /^[0-9]{3,4}$/; if(cvv.value.match(myRe)) { return true; } else (card.cvv.value.length==2) { document.getElementById('usernameError').innerHTML="Invalid CVV"; return false; } } 不会返回，因此它会隐式返回validateexpiry，当然，它会在undefined处理程序中计算为false。如何创建所选日期也有错误，它总是一个人关闭，但我没有纠正。

onsubmit有一个彻头彻尾的语法错误。 validate_cvv阻止if ... else没有任何条件。

答案 1 :(得分：0)

验证应该是＆amp;＆amp;而不是||

onsubmit =＆＃34; return validateexpiry（）＆amp;＆amp; validate_cvv（document.card.cvv）;＆＃34;

答案 2 :(得分：-1)

您是否也可以发布validateexpiry()和validate_cvv(document.card.cvv)的验证。

但我最初的客人应该是

 return validateexpiry() && validate_cvv(document.card.cvv);

或者您的失效日期的默认值为0年零0个月，因此validateexpiry可能会错过这一个。

相关问题
最新问题