做網(wǎng)站平臺(tái)成本石家莊今天最新新聞?lì)^條
vue3前端開發(fā)-小兔鮮項(xiàng)目-登錄組件的開發(fā)表單驗(yàn)證!現(xiàn)在開始寫登錄頁(yè)面的內(nèi)容。首先這一次完成基礎(chǔ)的首頁(yè)按鈕點(diǎn)擊跳轉(zhuǎn),以及初始化一些簡(jiǎn)單的表單的輸入驗(yàn)證。后期還會(huì)繼續(xù)完善內(nèi)容。
1:首先還是準(zhǔn)備好login頁(yè)面的組件代碼內(nèi)容。
<script setup>
import { ref } from 'vue'
// 表單數(shù)據(jù)對(duì)象
const userInfo = ref({account: '1341234',password: '123456',agree: true
})
// 規(guī)則數(shù)據(jù)對(duì)象
const rules = {account: [{ required: true, message: '用戶名不能為空',trigger:'blur' }],password: [{ required: true, message: '密碼不能為空' ,trigger:'blur'},{ min: 6, max: 24, message: '密碼長(zhǎng)度要求6-14個(gè)字符' ,trigger:'blur'}],agree: [{validator: (rule, val, callback) => {return val ? callback() : new Error('請(qǐng)先同意協(xié)議')}}]
}
</script><template><div><header class="login-header"><div class="container m-top-20"><h1 class="logo"><RouterLink to="/">小兔鮮</RouterLink></h1><RouterLink class="entry" to="/">進(jìn)入網(wǎng)站首頁(yè)<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" >我已同意隱私條款和服務(wù)條款</el-checkbox></el-form-item><el-button size="large" class="subBtn">點(diǎn)擊登錄</el-button></el-form></div></div></div></section><footer class="login-footer"><div class="container"><p><a href="javascript:;">關(guān)于我們</a><a href="javascript:;">幫助中心</a><a href="javascript:;">售后服務(wù)</a><a href="javascript:;">配送與驗(yàn)收</a><a href="javascript:;">商務(wù)合作</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:開始完善一下,頁(yè)面使用到的內(nèi)容,一個(gè)是用戶信息userInfo。一個(gè)是表單驗(yàn)證對(duì)象rules。
import { ref } from 'vue'
// 表單數(shù)據(jù)對(duì)象
const userInfo = ref({account: '1341234',password: '123456',agree: true
})
// 規(guī)則數(shù)據(jù)對(duì)象
const rules = {account: [{ required: true, message: '用戶名不能為空' }],password: [{ required: true, message: '密碼不能為空' },{ min: 6, max: 24, message: '密碼長(zhǎng)度要求6-14個(gè)字符' }],agree: [{validator: (rule, val, callback) => {return val ? callback() : new Error('請(qǐng)先同意協(xié)議')}}]
}
3:測(cè)試一下情況如何。
如圖所示,輸入錯(cuò)誤的時(shí)候,表單驗(yàn)證成功激發(fā)了效果。
輸入正確的時(shí)候,表達(dá)驗(yàn)證沒有報(bào)錯(cuò)了,說明表單驗(yàn)證代碼是起到了效果了。