uni.app小程序失焦聚焦，表单验证

	<input type="text"  placeholder="请输入手机号/邮箱/账号" 
v-model="username" @focus="focus('username')" @blur="blur('username')"
    :class="focusclass.username?'input-border-color':''" />

	<input type="text" placeholder="请输入密码" v-model="password"
 @focus="focus('password')" @blur="blur('password')"
	:class="focusclass.password?'input-border-color':''" />
			
<button  @click="submit"> 登录  </button>

先在表单里定义一个focusclass，如果username为true,那么显示下划线，先让focusclass里面的username和password为false，当鼠标点击input输入框时，下划线显示

	data() {
			return {
				username: '',
				password: '',
                focusclass:{
					username:false,
					password:false
				}
				
			}
		},
     methods: {
			focus(key){
				this.focusclass[key] = true
			},
			blur(key){
				this.focusclass[key] = false
			},
		}
	}

表单验证  

先定义一个rules规则

data() {
			return {
				username: '',
				password: '',
				rules: {
					username: [{
						rule: /^.{2,18}$/,
						message: '账号长度在 2 到 18 个字符',
					}],
					password: [{
						rule: /^.{2,10}$/,
						message: '密码长度在 2 到 10 个字符',
					}],
				},		
			}
		},

methods: {
			validate(key) {
				let s = true
				this.rules[key].forEach(v => {
					if (!v.rule.test(this[key])) {
						uni.showToast({
							title: v.message,
							icon: 'none'
						})
						s = false
						return false
					}
				})
				return s
			},
			submit() {
					if (!this.validate('username')) return;
               //当this.validate('username')为false才执行
					if (!this.validate('password')) return;
               //当this.validate('password')为false才执行     
				},
		}