验证信用卡验证后如何重定向到另一个页面？
[英]How can I redirect to another page after verifying the credit card validation?
问题描述
在信用卡验证成功后，我需要有关重定向另一个页面的帮助。我对 vue 一无所知。 我发现了类似 (onSubmit () { axios.get('success.php', { ) 这样的东西？对这个可怜的家伙有什么帮助。谢谢:)
这是vue代码。
<script src="../dist/vue-credit-card-validation.js"></script> <script type="text/javascript"> const { createApp, ref } = Vue; const Example = { computed: { cardBrandClass(){ return this.getBrandClass(this.cardBrand); } }, data() { return { cardNumber: null, cardExpiry: null, cardCvc: null, cardPostal: null, cardErrors: {}, // declaring card-brand in data{} enables card brand name/classes. cardBrand: null, } }, methods: { validate: function(){ // init this.cardErrors = {}; // validate card number if(!this.$cardFormat.validateCardNumber(this.cardNumber)){ this.cardErrors.cardNumber = "Invalid Credit Card Number."; }; // validate card expiry if (!this.$cardFormat.validateCardExpiry(this.cardExpiry)) { this.cardErrors.cardExpiry = "Invalid Expiration Date."; }; // validate card CVC if (!this.$cardFormat.validateCardCVC(this.cardCvc)) { this.cardErrors.cardCvc = "Invalid CVC."; }; }, reset: function(){ this.cardErrors = {}; this.cardNumber = null; this.cardExpiry = null; this.cardCvc = null; this.cardPostal = null; this.$refs.cardNumInput.focus(); }, prefill: function(ccNum){ this.cardNumber = ccNum; this.$cardFormat.setCardType({ currentTarget : this.$refs.cardNumInput, value: ccNum }); }, getBrandClass: function (brand) { let icon = ''; brand = brand || 'unknown'; let cardBrandToClass = { 'visa': 'fab fa-cc-visa', 'mastercard': 'fab fa-cc-mastercard', 'amex': 'fab fa-cc-amex', 'discover': 'fab fa-cc-discover', 'diners': 'fab fa-cc-diners-club', 'jcb': 'fab fa-cc-jcb', 'unknown': 'fa fa-credit-card', }; if (cardBrandToClass[brand]) { icon = cardBrandToClass[brand]; }; return icon; } }, watch: { // handle auto-focus to next field // Note: since CVC can be 3 OR 4 digits we don't watch it cardNumber: function(val){ if(this.$cardFormat.validateCardNumber(val)){ this.$refs.cardExpInput.focus(); } }, cardExpiry: function (val) { if (this.$cardFormat.validateCardExpiry(val)) { this.$refs.cardCvcInput.focus(); } } }, onMounted(){ this.$refs.cardNumInput.focus(); } }; const app = createApp(Example); app.use(VueCreditCardValidation); app.mount('#app'); </script> Here is html <!DOCTYPE html> <html> <head> <title>Card validation</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <!-- Libraries only required for demo. --> <link rel="stylesheet" href="demo.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://unpkg.com/vue@next"></script> </head> <body> <form > <div class="row pt-4"> <div class="col-sm-12 col-md-6 col-lg-4"> <div class="form-group"> <label>Card Number:</label> <div class="input-group mb-0"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i :class="cardBrandClass"></i></span> </div> <input ref="cardNumInput" :data-error="(cardErrors.cardNumber)?true:false" v-model="cardNumber" type="tel" class="form-control" placeholder="#### #### #### ####" v-cardformat:formatCardNumber> </div> <div v-if="cardErrors.cardNumber" class="error"> <small>{{ cardErrors.cardNumber }}</small> </div> </div> </div> </div> <div class="row pt-2"> <div class="col-4 col-lg-2"> <div class="form-group"> <label>Card Expiration:</label> <input ref="cardExpInput" id="card-exp" :data-error="(cardErrors.cardExpiry)?true:false" v-model="cardExpiry" maxlength="10" class="form-control" v-cardformat:formatCardExpiry> <div v-if="cardErrors.cardExpiry" class="error"> <small>{{ cardErrors.cardExpiry }}</small> </div> </div> </div> <div class="col-4 col-lg-2"> <div class="form-group"> <label>Card CVC:</label> <input ref="cardCvcInput" :data-error="(cardErrors.cardCvc)?true:false" v-model="cardCvc" class="form-control" v-cardformat:formatCardCVC> <div v-if="cardErrors.cardCvc" class="error"> <small>{{ cardErrors.cardCvc }}</small> </div> </div> </div> <div class="col-12 col-sm-4"> <div class="form-group"> <label>Restrict Numeric:</label> <input placeholder="Only numbers can be entered here..." v-model="cardPostal" class="form-control" v-cardformat:restrictNumeric> </div> </div> </div> <div class="row"> <div class="col-12 pt-2"> <button type="button" class="btn btn-primary" @click="validate">Validate Card Details</button> <button type="button" class="btn btn-light" @click="reset">Reset</button> </div> </div> </form> </body> </html>
验证确认发送到success.php页面后我需要帮助。 谢谢。
1 个解决方案
解决方案1
0 2022-07-11 10:01:40
如果您正在使用 php/html 文件而不是单页应用程序，则可以简单地使用一些基本的 javascript 重定向用户。
在您的方法中，当您需要在成功验证卡后重定向用户时，只需键入：
window.location.replace("http://my-url.com/my.page");
检查电子邮件输入验证后，如何使用我的按钮将用户重定向到另一个HTML页面？
[英]How do I redirect the user to another HTML page using my button after checking for email input validation?
php成功响应后，如何将用户重定向到ajax中的另一个页面
[英]how can i redirect users to another page in ajax after success response from php
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.