表单效验小技巧-快捷效验表单以及Object.key() ,every()方法扩展

使用Es6的Object.key() 搭配 数组的every()方法快速效验表单

//此对象使我们的表单提交数据
formData:{
  name:'',
  birthdate:'',
  workExp:'',
  phone:'',
  headImg:'',
  postName:'',
  teachFeature:'',
  teachOutcome:'',
  workRecord:'',
  subjectId:'',
  userName:'',
  userPass:'',
},

//在我们的提交方法中对此表单快速效验
doSave(){
    // 验证必填项信息
    const { formData} = this
    const Required = Object.keys(formData).every(key=> formData[key])
    //Object.keys(formData)方法可以枚举formData对象的所有key值到一个数组中
    //every方法内验证formData[key]每一项是否为空值 所有的key都不为空则返回true 否则返回false
    if(!Required){
      this.toast('请完善老师信息')
      return
      //验证不通过 提示完善信息 并且return 停止
    }
}

一、Object.key()方法

1. 语法 Object.keys(obj) 参数为 要返回其枚举自身属性的对象
2. 返回值：一个表示给定对象的所有可枚举属性的字符串数组

处理一个对象

let obj = {name:"张三",age:22,address:"郑州",say(){}}

Object.keys(obj) // ["name", "age", "address","say"]

处理一个数组 返回索引数组

let arr = [1,2,3,4,5,6]

Object.keys(arr) // ["0", "1", "2", "3", "4", "5"]

处理字符串 返回索引数组

let str = "abcdefg"

Object.keys(str) // ["0", "1", "2", "3", "4", "5", "6"]

二、every()方法

1. 给定条件，只有当数组中所有值都满足该条件，才返回true，当有值不符合该条件时，返回false，之后的值不再进行检
2. 接收三个参数(currentValue,index,arr) 其实currentValue必填 为当前元素 ,index(下标)和arr(数组)选填

let stuList = [
    {
      name: '小明',
      age: 20
    },
    {
      name: '小红',
      age: 21
    },
    {
      name: '小绿',
      age: 22
    },
    {
      name: '小黑',
      age: 23
    }
  ];
 
const everyReject = arr.every((value, index, arr) => {
    return value.age > 21;//判断条件
});

console.log(everyReject)//false

const everyResult = arr.every((value, index, arr) => {
    return value.age >=20;//判断条件
});

console.log(everyResult)//true