vue表单校验常用方法：vue修饰符，使用第三方插件表单校验组件，本文以以elementui为例，相比官网新增了一些进阶用法：关联元素校验，异步结果校验，动态数组校验。不建议手写监听校验

1.vue表单输入修饰符

• 前后去除空格

 <el-input type="text"    v-model.trim="search"               />

• 只允许输入数字

<el-input v-model.number="age" />

• 拓展：自定义表单修饰符，目前没发现类似实现，需要自己调研,个人觉得做出来会非常方便

2.elementui校验表单（基础）

• 官网例子非常全面：https://element.eleme.cn/#/zh-CN/component/form

3.elementui校验表单（进阶使用）

• 关联元素校验
  官网例子只有对指定元素校验，没有指出涉及多元素关联的校验如何进行，如数组中名称是否重复。

 data () {
    entity
 	// 核心：传入this指针，获取表单中其他值
    let _this = this
    /** 校验属性中map key格式，是否重复 */
    let validateSchoolNameExit = (rule, value, callback) => {
      const reg = /^[a-zA-Z|0-9|_|-\s]+$/
      let exitNum = 0
      _this.school.forEach(item => {
        if (item.name === value) {
          exitNum++
        }
      })
      if (exitNum > 1) {
        return callback(new Error("重复名称"))
      }
      return callback()
    }
    return {
    	//需要校验的对象
    	school:[{name:"实验中学"},{name:"附属一中"}],
    	// 校验规则指定
    	rules: {
	        validateSchoolNameExit: [
	          { validator: validateSchoolNameExit, trigger: 'change' }
        ],
    }
},

• 动态数组校验
  校验内容中存在数组是头疼的事情，尤其是动态增减的数组，不慌！看代码

// 表单页面 
			 <FormItem
	                :prop="`school[${index}].name`"
	                :rules="rules.validateSchoolNameExit"
	              >
                <input v-model="school[${index}].name" />
              </FormItem>
// js代码：
data () {
    entity
 	// 核心：传入this指针，获取表单中其他值
    let _this = this
    /** 校验属性中map key格式，是否重复 */
    let validateSchoolNameExit = (rule, value, callback) => {
      const reg = /^[a-zA-Z|0-9|_|-\s]+$/
      let exitNum = 0
      _this.school.forEach(item => {
        if (item.name === value) {
          exitNum++
        }
      })
      if (exitNum > 1) {
        return callback(new Error("重复名称"))
      }
      return callback()
    }
    return {
    	//需要校验的对象
    	school:[{name:"实验中学"},{name:"附属一中"}],
    	// 校验规则指定
    	rules: {
	        validateSchoolNameExit: [
	          { validator: validateSchoolNameExit, trigger: 'change' }
        ],
    }
},
              

• 异步请求校验

data () {
    entity
 	// 核心：传入this指针，获取表单中其他值
    let _this = this
    /** 校验属性中map key格式，是否重复 */
    let validateSchoolNameExit = async (rule, value, callback) => {
      let validateExit= await _this.validateExit()
      if (validateExit) {
        return callback(new Error("名称已存在"))
      }
      return callback()
    }
    return {
    	//需要校验的对象
    	school:[{name:"实验中学"},{name:"附属一中"}],
    	// 校验规则指定
    	rules: {
	        validateSchoolNameExit: [
	          { validator: validateSchoolNameExit, trigger: 'change' }
        ],
    }
},
methods:{
	async validateExit(){
	 const res = await post('/q/quota/entity/checkEntityTypeName'})
      if (res > 0 && res.code !== 200) {
        console.log('validateEntityTypeNameExit true')
        return true
      } else {
        console.log('validateEntityTypeNameExit false')
        return false
      }
	}
}

效果：