reactjs中使用json数据的动态表单验证答案

【问题标题】：Dynamic form validation in reactjs using json datareactjs中使用json数据的动态表单验证
【发布时间】：2017-07-21 22:41:04
【问题描述】：

我有下面的 json，其中包含所有字段属性

const BILL_NUMBER = [
{
    "caseIndex": "Bill Number",
    "minLength":"3",
    "maxLength": "16",
    "htmlControlType": "text",
    "errorMessage": "Alphanumeric Only",
    "idxReglrExp":"^[a-zA-Z0-9_\\s]*$",
    "cssClassName":"form-control"
}
];

下面是渲染 json 数据的函数，并且该字段正在页面中显示

renderBillNumber: function () {

    const data = BILL_NUMBER;
    return data.map(group => {
        return <div>
                <label for="billnumber">{group.caseIndex}</label>
                                    <input type={group.htmlControlType} className={group.cssClassName} id="billnumber" placeholder=""/>
                                    </div>
    });

},

我想使用 json 中的属性（如 minlength、maxlength）验证此字段，并根据正则表达式显示错误消息。

谁能帮助我如何在 reactjs 中做到这一点？

【问题讨论】：

标签： json validation reactjs dynamic

【解决方案1】：

为此，您必须跟踪每个输入的状态。如果这里的想法是您的 JSON 中将有 X 数量的账单号码，那么只跟踪您的状态中有错误的账单号码可能是有意义的。

您可能首先像这样创建一个验证函数：

validateText(evt){
// Get the current user input for this input box
const userInput = evt.target.value;

// Grab the current errors state
const errors = this.state.errors || {};

// Cycle through your JSON to get the data you need
BILL_NUMBER.forEach(bill => {

    // If this is the right bill, then get the validation data we need.
    if (bill.caseIndex === evt.target.name){
        const minLength = bill.minLength;
        const maxLength = bill.maxLength;
        const re = bill.idxReglrExp;
        if (userInput.length >= minLength &&
            userInput.length <= maxLength &&
            userInput.match(re)){
                //We're valid - cycle through state & remove error if it's there.
        } else {
            // Add this caseIndex to your state:
            this.setState({
                errors: {
                    ...errors,
                    bill.caseIndex: true
                }
            });
        }
    }
});

然后您可以编辑您的 renderBillNumber 函数，以便在用户输入文本时调用您的函数。此外，您可以添加一个引用您的输入的“名称”属性，或者类似地向它添加 assign a ref。

renderBillNumber: function () {

const data = BILL_NUMBER;
return data.map(group => {
    if (this.state.errors[caseIndex]){
        return (
            <div>error</div>
        );
    } 
    return (
        <div>
            <label for="billnumber">{group.caseIndex}</label>
            <input name={group.caseIndex} onInput={this.validateText} type={group.htmlControlType} className={group.cssClassName} id="billnumber" placeholder=""/>
        </div>
    )
});

}

这样，当用户输入任何内容时，将调用 validateText。如果状态发生变化，您的账单将使用适当的视觉效果重新呈现。

【讨论】：

【解决方案2】：

您需要添加一个 onChange 属性来为您进行检查：

renderBillNumber: function () {
  const data = BILL_NUMBER;
  return data.map(group => 
    <div>
      <label for="billnumber">{group.caseIndex}</label>
      <input 
        onChange={(e) => this.handleChange(e, group)}
        type={group.htmlControlType}
        className={group.cssClassName} 
      />
    </div>
  });
},
handleChange(event, group) {
  const value = event.target.value;
  if (value.length < group.minLength) {
    // do what you want to do if value is too small
  }
  // all you want to check
}

【讨论】：