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

下面是包含所有字段属性的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>
    });

},

renderBillNumber:函数（）{
常量数据=票据编号；
返回data.map（组=>{
返回
{group.caseIndex}
});
},

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

---

有谁能帮我在reactjs中做这件事吗？

为了做到这一点，您必须跟踪每个输入的状态。如果这里的想法是在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
                }
            });
        }
    }
});

validateText（evt）{
//获取此输入框的当前用户输入
const userInput=evt.target.value；
//获取当前错误状态
const errors=this.state.errors | |{}；
//循环浏览JSON以获取所需的数据
账单号。forEach（账单=>{
//如果这是正确的账单，那么获取我们需要的验证数据。
if（bill.caseIndex==evt.target.name）{
const minLength=bill.minLength；
const maxLength=bill.maxLength；
const re=bill.idxreglexp；
如果（userInput.length>=minLength&&
userInput.length{
if（this.state.errors[caseIndex]）{
返回(
错误
);
} 
返回(
{group.caseIndex}
)
});

}

---

这样，当用户输入任何内容时，将调用validateText。如果状态发生更改，您的账单将以适当的视觉效果重新提交。

您需要添加一个

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
}

renderBillNumber:函数（）{
常量数据=票据编号；
返回data.map（组=>
{group.caseIndex}
this.handleChange（e，群）}
类型={group.htmlControlType}
className={group.cssClassName}
/>
});
},
handleChange（事件、组）{
常量值=event.target.value；
if（value.length

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
}