1.当前页面
<el-form :model="ruleForm"
:rules="rules"
ref="ruleForm">
<el-form-item prop="account">
<el-input type="text"
v-model="ruleForm.account"
autocomplete="off"
placeholder="请输入用户名">
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password"
v-model="ruleForm.password"
placeholder="请输入密码"
autocomplete="off">
</el-input>
</el-form-item>
<el-form-item prop="mobile">
<el-input type="text"
v-model="ruleForm.mobile"
placeholder="请输入手机号"
autocomplete="off"></el-input>
</el-form-item>
<el-form-item prop="verifycode"
class="input_ver">
<el-input v-model="ruleForm.verifycode"
placeholder="请输入验证码"></el-input>
<v-button type="primary"
@click="getVerifycode">获取验证码</v-button>
</el-form-item>
<el-form-item>
<v-button class="loginBtn"
type="primary"
@click="goLogin('ruleForm')">登录</v-button>
</el-form-item>
</el-form>
2.script
import { mapMutations } from "vuex";
export default {
data () {
var isvalidPhone = (rule, value, callback) => {
const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
if (!value) {
return callback(new Error(this.$t('mobile')))
} else if (!reg.test(value)) {
return callback(new Error(this.$t('mobileCheck')))
} else {
callback()
}
}
return {
ruleForm: {
account: "",
password: "",
mobile: "",
verifycode: ""
},
rules: {
account: [
{ required: true, message: '请输入用户名', trigger: "blur" },
{ min: 6, max: 16, message: '用户名由6-16位的英文字母数字下划线组成', trigger: "blur" }
],
password: [
{ required: true, message: '请输入密码', trigger: "blur" },
{ min: 6, max: 16, message: '密码由6-16位的字母数字下划线组成', trigger: "blur" },
],
mobile: [
{ validator: isvalidPhone, trigger: 'blur' }
],
verifycode: [
{
required: true,
message: ''验证码错误,
trigger: "blur"
}
]
},
isLogin: false
};
},
created () { },
methods: {
...mapMutations(['setToken']),
goLogin (formName) {//点击登录
this.$refs[formName].validate(valid => {
fetchPost("/login", this.ruleForm).then(res => {
console.log(res)
if (res.code != 1) {
this.$message.error('登录失败')
}
this.loginSuccess(res.data)
this.setToken(res.data.Token)
this.$router.replace("/home")
});
} else {
this.$message('错误'))
return false;
}
});
},
loginSuccess (data) {
//登录成功后的处理...
},
getVerifycode () {
var mobile = this.ruleForm.mobile
if (!mobile) {
this.$refs.ruleForm.validateField('mobile')
} else {
this.getMsg(mobile)
}
},
getMsg (mobile) {
console.log(mobile) //通过手机号发送短信验证
}
}
};