阅读量:0
vue3前端开发-小兔鲜项目-登录组件的开发表单验证！现在开始写登录页面的内容。首先这一次完成基础的首页按钮点击跳转，以及初始化一些简单的表单的输入验证。后期还会继续完善内容。
1：首先还是准备好login页面的组件代码内容。
<script setup> import { ref } from 'vue' // 表单数据对象 const userInfo = ref({ account: '1341234', password: '123456', agree: true }) // 规则数据对象 const rules = { account: [ { required: true, message: '用户名不能为空',trigger:'blur' } ], password: [ { required: true, message: '密码不能为空' ,trigger:'blur'}, { min: 6, max: 24, message: '密码长度要求6-14个字符' ,trigger:'blur'} ], agree: [ { validator: (rule, val, callback) => { return val ? callback() : new Error('请先同意协议') } } ] } </script> <template> <div> <header class="login-header"> <div class="container m-top-20"> <h1 class="logo"> <RouterLink to="/">小兔鲜</RouterLink> </h1> <RouterLink class="entry" to="/"> 进入网站首页 <i class="iconfont icon-angle-right"></i> <i class="iconfont icon-angle-right"></i> </RouterLink> </div> </header> <section class="login-section"> <div class="wrapper"> <nav> <a href="javascript:;">账户登录</a> </nav> <div class="account-box"> <div class="form"> <el-form label-position="right" label-width="60px" :model="userInfo" :rules="rules" status-icon> <el-form-item label="账户" prop="account"> <el-input v-model="userInfo.account"/> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="userInfo.password"/> </el-form-item> <el-form-item label-width="22px" prop="agree"> <el-checkbox v-model="userInfo.agree" size="large" > 我已同意隐私条款和服务条款 </el-checkbox> </el-form-item> <el-button size="large" class="subBtn">点击登录</el-button> </el-form> </div> </div> </div> </section> <footer class="login-footer"> <div class="container"> <p> <a href="javascript:;">关于我们</a> <a href="javascript:;">帮助中心</a> <a href="javascript:;">售后服务</a> <a href="javascript:;">配送与验收</a> <a href="javascript:;">商务合作</a> <a href="javascript:;">搜索推荐</a> <a href="javascript:;">友情链接</a> </p> <p>CopyRight © 小兔鲜儿</p> </div> </footer> </div> </template> <style scoped lang='scss'> .login-header { background: #fff; border-bottom: 1px solid #e4e4e4; .container { display: flex; align-items: flex-end; justify-content: space-between; } .logo { width: 200px; a { display: block; height: 132px; width: 100%; text-indent: -9999px; background: url("@/assets/images/logo.png") no-repeat center 18px / contain; } } .sub { flex: 1; font-size: 24px; font-weight: normal; margin-bottom: 38px; margin-left: 20px; color: #666; } .entry { width: 120px; margin-bottom: 38px; font-size: 16px; i { font-size: 14px; color: $xtxColor; letter-spacing: -5px; } } } .login-section { background: url('@/assets/images/login-bg.png') no-repeat center / cover; height: 488px; position: relative; .wrapper { width: 380px; background: #fff; position: absolute; left: 50%; top: 54px; transform: translate3d(100px, 0, 0); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); nav { font-size: 14px; height: 55px; margin-bottom: 20px; border-bottom: 1px solid #f5f5f5; display: flex; padding: 0 40px; text-align: right; align-items: center; a { flex: 1; line-height: 1; display: inline-block; font-size: 18px; position: relative; text-align: center; } } } } .login-footer { padding: 30px 0 50px; background: #fff; p { text-align: center; color: #999; padding-top: 20px; a { line-height: 1; padding: 0 10px; color: #999; display: inline-block; ~a { border-left: 1px solid #ccc; } } } } .account-box { .toggle { padding: 15px 40px; text-align: right; a { color: $xtxColor; i { font-size: 14px; } } } .form { padding: 0 20px 20px 20px; &-item { margin-bottom: 28px; .input { position: relative; height: 36px; >i { width: 34px; height: 34px; background: #cfcdcd; color: #fff; position: absolute; left: 1px; top: 1px; text-align: center; line-height: 34px; font-size: 18px; } input { padding-left: 44px; border: 1px solid #cfcdcd; height: 36px; line-height: 36px; width: 100%; &.error { border-color: $priceColor; } &.active, &:focus { border-color: $xtxColor; } } .code { position: absolute; right: 1px; top: 1px; text-align: center; line-height: 34px; font-size: 14px; background: #f5f5f5; color: #666; width: 90px; height: 34px; cursor: pointer; } } >.error { position: absolute; font-size: 12px; line-height: 28px; color: $priceColor; i { font-size: 14px; margin-right: 2px; } } } .agree { a { color: #069; } } .btn { display: block; width: 100%; height: 40px; color: #fff; text-align: center; line-height: 40px; background: $xtxColor; &.disabled { background: #cfcdcd; } } } .action { padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; .url { a { color: #999; margin-left: 10px; } } } } .subBtn { background: $xtxColor; width: 100%; color: #fff; } </style>2：开始完善一下，页面使用到的内容，一个是用户信息userInfo。一个是表单验证对象rules。
import { ref } from 'vue' // 表单数据对象 const userInfo = ref({ account: '1341234', password: '123456', agree: true }) // 规则数据对象 const rules = { account: [ { required: true, message: '用户名不能为空' } ], password: [ { required: true, message: '密码不能为空' }, { min: 6, max: 24, message: '密码长度要求6-14个字符' } ], agree: [ { validator: (rule, val, callback) => { return val ? callback() : new Error('请先同意协议') } } ] }3：测试一下情况如何。
如图所示，输入错误的时候，表单验证成功激发了效果。
输入正确的时候，表达验证没有报错了，说明表单验证代码是起到了效果了。
