Javascript 在not working-ReactJS中对表单中自动填充的字段进行验证

我有一个为所有字段设置了验证的表单。对于验证，我检查每个输入值是否为

所需

，是否具有所需的

最大长度

和

最小长度

。完成后，我做最后一次检查，看看整个表格是否有效

上面的验证适用于用户实际输入到输入字段中的字段（我在下面的教程中说过这样做的）。但是，我修改了

国家

输入字段和

电子邮件

输入字段，以便预先填写

Country

包含一个默认字符串

England，UK

，电子邮件字段预先填充了用户从该州注册时填写的电子邮件

this.props.email

。现在，如果我在预填充数据旁边的这两个字段中键入内容，我的表单将返回为有效。经过数小时的调试，我不明白为什么

见下面的代码：

state = {
    orderForm: {
      name: {
        elementType: "input",
        elementConfig: {
          type: "text",
          placeholder: "Your Name"
        },
        value: "",
        validation: {
          required: true 
        },
        valid: false,
        touched: false
      },
      postCode: {
        elementType: "input",
        elementConfig: {
          type: "text",
          placeholder: "PostCode"
        },
        value: "",
        validation: {
          required: true,
          minLength: 5,
          maxLength: 8
        },
        valid: false,
        touched: false
      },
      country: {
        elementType: "input",
        elementConfig: {
          type: "text",
          placeholder: "Country"
        },
        value: "England, UK",
        validation: {
          required: true
        },
        valid: false,
        touched: false
      },
      email: {
        elementType: "input",
        elementConfig: {
          type: "email",
          placeholder: "Your E-Mail"
        },
        value: this.props.email,
        validation: {
          required: true
        },
        valid: false
    },
    formIsValid: false
  };

---

我假设，由于您最初在

state.orderForm.country

中将

国家设置为false，除非进行更改，否则将保持false

country: {
        elementType: "input",
        elementConfig: {
          type: "text",
          placeholder: "Country"
        },
        value: "England, UK",
        validation: {
          required: true
        },
        valid: false,
        touched: false
      }

因为国家已经有了“英国，英国”的占位符，你认为这是一个有效的提交，然后改变为真的，如下所示。如果用户输入无效数据，则您的
检查有效性
功能应涵盖您

country: {
            elementType: "input",
            elementConfig: {
              type: "text",
              placeholder: "Country"
            },
            value: "England, UK",
            validation: {
              required: true
            },
            valid: true,
            touched: false
          }

此外，您可能还可以将
checkValidity
函数缩短为大致如下所示：

export const checkValidity = (value, validation) => {
  if (
    value.trim() !== ""
    && value.length >= validation.minLength
    && value.length <= validation.maxLength
  ) {
    return true
  }
  return false
 }

export const checkValidity=（值，验证）=>{
如果(
value.trim（）！=“”
&&value.length>=validation.minLength
&&value.length是的，可以！！我也会更新我的函数。对于电子邮件，我需要做同样的事情。但是输入不会总是预先填充的，所以这是正确的吗？：
email:{elementType:“input”，elementConfig:{type:“email”，占位符：“您的电子邮件”}，值：this.props.email，验证：{required:true}，valid:this.props.email？true:false，toucted:false}，
是的，您还需要为
值：this.props.email
设置默认的
或
语句。请参见下面的：
电子邮件：{elementType:“input”，elementConfig:{type:“email”，占位符：“Your-Mail”}，值：this.props.email | |“”，验证：true，valid:{this.props.email？true:false}
country: {
        elementType: "input",
        elementConfig: {
          type: "text",
          placeholder: "Country"
        },
        value: "England, UK",
        validation: {
          required: true
        },
        valid: false,
        touched: false
      }

country: {
            elementType: "input",
            elementConfig: {
              type: "text",
              placeholder: "Country"
            },
            value: "England, UK",
            validation: {
              required: true
            },
            valid: true,
            touched: false
          }

export const checkValidity = (value, validation) => {
  if (
    value.trim() !== ""
    && value.length >= validation.minLength
    && value.length <= validation.maxLength
  ) {
    return true
  }
  return false
 }