<el-row class = "login-page">
<el-col :span="14" class="bg"></el-col>
<el-col :span="5" :offset="2" class="form">
<!-- 注册相关表单 v-if="isRegister":如果为true就是注册表单,否则就是登陆表单 -->
<el-form :model="formModel"
:rules="rules"
ref="form" size="larger" autocomplete="off" v-if="isRegister">
<el-form-item>
<h1>注册</h1>
</el-form-item>
<!-- prefix-icon="User" :配置前面的图标 -->
<el-form-item prop="username">
<el-input v-model="formModel.username"
:prefix-icon="User"
placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="formModel.password"
:prefix-icon="Lock" type="password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item prop = "repassword">
<el-input v-model="formModel.repassword" :prefix-icon="Lock" type="password" placeholder="请再次输入密码"></el-input>
</el-form-item>
<el-button @click="registate" class="button" type="primary" auto-insert-space>注册</el-button>
<el-form-item>
<el-link type="info" :underline="false" @click="isRegister = false">
返回->
</el-link>
</el-form-item>
</el-form>
<!-- 登陆表单 -->
<el-form :model="LoginformModel"
:rules="Loginrules"
ref="form" size="large" autocomplete="off" v-else>
<el-form-item>
<h1>登录</h1>
</el-form-item>
<el-form-item prop="username">
<el-input v-model="LoginformModel.username" :prefix-icon="User" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="LoginformModel.password" name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码"></el-input>
</el-form-item>
<!-- 记住我以及忘记密码标签 -->
<el-form-item class="flex">
<div class="flex">
<el-checkbox>记住我</el-checkbox>
<el-link type="primary" :underline="false">忘记密码?</el-link>
</div>
</el-form-item>
<!-- 登陆标签 -->
<el-form-item>
<el-button @click="login" class="button" type="primary" zuto-insert-space>登录</el-button>
</el-form-item>
<el-form-item>
<el-link type="info" :underline="false" @click="isRegister = true">
注册->
</el-link>
</el-form-item>
</el-form>
这是样式表,分为登录以及注册两个页面
// 整个的用于提交的form数据对象
const formModel = ref({
username: '',
password: '',
repassword: ''
})
const LoginformModel = ref({
username: '',
password: ''
})
// 整个表单的校验规则
const rules = {
username:
// required:非空校验 trigger:出发校验的时机 blur失焦 change改变
// 长度校验
// 正则校验
// 自定义校验
// rule:当前校验规则相关的信息 value:当前校验元素表单值
// callback:,直接callback,校验成功 callback(new Erroe(错误信息))校验失败 无论校验成功与否,都需要callback
[{required :true,message: '请输入用户名',trigger:'blur'},
{min: 1, max: 10,message: '用户名必须是5-10位',trigger:'blur'}
],
password:[
{required: true,message:'请输入密码',trigger:'blur'},
{pattern: /^.{6,15}$/,message: '密码必须是6-15位非空字符', trigger:'blur'}
],
repassword:[
{required: true,message:'请再次输入密码',trigger:'blur'},
// {pattern: /^.{6,15}$/,message: '密码必须是6-15位非空字符', trigger:'blur'},
{validator:(rule,value,callback)=>{
// 判断当前value和当前form收集的password是否一致
if(value!==formModel.value.password){
callback(new Error('两次输入密码不一致'))
}
else{
callback()//就算校验成功也要callback
}
},trigger:'blur'}
]
// password: [],
}
// 整个表单的校验规则
const Loginrules = {
username:
[{required :true,message: '请输入用户名',trigger:'blur'},
{min: 1, max: 10,message: '用户名必须是5-10位',trigger:'blur'}
],
password:[
{required: true,message:'请输入密码',trigger:'blur'},
{pattern: /^.{6,15}$/,message: '密码必须是6-15位非空字符', trigger:'blur'}
]
}
注册比登录多一个repassword输入框,需要验证,通过v-model="formModel.repassword"绑定了不为空以及其他验证规则
但是登录没有绑定,但是页面输入出现repassword is required错误提示,这是为什么