Question

我面临的一个问题是，使用yup和formik在信用卡验证次数之间自动分配空格（如1236 5478 4563 4563），并在日期格式验证之间自动提供斜线（例如MM / YY）。这是formik必需的link。

Answer 1

我还没有使用过Formik，但是我认为您可以定义表单值的呈现方式。

import React, {Component} from 'react';
import { Formik } from 'formik';


class Card extends Component {
    state = {
        cardNumber: '',
        expiryDate: ''
    }


    addGaps(str, gapNo) {
        let newStr = " ";
        let len = str.length;
        for (let i = 0; i<len; i++) {
            newStr = newStr + str[i];
            while(newStr.length % (gapNo+1) === 0) {
                newStr = newStr + " ";
            } 
        }
        return newStr.trim(" ");
    }

    addSlash(str) {
        let newStr = "";
        let len = str.length;
        for (let i = 0; i<len; i++) {
            newStr = newStr + str[i];
            while(newStr.length % 2 === 0) {
                newStr = newStr + "/";
            } 
        }
        return newStr.substr(0, newStr.length-1);
    }

    render() {
    return (
        <div>
            <h1>Card</h1>
            <Formik
                initialValues={{ cardNumber: this.state.cardNumber, expiryDate: this.state.expiryDate }}
                onSubmit={//Submit your state not formatted values}
                render={() => (
                    <form onSubmit={this.handleSubmit //submit the values in this.state}>
                        <input
                            type="text"
                            onChange={this.handleChange //set card Number in this.state}
                            onBlur={this.handleBlur}
                            value={this.addGaps(this.state.cardNumber, 4)}
                            name="cardNumber"
                        />
                       <input
                           type="text"
                           onChange={this.handleChange}
                           onBlur={this.handleBlur}
                           value={this.addSlash(this.state.expiryDate)}
                           name="expiryDate"
                       />
                      {this.errors.name && <div id="feedback">{this.errors.name}</div>}
                      <button type="submit">Submit</button>
                  </form>
              )}
          />
      </div>
    );
    }
}

如何在信用卡验证中给定自动空格，使用yup和formik在日期格式验证中斜杠

1 个答案: