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

如果在启动if语句之前声明一个整数i = 0，那么在每个if条件中，检查它是否为true然后在结束时检查i ++是否i == 5然后返回true（如果条件则成功5）否则返回假

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 2

一种方法是将有效性存储在变量中并最终返回：

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 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个验证，我们可以为此设置计数，如果 count等于5 ，则返回true，否则返回false。< / p>

validateForm函数

3 个答案: