堆棧內存溢出
  簡體   English   中英

如何響應式獲取Javascript以驗證來自HTML5表單文本框的信息？

[英]How to responsively get Javascript to validate information from HTML5 form textboxes?

 原文  2019-04-07 18:40:12  9   4    javascript/ html5

問題描述

我正在嘗試為演示任務構建功能性信用卡驗證腳本。 我正在嘗試讓JavaScript對輸入做出反應，因為focus（）從文本框更改為文本框。 一旦我有JavaScript反應，那么我想根據特定參數驗證該數據。

我已經嘗試將onchange方法直接添加到HTML5中，但有些東西無法正常工作。 我對所有的建議持開放態度，我已經花了很長時間才陷入僵局。

HTML 

<h2>Payment
<img style="visibility: hidden" class="mastercard" 
src="https://img.icons8.com/color/48/000000/mastercard.png">
<img style="visibility: hidden" class="visacard" 
src="https://img.icons8.com/color/48/000000/visa.png">
<img style="visibility: hidden" class="discovercard" 
src="https://img.icons8.com/color/48/000000/discover.png">
<img style="visibility: hidden" class="amexcard" 
src="https://img.icons8.com/color/48/000000/amex.png">
</h2>
    <div class="form-group">
      <label for="name-on-card">Name on Card</label>
      <input class="cc_name" type="text" name="card-name" class="form-control" placeholder="">
    </div>
    <div class="form-group">
      <label for="cc-number">Credit card number</label>
      <input type="text" class="form-control" id="cc_number" name="cc_number" placeholder="" maxlength="16">
    </div>
    <div class="">
      <select class="month_year_select" name="month" id="month">
        <option value="">exp month</option>
      </select>
    </div>
    <div class="">
      <select class="month_year_select" id="year" name="year">
        <option value="">exp year</option>
      </select>
    </div>
    <div class="CVV">
      <label for="cc-cvv">CVV</label>
      <input type="text" class="form-control" id="cc-cvv" name="cc-cvv" placeholder="" maxlength="4">
    </div>
      <button type="submit" class="myButton"style = "float:right;">Place Order</button>
  </form>

JavaScript的 

<script type="text/javascript">
  var creditError="Error with Credit Card information";
  var CWError="Error with CW";

document.getElementbyID("cc-cvv").onchange=function(){function CWcheck()};

document.getElementbyID("cc_number").onchange=function(){function creditCheck()};

document.getElementbyID("cc_name").onchange=function(){function upperFunction()};


function CWcheck()
  {
    if (document.forms["LeftCheck"]["cc-cvv"].value.length < 3 ||document.forms["LeftCheck"]["cc-cvv"].value.length>=5){
      alert(CWError);
      cdocument.forms["LeftCheck"]["cc-cvv"].value.value=" ";
    }
    else if(document.forms["LeftCheck"]["cc-cvv"].value.match(/^[A-Za-z]+$/)){
      alert(CWError);
      document.forms["LeftCheck"]["cc-cvv"].value=" ";
    }
    else if(document.forms["LeftCheck"]["cc-cvv"].value.match(/^[-+]?[0-9]+\.[0-9]+$/)) { 
      alert(CWError);
      document.forms["LeftCheck"]["cc-cvv"].value=" ";
    }
    else 
      break;
  }

function upperFunction() {
  document.getElementsByClassName("cc_name").value.toUpperCase();
  }


function creditCheck() {
  {
    if (document.forms["LeftCheck"]["cc_number"].value.length < 15 ||document.forms["LeftCheck"]["cc_number"].value.length>16){
      alert(creditError);
      document.forms["LeftCheck"]["cc_number"].value=" ";
    }
    else if(document.forms["LeftCheck"]["cc_number"].value.match(/^[A-Za-z]+$/)){
      alert(creditError);
      document.forms["LeftCheck"]["cc_number"].value=" ";
    }
    else if(document.forms["LeftCheck"]["cc_number"].value.match(/^[-+]?[0-9]+\.[0-9]+$/)) { 
      alert(creditError);
      document.forms["LeftCheck"]["cc_number"].value=" ";
    }
    else 
      if(document.forms["LeftCheck"]["cc_number"].value.match(/^(?:3[47][0-9]{13})$/)){
        document.getElementsByClassName('amexcard').style.visibility="visable";
        document.forms["LeftCheck"]["cc_number"].value=" ";
        }
      else if(document.forms["LeftCheck"]["cc_number"].value.match(/^(?:4[0-9]{12}(?:[0-9]{3})?)$/)){
        document.getElementsByClassName('visacard').style.visibility="visable";
        document.forms["LeftCheck"]["cc_number"].value=" ";
        }
      else if(document.forms["LeftCheck"]["cc_number"].value.match(/^(?:5[1-5][0-9]{14})$/)){
        document.getElementsByClassName('mastercard').style.visibility="visable";
        document.forms["LeftCheck"]["cc_number"].value=" ";
        }
      else if(document.forms["LeftCheck"]["cc_number"].value;=.match(/^(?:6(?:011|5[0-9][0-9])[0-9]{12})$/)){
        document.getElementsByClassName('discovercard').style.visibility="visable";
        document.forms["LeftCheck"]["cc_number"].value=" "
        }        
      else {
        alert(creditError)
        this.clear()
        }
  }

我希望像文本框一樣，在輸入信用卡號時驗證它; 它會檢查輸入數字之外的任何內容，數字的節奏與卡片類型匹配或重置字段，並顯示卡片在“付款”標題旁邊的圖像。

Alex的Checksum驗證非常有效，我可以簡化圖像設置。 到目前為止，我的代碼已更新為以下內容

更新了HTML 

<form method="POST" action="/checkout" class = "LeftCheck" name="LeftCheck" id="LeftCheck">
<h2>Payment
<img style="visibility: hidden" class="mastercard" 
src="https://img.icons8.com/color/48/000000/mastercard.png">
<img style="visibility: hidden" class="visacard" 
src="https://img.icons8.com/color/48/000000/visa.png">
<img style="visibility: hidden" class="discovercard" 
src="https://img.icons8.com/color/48/000000/discover.png">
<img style="visibility: hidden" class="amexcard" 
src="https://img.icons8.com/color/48/000000/amex.png">
</h2>
    <div class="form-group">
      <label for="name-on-card">Name on Card</label>
      <input class="cc_name" type="text" name="card-name" class="form-control" placeholder="">
    </div>
    <div class="form-group">
      <label for="cc-number">Credit card number</label>
      <input type="text" class="form-control" id="cc_number" name="cc_number" placeholder="" maxlength="16">
    </div>
    <div class="">
      <select class="month_year_select" name="month" id="month">
        <option value="">exp month</option>
      </select>
    </div>
    <div class="">
      <select class="month_year_select" id="year" name="year">
        <option value="">exp year</option>
      </select>
    </div>
    <div class="CVV">
      <label for="cc-cvv">CVV</label>
      <input type="text" class="form-control" id="cc-cvv" name="cc-cvv" placeholder="" maxlength="4">
    </div>
      <button type="submit" class="myButton"style = "float:right;">Place Order</button>
  </form>

以及我的JavaScript更新的問題區域 

document.getElementById('cc_number').addEventListener('change',pictureCheck);
  function pictureCheck()
  {
    var ccNum = this.value;
    if (ccNum.length = 15)
    {
      document.getElementsById('amexcard').style.display='';
    }
    else if(ccNum.value.match(/^(?:4[0-9]{12}(?:[0-9]{3})?)$/))
    {
      document.getElementsById('visacard').style.display='';
    }
    else if(ccNum.value.match(/^(?:5[1-5][0-9]{14})$/))
    {
      document.getElementsById('mastercard').style.display='';
    }
    else (ccNum.value;=.match(/^(?:6(?:011|5[0-9][0-9])[0-9]{12})$/)) 
    {
      document.getElementsById('discovercard').style.display='';
    }
  }

4 個解決方案

解決方案1
 0  2019-04-07 18:49:30

你可以用JQuery做到這一點。 在輸入字段之間切換時，可以運行驗證腳本。 

$("#id1, #id2").focus(function() {
  alert("Focus changed.");
  //run validator
});

解決方案2
 0  2019-04-07 18:52:18

我注意到你使用document.forms["LeftCheck"]["cc-cvv"]來訪問表單的字段。 由於您沒有包含表單開始標記，因此我想確保您表單的name字段設置為LeftCheck而不是ID，因為我之前遇到過此問題。

您還可以使用document.getElementbyID()來訪問要應用onchange偵聽器的元素。 該方法實際上是document.getElementbyId() ，最后一個字母不是大寫的。 這可能是您的事件未被解雇的原因。

將事件附加到select元素的方式也不正確。 你可以這樣做： 

document.getElementbyID("cc-cvv").onchange = CWcheck;

或者 

document.getElementbyID("cc-cvv").onchange = function() { CWcheck();};

最后一件事是您使用正則表達式來驗證信用卡字段的輸入。 但是，您可以通過檢查輸入是否與無效模式匹配來執行此操作，如果匹配，則會引發錯誤。 雖然這可行，但檢查輸入是否匹配有效模式會更好，如果不匹配，則會出錯。 這使您的驗證代碼更加健壯，並確保您沒有可能通過驗證的無效邊緣情況。

解決方案3
 0  2019-04-07 18:54:26

使用內聯onblur事件

<input type="text" onblur="CWcheck()" />

解決方案4
 0 已采納  2019-04-07 19:54:31

你的javascript部分都錯了。 讓我說明它應該如何運作。 

 document.getElementById('cc-cvv').addEventListener('change', CWcheck); //recommended way document.getElementById('cc_number').onchange = creditCheck; //it is OK too function CWcheck() { //function name should conventionally start with lower case but isn't big deal //"this" is the element which fired the event if (!/^\\d{3,4}$/.test(this.value)) { this.value = ''; this.focus(); alert('CVV is 3 or 4 digits'); } } function creditCheck() { // hide cc logos var ccImgs = document.querySelectorAll('h2 img'); for (var i = 0, ccImg; ccImg = ccImgs[i]; ++i) { ccImg.style.visibility = 'hidden'; } var ccNum = this.value.replace(/\\D/g, ''); //remove all non-digits if (ccNum.length < 15 /*15 is amex*/ || ccNum.length > 16) { alert('CC number is 15 or 16 digits'); this.focus(); return false; } //implement Luhn algorithm var check = ccNum.split('') //get array .reverse() .map(function(el, index) { return el * (index % 2 + 1); //multiply even positions by 2 }) .join('') //combine array of strings .split('') .reduce(function(a, b) { //sum digits return a + (b - 0); }, 0); if (!check || (check % 10)) { //checksum should be none-zero and dividable by 10 alert('Incorrect checksum of CC'); this.focus(); return false; } //test passed. show card logo if (/^5[1-5]/.test(ccNum)) document.querySelector('h2 img.mastercard').style.visibility = 'visible'; else if (/^4/.test(ccNum)) document.querySelector('h2 img.visacard').style.visibility = 'visible'; else if (ccNum.length == 15 && /^3[47]/.test(ccNum)) document.querySelector('h2 img.amexcard').style.visibility = 'visible'; else if (/^6011/.test(ccNum)) document.querySelector('h2 img.discovercasd').style.visibility = 'visible'; //and so on else { alert('CC number doesn\\'t match known any CC issuer'); this.focus(); return false; } //test passed. format the string this.value = ccNum .replace(/^(\\d{4})(\\d{4})(\\d{4})(\\d+)$/, '$1 $2 $3 $4'); } 
 <h2>Payment <img style="visibility: hidden" class="mastercard" src="https://img.icons8.com/color/48/000000/mastercard.png"> <img style="visibility: hidden" class="visacard" src="https://img.icons8.com/color/48/000000/visa.png"> <img style="visibility: hidden" class="discovercard" src="https://img.icons8.com/color/48/000000/discover.png"> <img style="visibility: hidden" class="amexcard" src="https://img.icons8.com/color/48/000000/amex.png"> </h2> <div class="form-group"> <label for="name-on-card">Name on Card</label> <input class="cc_name" type="text" name="card-name" class="form-control" placeholder=""> </div> <div class="form-group"> <label for="cc-number">Credit card number</label> <input type="text" class="form-control" id="cc_number" name="cc_number" placeholder="" maxlength="20"> </div> <!--<div class=""> <select class="month_year_select" name="month" id="month"> <option value="">exp month</option> </select> </div> <div class=""> <select class="month_year_select" id="year" name="year"> <option value="">exp year</option> </select> </div>--> <div class="CVV"> <label for="cc-cvv">CVV</label> <input type="text" class="form-control" id="cc-cvv" name="cc-cvv" placeholder="" maxlength="4"> </div>

更新：添加卡號的CC發行人。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使用HTML5 Javascript和Phonegap獲取設備信息 如何使用JavaScript以jsp格式（提交時）驗證多個文本框？ 如何在javascript中將HTML5日期作為Systemdate進行驗證 如何驗證表格並將信息獲取到另一表格 在客戶端驗證Symfony 2.5表單（javascript-不僅是HTML5） 使用Javascript提交HTML5表單並驗證其輸入 如何從表單中獲取信息並將其放入包含 HTML、CSS 和 Javascript 的表中？ 從 HTML 上的 javascript 獲取信息 使用javascript驗證html表單 驗證 javascript 和 html 表格
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM