JavaScript >> Javascript 文檔 >  >> JavaScript

製作簡單的信用卡驗證表

在這個快速教程中,我們將向您展示如何創建一個簡單的信用卡表格。我們將從頭開始構建整個東西,在 Bootstrap 3 的界面和 Payform.js 的客戶端表單驗證的幫助下。

項目概述

以下是我們將在本教程中構建的內容的簡要介紹:

您可以從 下載 獲取此項目的完整代碼 文章頂部附近的按鈕。文件概覽如下:

我們需要在 HTML 中包含兩個 .css 文件和兩個 .js 文件。所有其他資源,如 Bootstrap 框架、jQuery 和 Web 字體都將通過 CDN 包含在外部。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Credit Card Validation Demo</title>

    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/styles.css">
    <link rel="stylesheet" type="text/css" href="assets/css/demo.css">
</head>

<body>

    <!-- The HTML for our form will go here -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="assets/js/jquery.payform.min.js" charset="utf-8"></script>
    <script src="assets/js/script.js"></script>
</body>
</html>

現在一切都設置好了,我們可以開始構建我們的信用卡表單了。讓我們從 HTML 佈局開始吧!

佈局

信用卡對話需要簡單、簡短和直接。以下是每個信用卡表單需要具備的四個輸入字段:

  • 信用卡持有人姓名
  • 卡號
  • 密碼(也稱為 CVV/CVC/CID)
  • 有效期

我們需要做的就是創建一個 <form> 並添加所有必需的輸入字段。對於所有者、卡號和 CVV,我們將使用簡單的文本字段。對於到期日期,我們將結合使用預定義選項的兩個選擇。

除此之外,我們的表單將有一個標題、一個提交按鈕和流行信用卡供應商的圖像。由於我們使用的是 Bootstrap,所以有一些額外的標記,但它有助於保持代碼的組織性和佈局的響應性。

<div class="creditCardForm">
    <div class="heading">
        <h1>Confirm Purchase</h1>
    </div>
    <div class="payment">
        <form>
            <div class="form-group owner">
                <label for="owner">Owner</label>
                <input type="text" class="form-control" id="owner">
            </div>
            <div class="form-group CVV">
                <label for="cvv">CVV</label>
                <input type="text" class="form-control" id="cvv">
            </div>
            <div class="form-group" id="card-number-field">
                <label for="cardNumber">Card Number</label>
                <input type="text" class="form-control" id="cardNumber">
            </div>
            <div class="form-group" id="expiration-date">
                <label>Expiration Date</label>
                <select>
                    <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>
                    <option value="16"> 2016</option>
                    <option value="17"> 2017</option>
                    <option value="18"> 2018</option>
                    <option value="19"> 2019</option>
                    <option value="20"> 2020</option>
                    <option value="21"> 2021</option>
                </select>
            </div>
            <div class="form-group" id="credit_cards">
                <img src="assets/images/visa.jpg" id="visa">
                <img src="assets/images/mastercard.jpg" id="mastercard">
                <img src="assets/images/amex.jpg" id="amex">
            </div>
            <div class="form-group" id="pay-now">
                <button type="submit" class="btn btn-default" id="confirm-purchase">Confirm</button>
            </div>
        </form>
    </div>
</div>

現在我們有了所需的輸入字段,我們可以設置驗證規則了。

驗證

我們將在這裡展示的所有驗證都是客戶端的,並且僅在 JavaScript 中完成。如果您對 HTML 驗證感興趣,請查看這篇文章。

首先,我們將定義我們需要的所有 jQuery 選擇器:

var owner = $('#owner'),
    cardNumber = $('#cardNumber'),
    cardNumberField = $('#card-number-field'),
    CVV = $("#cvv"),
    mastercard = $("#mastercard"),
    confirmButton = $('#confirm-purchase'),
    visa = $("#visa"),
    amex = $("#amex");

然後,使用 Payform.js,我們將基本輸入字段轉換為信用卡數據的專用輸入。我們只需要調用正確的函數,庫就會自動為我們處理文本格式和最大字符串長度:

cardNumber.payform('formatCardNumber');
CVV.payform('formatCardCVC');

接下來,我們希望能夠在用戶輸入卡號時向他們提供實時反饋。為此,我們將編寫一個簡單的函數來做兩件事:

  1. 檢查字段中的當前文本是否為有效的卡號。為文本字段添加適當的顏色。
  2. 根據當前輸入的字符,查看卡是 Visa、MasterCard 還是 American Express。這是使用 payform.parseCardType() 完成的 方法。

由於我們要在每次輸入新字符時執行上述動作,我們將使用 jQuery keyup() 事件監聽器。

cardNumber.keyup(function() {
    amex.removeClass('transparent');
    visa.removeClass('transparent');
    mastercard.removeClass('transparent');

    if ($.payform.validateCardNumber(cardNumber.val()) == false) {
        cardNumberField.removeClass('has-success');
        cardNumberField.addClass('has-error');
    } else {
        cardNumberField.removeClass('has-error');
        cardNumberField.addClass('has-success');
    }

    if ($.payform.parseCardType(cardNumber.val()) == 'visa') {
        mastercard.addClass('transparent');
        amex.addClass('transparent');
    } else if ($.payform.parseCardType(cardNumber.val()) == 'amex') {
        mastercard.addClass('transparent');
        visa.addClass('transparent');
    } else if ($.payform.parseCardType(cardNumber.val()) == 'mastercard') {
        amex.addClass('transparent');
        visa.addClass('transparent');
    }
});

我們還需要做一件事,那就是在用戶嘗試提交表單時檢查所有字段是否包含有效數據。

名稱驗證可能非常棘手。為了保持本教程的簡潔性,我們不會進入該主題,我們只會檢查輸入名稱是否至少有 5 個字符長。 Payform 為我們提供了驗證表單其餘部分所需的方法。

confirmButton.click(function(e) {
    e.preventDefault();

    var isCardValid = $.payform.validateCardNumber(cardNumber.val());
    var isCvvValid = $.payform.validateCardCVC(CVV.val());

    if(owner.val().length < 5){
        alert("Wrong owner name");
    } else if (!isCardValid) {
        alert("Wrong card number");
    } else if (!isCvvValid) {
        alert("Wrong CVV");
    } else {
        // Everything is correct. Add your form submission code here.
        alert("Everything is correct");
    }
});

樣式

我們使用的是 Bootstrap,所以大部分樣式都是由框架完成的。我們的 CSS 主要涵蓋輸入字段的大小以及各種填充、邊距和字體調整。

styles.css

.creditCardForm {
    max-width: 700px;
    background-color: #fff;
    margin: 100px auto;
    overflow: hidden;
    padding: 25px;
    color: #4c4e56;
}
.creditCardForm label {
    width: 100%;
    margin-bottom: 10px;
}
.creditCardForm .heading h1 {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    color: #4c4e56;
}
.creditCardForm .payment {
    float: left;
    font-size: 18px;
    padding: 10px 25px;
    margin-top: 20px;
    position: relative;
}
.creditCardForm .payment .form-group {
    float: left;
    margin-bottom: 15px;
}
.creditCardForm .payment .form-control {
    line-height: 40px;
    height: auto;
    padding: 0 16px;
}
.creditCardForm .owner {
    width: 63%;
    margin-right: 10px;
}
.creditCardForm .CVV {
    width: 35%;
}
.creditCardForm #card-number-field {
    width: 100%;
}
.creditCardForm #expiration-date {
    width: 49%;
}
.creditCardForm #credit_cards {
    width: 50%;
    margin-top: 25px;
    text-align: right;
}
.creditCardForm #pay-now {
    width: 100%;
    margin-top: 25px;
}
.creditCardForm .payment .btn {
    width: 100%;
    margin-top: 3px;
    font-size: 24px;
    background-color: #2ec4a5;
    color: white;
}
.creditCardForm .payment select {
    padding: 10px;
    margin-right: 15px;
}
.transparent {
    opacity: 0.2;
}
@media(max-width: 650px) {
    .creditCardForm .owner,
    .creditCardForm .CVV,
    .creditCardForm #expiration-date,
    .creditCardForm #credit_cards {
        width: 100%;
    }
    .creditCardForm #credit_cards {
        text-align: left;
    }
}

有了這個,我們的信用卡驗證表就完成了!


Tutorial JavaScript 教程
  1. 直接從您的代碼管理您的 npm-package

  2. 如何從逗號分隔和空格字符串中選擇所有數字?

  3. CSS 變量、輸入[type=color] 和表單動畫

  4. 獲取食物 {Day - 16}

  5. Bootstrap 5 下拉菜單

  6. ⚡ 10 個最好的 Chrome 擴展程序 [保證讓你開心]

  7. 跳上 Firefox 91

  1. #100daysofcode 第 18 天:低頭

  2. JSX

  3. 從頭開始編寫 3D 軟引擎:第 6 部分

  4. React State:一個簡單易懂的分解

  5. 將持久狀態存儲到 URL Nuxt Js

  6. 在 NodeJs API 中處理蠻力和 DDoS 攻擊

  7. 理解 JavaScript 中的類

  1. 什麼是 Deno,為什麼每個人都在談論它?

  2. 反應原生應用

  3. 歡迎使用中繼掛鉤

  4. Jest 和 Redis(數據庫緩存的單元測試問題)