自定义信用卡号长度答案

【问题标题】：Custom Credit Card number lengths自定义信用卡号长度
【发布时间】：2017-02-24 13:58:19
【问题描述】：

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

这是我需要回答的问题。 *允许用户从三种信用卡类型中进行选择：Visa、MasterCard 和 American Express。根据信用卡类型，限制信用卡号的长度，Visa 和 MasterCard 为 16 位，美国运通卡为 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 代码中看到的那样，我尝试通过创建多个具有最大长度的文本框来尝试此操作。但我立即意识到这是低效且令人困惑的。

我对这些东西很陌生。

【问题讨论】：

标签： javascript html css numbers

【解决方案1】：

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

HTML

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

   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

【讨论】：

【解决方案2】：

如果我是你，我不会使用所有这些 input:text。相反，我会使用data 属性在其中存储所有必要的数据。

例如：

<input type="radio" name="cardtype" value="visa" data-maxLength="16"/>Visa

这样，您不必担心隐藏和显示几个不同的框。然后，当用户单击一个新的单选按钮时，您只需将cardnumber 输入中的maxlength 属性设置为data-attr 的值

演示： https://jsbin.com/nufamixisi/edit?html,js,output

// Hide input
$(".cardInput").hide();


// User clicks on radio button so we need to show the input for card info
$('input:radio[name=cardtype]').click(function() {

  // Show the input for card and delete old value
  $("input:text[name=cardnum]").val("");
  $(".cardInput").show();

  // Get the maxLength set in the selected radio button
  var ml = $(this).attr("data-maxLength");

  $("input:text[name=cardnum]").attr("maxlength", ml);

});

我没有在其中添加逻辑来显示/隐藏基于卡片拾取等的卡片内容。我想你可以得到那个；）

【讨论】：