使用Javascript验证同一表单中的两个不同输入字段

时间:2018-01-05 07:54:47

标签: javascript forms reactjs function validation

我有一个表格,我正在验证两个不同的字段,一个是税号输入字段,另一个是保险号字段。 我已经为这些字段的验证编写了两个相应的函数。如何为它们编写包装函数

税区验证功能

    validationofTaxIDField(e, formDataArray){
            console.log("WorkflowDisplay: validateTaxIDField: e", e, formDataArray);
            let alertError = false;
            if(formDataArray && formDataArray[0] && formDataArray[0]["1"] && formDataArray[0]["1"].taxInformation){
                const ti = formDataArray[0]["1"].taxInformation;
                console.log("ti", ti);
                if(ti.taxId){
                    if( !validateTIN(ti.taxId) ){ //taxID number
              alertError = true;
            }
                }
            }
            if(alertError){
          alert(customErrorMessages.invalidTaxId);
        }
        }

**Function for Insurance field Validation**
validationofSocialInsuranceField(e, formDataArray){
        console.log("WorkflowDisplay:validateSocialInsuranceField: e" , e, formDataArray);
        let alertError = false;
        if(formDataArray && formDataArray[0] && formDataArray[0]["2"] && formDataArray[0]["2"].insuranceDetails){
            const iid = formDataArray[0]["2"].insuranceDetails;
            console.log("WorkflowDisplay:validateSocialInsuranceField:iid", iid);
            if(iid.insuranceId){
                if( !validateSINo(iid.insuranceId) ){ //taxID number
          alertError = true;
        }
            }
        }
        if(alertError){
      alert(customErrorMessages.invalidInsuranceId);
    }
    }

现在,当我尝试验证时,即使我只是想验证保险字段,它总是向我提示税收领域的警报。有人可以帮助我在javascript中为它们编写包装函数。我可以从哪里收集错误消息。如果您需要更多说明,请发表评论。现在我只需将它们包装在一个函数中,如果它们存在,它将返回相应的错误消息。

1 个答案:

答案 0 :(得分:1)

就像你写了两个函数validateTIN and validateSINo,这两个函数都返回boolean。
同样地,使你的当前函数,即validationofTaxIDFieldvalidationofSocialInsuranceField返回布尔值,传递时为true,失败时为false。

并使用这两个后面的函数,因为它们返回布尔值,您可以对它们进行AND并获得所需的验证!



validationofTaxIDField(e, formDataArray) {
    console.log("WorkflowDisplay: validateTaxIDField: e", e, formDataArray);
    let alertError = false;
    if (formDataArray && formDataArray[0] && formDataArray[0]["1"] && formDataArray[0]["1"].taxInformation) {
      const ti = formDataArray[0]["1"].taxInformation;
      console.log("ti", ti);
      if (ti.taxId && !validateTIN(ti.taxId)) {
        alertError = true;
      }
    }
    return alertError;
  }
  validationofSocialInsuranceField(e, formDataArray) {
    console.log("WorkflowDisplay:validateSocialInsuranceField: e", e, formDataArray);
    let alertError = false;
    if (formDataArray && formDataArray[0] && formDataArray[0]["2"] && formDataArray[0]["2"].insuranceDetails) {
      const iid = formDataArray[0]["2"].insuranceDetails;
      console.log("WorkflowDisplay:validateSocialInsuranceField:iid", iid);
      if (iid.insuranceId && !validateSINo(iid.insuranceId)) {
        alertError = true;
      }
    }
    return alertError;
  }

wrapper(e, formDataArray) {
  if (this.validationofTaxIDField(e, formDataArray) && this.validateSocialInsuranceField(e, formDataArray)) {
    //do some forward stuff
  } else {
    //show validation error on screen
  }
}