Question

我在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中如何做到这一点吗？

Answer 1

为了做到这一点，您必须跟踪每个输入的状态。如果这里的想法是你的JSON中有大量的账单号，那么只跟踪你所在州有错误的账号是有意义的。

您可以先创建一个验证函数，如下所示：

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函数，以便在用户输入文本时调用您的函数。此外，您可以添加＆＃34;名称＆＃34;属性引用您的输入，或类似地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。如果状态发生变化，您的账单将以适当的视觉效果重新呈现。

Answer 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
}

使用json数据在reactjs中进行动态表单验证

2 个答案: