<a-form-model ref="Form" :model="form" :rules="rules">
	<a-form-model-item prop="mobile">
		<a-input v-model="form.mobile" size="large" placeholder="請輸入手機(jī)號" :maxLength="50" />
	</a-form-model-item>

	<a-form-model-item prop="verificationCode" class="other">
		<a-input v-model="form.verificationCode" size="large" placeholder="請輸入驗(yàn)證碼" :maxLength="6" />
		<a-button size="large" :disabled="state.smsSendBtn || !form.mobile" @click="getCode">
			{{ state.smsSendBtn ? '已發(fā)送(' + state.time + ')' : '獲取驗(yàn)證碼' }}
		</a-button>
	</a-form-model-item>

	<a-form-model-item prop="password">
		<a-input-password v-model="form.password" size="large" placeholder="請輸入密碼" :maxLength="50" />
	</a-form-model-item>

	<a-form-model-item prop="confirmPassword">
		<a-input-password v-model="form.confirmPassword" size="large" placeholder="請確認(rèn)密碼" :maxLength="50" />
	</a-form-model-item>
</a-form-model>

rules: {
	mobile: [{ required: true, validator: this.mobileCheck.bind(this), trigger: ['blur'] }],
	verificationCode: [{ required: true, message: '請輸驗(yàn)證碼', trigger: ['blur'] }],
	password: [{ required: true, validator: this.passwordCheck.bind(this), trigger: ['blur'] }],
	confirmPassword: [{ required: true, validator: this.confirmPasswordCheck.bind(this), trigger: ['blur'] }]
}

// 手機(jī)號校驗(yàn)
mobileCheck(rule, value, callback) {
  const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
  if (!value) {
    callback('請輸入手機(jī)號碼')
    return
  }
  if (!reg.test(value.replace(/(^\s*)|(\s*$)/g, ""))) {
    callback('請輸入正確手機(jī)號碼')
    return
  }
  callback()
}

// 密碼校驗(yàn)
passwordCheck(rule, value, callback) {
  const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/
  if (!value) {
    callback('請輸入密碼')
    return
  }

  if (this.form.confirmPassword) {
    this.$refs.Form.validateField(['confirmPassword'])
  }

  if (!reg.test(value)) {
    callback('密碼必須為8-20位，由數(shù)字和大小寫字母組成')
    return
  }
  callback()
}

// 再次輸入密碼校驗(yàn)
confirmPasswordCheck(rule, value, callback) {
  let { password } = this.form
  if (!value) {
    callback('請?jiān)俅屋斎朊艽a')
  }
  if (password) {
    if (password === value) {
      callback()
    } else {
      callback('兩次輸入密碼不一致，請重新輸入')
    }
  } else {
    callback('請先輸入密碼')
  }
},

this.$refs.Form.validate(valid => {
  if (!valid) {
  	// 校驗(yàn)不通過
  	return
  }
  
  // 校驗(yàn)通過后邏輯
  ....
})

this.$refs.Form.validateField(['mobile'], valid => {
  if (valid) {
  	// 校驗(yàn)不通過
  	return
  }
  
  // 校驗(yàn)通過后邏輯
  ....
})

// 存放每次校驗(yàn)結(jié)果valid
let validateFieldList = []
// 校驗(yàn)方法
this.$refs.Form.validateField(['mobile', 'captcha'], valid => {
  if (!valid) {
    // 校驗(yàn)通過后，將valid追加入數(shù)組
    validateFieldList.push(valid)
  }

  // 校驗(yàn)數(shù)組長度與表單項(xiàng)相等，并且數(shù)組的每一項(xiàng)值都為空（‘'）
  if (validateFieldList.length == 2 && validateFieldList.every(item => item === '')) {
    //校驗(yàn)通過的業(yè)務(wù)邏輯
  }

  // 校驗(yàn)不通過邏輯
  return
})

// 需要校驗(yàn)的表單項(xiàng)
let fileids = ['mobile', 'captcha']
// Promise.all 里面參數(shù)為一個數(shù)組，數(shù)組的每一項(xiàng)是一個返回promise 的函數(shù)調(diào)用
Promise.all(fileids.map(item => new Promise((resolve, reject) => {
  // 將每次校驗(yàn)結(jié)果返回
  this.$refs.Form.validateField(item, err => resolve(err))
}))).then(res => {
  // then 的第一個參數(shù)是所有promise都成功的調(diào)用，返回結(jié)果是一個數(shù)組，數(shù)組的每一項(xiàng)為函數(shù)promise 的返回結(jié)果
  if (res.filter(item => item).length) return

  // 校驗(yàn)成功后邏輯

})

    Step1() {
      this.$refs.dataForm.validateField(this.field, (valid) => {
        if (!valid) {
           // 校驗(yàn)通過進(jìn)行的操作
        }
      })
    },    
 
    // 多個字段需要校驗(yàn)時候 上面寫法一個字段校驗(yàn)通過即可進(jìn)入if,并沒有校驗(yàn)全部字段，改下面寫法：
 
    Step1() {
      const validateList = []   // 定義空數(shù)組
      this.$refs.dataForm.validateField(this.field, (valid) => {
        // this.field  為要校驗(yàn)的部分rules數(shù)組
        validateList.push(valid)
      })
      if (validateList.every((item) => item === '')) {
        // 判斷全部為空時 進(jìn)行的操作 
      }
    },