<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才执行
},
}