repassword is required

<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错误提示,这是为什么

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值