validateForm功能

Question

以下函数使用JavaScript的every方法来检查所有字段的有效性的一种形式：

// Input: 

validatingFields: [{ 
    name: 'Name', 
    type: 'text', 
    validation: { 
    isRequired: true, 
    pattern: util.regex().email, 
    minLength: 2 
    maxLength: 4 
    } 
}] 

// Function: 

validateForm() { 
    this.isValid = this.validatingFields.every(field => { 
    const isRequired = field.validation.isRequired 
    const maxLength = field.validation.maxLength 
    const minLength = field.validation.minLength 
    const pattern = field.validation.pattern 
    const match = field.validation.match 
    if (match) { 
     const matchRegex = this.convertToRegex(match) 
     return matchRegex.test(field.value) 
    } 
    if (pattern) { 
     return pattern.test(field.value) 
    } 
    if (minLength) { 
     return field.value.length >= minLength 
    } 
    if (maxLength) return field.value.length <= maxLength 
    if (isRequired) return field.value 
    return true 
    }) 
}  

的问题是，每if语句中的函数返回。因此，例如，当存在minLength时，从不检查maxLength。

如何修改该函数以验证每个条件？

Answer 1

一种方法是有效性存储在一个变量，最后返回它：

validateForm() { 
    this.isValid = this.validatingFields.every(field => { 
     const isRequired = field.validation.isRequired 
     const maxLength = field.validation.maxLength 
     const minLength = field.validation.minLength 
     const pattern = field.validation.pattern 
     const match = field.validation.match 

     var tValid = true; 

     if (match) { 
      const matchRegex = this.convertToRegex(match) 
      tValid = matchRegex.test(field.value) 
     } 

     if (tValid && pattern){ 
      tValid = pattern.test(field.value) 
     } 

     if (tValid && minLength) { 
      tValid = field.value.length >= minLength 
     } 

     if (tValid && maxLength) tValid = field.value.length <= maxLength 
     if (tValid && isRequired) tValid = !!field.value 

     return tValid 
    }) 
}  

另一种方法是链中的参数：

validateForm() { 
    this.isValid = this.validatingFields.every(field => { 
     //.. 

     return 
      (
       (pattern ? pattern.test(field.value) : true) && 
       (minLength ? field.value.length >= minLength : true) && 
       (maxLength ? field.value.length <= maxLength : true) && 
       (isRequired ? !!field.value : true) 
      ) 
    }) 
}  

Answer 2

如何在启动if语句之前声明一个整数i = 0，然后在每个if语句中检查它是否为true，然后在最后检查i == 5然后返回true（如果条件成功则返回5）else返回false

validateForm() { 
this.isValid = this.validatingFields.every(field => { 
const isRequired = field.validation.isRequired 
const maxLength = field.validation.maxLength 
const minLength = field.validation.minLength 
const pattern = field.validation.pattern 
const match = field.validation.match 

int i=0; 
if (match) { 
    const matchRegex = this.convertToRegex(match) 
    if(matchRegex.test(field.value) == true) 
    i++; 
} 
if (pattern) { 
    if(pattern.test(field.value) ==true) 
    i++; 
} 
if (minLength) { 
    if(field.value.length >= minLength) 
    i++; 
} 
if (maxLength) 
    if(field.value.length <= maxLength) 
    i++; 

if (isRequired) r 
    if(field.value == true) 
    i++; 

if(i == 5) 
    return true; 
else 
    return false; 

}）}

Answer 3

另一种方法是我做你的代码更改：

validateForm() { 
this.isValid = this.validatingFields.every(field => { 
const isRequired = field.validation.isRequired 
const maxLength = field.validation.maxLength 
const minLength = field.validation.minLength 
const pattern = field.validation.pattern 
const match = field.validation.match 
int count =0; 
if (match) { 
    const matchRegex = this.convertToRegex(match) 
    count = matchRegex.test(field.value) ? count++ : count; 
} 
if (pattern) { 
    count = pattern.test(field.value) ? count++ : count; 
} 
if (minLength) { 
    count = (field.value.length >= minLength) ? count++ : count; 
} 
if (maxLength) count = (field.value.length <= maxLength) ? count++ : count; 
if (isRequired) count = (field.value) > count++ : count; 
return (count == 5) ? true : false; 
}) 
} 

当你的代码似乎有5次验证，我们可以把一个计数为此并在最后如果计数等于5我们返回true否则为false。