javascript - 自定义信用卡号长度

Question

我正在为学校开发披萨网站。

这是我需要回答的问题。*允许用户从三种类型的信用卡中进行选择:维萨卡、万事达卡和美国运通卡。根据信用卡类型，限制信用卡号的长度，Visa 和 MasterCard 为 16 位，American Express 为 15 位。*

目前，该页面已设置好，因此用户可以选择是要在取披萨时付款还是使用信用卡在线付款。

选中在线单选框时，会出现更多带有信用卡名称的单选框。

html代码

<p> Payment Method</p>
<input id="paypickup" type="radio" name="rbRating" 
value="Pick Up" checked />Pay on pickup 
<input id="online" type="radio" name="rbRating" 
value="online" />Online


<div id="hidden2" class="textinput">
<input id="visa" type="radio" name="cardtype" 
value="Visa" onclick="showMe('visanum')"/>Visa 
<input id="mastercard" type="radio" name="cardtype" 
value="MasterCard" onclick="showMe('masternum')"/>MasterCard
<input id="americanexpress" type="radio" name="cardtype" 
value="American Express" onclick="showMe('americaninfo')"/>American Express
</div>

<div id="visainfo">
<label for="visanum">Credit Card Number</label>
<input id="visanum" type="text" name="cardnum" maxlength="16" />
</div>
<div id="masterinfo">
<label for="masternum">Credit Card Number</label>
<input id="masternum" type="text" name="cardnum" maxlength="16" />
</div>
<div id="americaninfo">
<label for="americannum">Credit Card Number</label>
<input id="americannum" type="text" name="cardnum" maxlength="15" />
</div>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>

检查发货前隐藏信用卡单选框的JS代码

   $(document).ready(function() {

   $('input[type="radio"]').click(function() {
   if($(this).attr('id') == 'paypickup') {
        $('#hidden2').hide();           
   }

   if($(this).attr('id') == 'online') {
        $('#hidden2').show();
   }
   });
});

如您在 html 代码中所见，我试图通过创建多个具有最大长度的文本框来尝试此操作。但我立即意识到这是低效且令人困惑的。

我对这些东西很陌生。

Answer 1

为信用卡号码创建一个输入框，最初禁用输入框，并在选择信用卡单选按钮时启用输入框。这里是 HTML 和 JS 的变化

HTML

<div>
  Credit Card Number
  <input id="creditCardNumber" type="text" name="cardnum" disabled/>
</div>

JS

   function showMe(type) {
    // clear previous value
     $("#creditCardNumber").val('');
     // enable the input and accept 16 digits for amex
     if (type == "americaninfo") {
       $("#creditCardNumber").attr({
         maxlength: 16, 
         disabled: false
       });
     } else {
       $("#creditCardNumber").attr({
         maxlength: 15,
         disabled: false
       })
     }
   }

DEMO