做网站自己买域名,无锡低价网站排名,一流的南昌网站建设,做电影售票网站的难点vue3前端开发-小兔鲜项目-登录组件的开发表单验证#xff01;现在开始写登录页面的内容。首先这一次完成基础的首页按钮点击跳转#xff0c;以及初始化一些简单的表单的输入验证。后期还会继续完善内容。 1#xff1a;首先还是准备好login页面的组件代码内容。
script …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(请先同意协议)}}]
}
/scripttemplatedivheader classlogin-headerdiv classcontainer m-top-20h1 classlogoRouterLink to/小兔鲜/RouterLink/h1RouterLink classentry to/进入网站首页i classiconfont icon-angle-right/ii classiconfont icon-angle-right/i/RouterLink/div/headersection classlogin-sectiondiv classwrappernava hrefjavascript:;账户登录/a/navdiv classaccount-boxdiv classformel-form label-positionright label-width60px:modeluserInfo :rulesrules status-iconel-form-item label账户 propaccountel-input v-modeluserInfo.account//el-form-itemel-form-item label密码 proppasswordel-input v-modeluserInfo.password//el-form-itemel-form-item label-width22px propagreeel-checkbox v-modeluserInfo.agree sizelarge 我已同意隐私条款和服务条款/el-checkbox/el-form-itemel-button sizelarge classsubBtn点击登录/el-button/el-form/div/div/div/sectionfooter classlogin-footerdiv classcontainerpa hrefjavascript:;关于我们/aa hrefjavascript:;帮助中心/aa hrefjavascript:;售后服务/aa hrefjavascript:;配送与验收/aa hrefjavascript:;商务合作/aa hrefjavascript:;搜索推荐/aa hrefjavascript:;友情链接/a/ppCopyRight copy; 小兔鲜儿/p/div/footer/div
/templatestyle scoped langscss
.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测试一下情况如何。 如图所示输入错误的时候表单验证成功激发了效果。 输入正确的时候表达验证没有报错了说明表单验证代码是起到了效果了。
