网站参考模板,电商静态网页模板,网站用什么语言好,wordpress修改鼠标创建项目 引入 element-ui 组件库 登录#xff1a;注册样式准备之后#xff0c;配置校验规则#xff08;4个条件#xff1a;一数据、二规则#xff09;
1. 校验相关 (1) 给当前表单绑上整个的数据对象#xff1a;el-form :modelruleForm 绑…创建项目 引入 element-ui 组件库 登录注册样式准备之后配置校验规则4个条件一数据、二规则
1. 校验相关 (1) 给当前表单绑上整个的数据对象el-form :modelruleForm 绑定的整个form的数据对象 { xxx, xxx, xxx } (el-form-item /el-form-item)
el-form:modelformModel
const formModel ref({username: ,password: ,repassword:
}) (2) 绑上对应的校验规则el-form :rulesrules 绑定的整个rules规则对象 { xxx, xxx, xxx }注意一一对应 (el-form-item /el-form-item)
el-form:modelformModel:rulesrules const rules {username: [{required: true,message: please,//blur:失焦触发change值改变的时候触发trigger: blur},{min: 5,max: 10,message: yhum,trigger: blur}],password: [{required: true,message: please,//blur:失焦触发change值改变的时候触发trigger: blur},{pattern: /^\S{6,15}$/,message: 6-15}]
} (3) 表单元素 v-modelruleForm.xxx 给表单元素绑定form的子属性用户输入的内容才会同步到表单里去。el-input/el-input el-inputv-modelformModel.repassword:prefix-iconLocktypepasswordplaceholder请输入再次密码/el-input (4) el-form-item prop配置生效的是rules里的哪个校验规则 (和rules中的字段要对应) (el-form-item /el-form-item) el-form-item propusernameel-inputv-modelformModel.username:prefix-iconUserplaceholder请输入用户名/el-input/el-form-item
2.
1整个表单的校验规则 1.非空校验 required:true message信息提示 trigger触发校验的时机 2.长度校验 min:xx,max:xx 3.正则校验pattern正则规则 \s 非空校验 4.自定义校验 自己写逻辑校验校验函数 validator:(rule,value,callback)
rule 当前校验规则相关的信息value 所校验的表单元素目前的表单值callback 两种校验方式{第一种callback() 代表校验成功。第二种callback(new Error(错误信息)) 代表校验失败。}无论成功还是失败都要回调
2自定义校验规则
目录
创建项目
引入 element-ui 组件库
登录注册样式准备之后配置校验规则4个条件 全部代码
script setup
import { User, Lock } from element-plus/icons-vue
import { ref } from vue
const isRegister ref(true)
//整个的用于提交的form数据对象
const formModel ref({username: ,password: ,repassword:
})
//整个表单的校验规则
//1.非空校验 required:true message信息提示 trigger触发校验的时机
//2.长度校验 min:xx,max:xx
//3.正则校验pattern正则规则
const rules {username: [{required: true,message: please,//blur:失焦触发change值改变的时候触发trigger: blur},{min: 5,max: 10,message: yhum,trigger: blur}],password: [{required: true,message: please,//blur:失焦触发change值改变的时候触发trigger: blur},{pattern: /^\S{6,15}$/,message: 6-15}],repassword: [{required: true,message: please,//blur:失焦触发change值改变的时候触发trigger: blur},{pattern: /^\S{6,15}$/,message: 6-15},{validator: (rule, value, callback) {if (value ! formModel.value.password) {callback(new Error(no))} else {callback() //校验成功也需要正常回调 callback}},trigger: blue}]
}
/scripttemplateel-row classlogin-pageel-col :span12 classbg/el-colel-col :span6 :offset3 classformel-form:modelformModel:rulesrefformsizelargeautocompleteoffv-ifisRegisterel-form-itemh1注册/h1/el-form-itemel-form-item propusernameel-inputv-modelformModel.username:prefix-iconUserplaceholder请输入用户名/el-input/el-form-itemel-form-item proppasswordel-inputv-modelformModel.password:prefix-iconLocktypepasswordplaceholder请输入密码/el-input/el-form-itemel-form-item proprepasswordel-inputv-modelformModel.repassword:prefix-iconLocktypepasswordplaceholder请输入再次密码/el-input/el-form-itemel-form-itemel-button classbutton typeprimary auto-insert-space注册/el-button/el-form-itemel-form-item classflexel-link typeinfo :underlinefalse clickisRegister false← 返回/el-link/el-form-item/el-formel-form refform sizelarge autocompleteoff v-elseel-form-itemh1登录/h1/el-form-itemel-form-item propusernameel-inputv-modelformModel.username:prefix-iconUserplaceholder请输入用户名/el-input/el-form-itemel-form-itemel-inputnamepassword:prefix-iconLocktypepasswordplaceholder请输入密码/el-input/el-form-itemel-form-item classflexdiv classflexel-checkbox记住我/el-checkboxel-link typeprimary :underlinefalse忘记密码/el-link/div/el-form-itemel-form-itemel-button classbutton typeprimary auto-insert-space登录/el-button/el-form-itemel-form-item classflexel-link typeinfo :underlinefalse clickisRegister true注册 →/el-link/el-form-item/el-form/el-col/el-row
/templatestyle langscss scoped
.login-page {height: 100vh;background-color: #fff;.bg {background:url(/assets/logo2.png) no-repeat 60% center / 240px auto,url(/assets/login_bg.jpg) no-repeat center / cover;border-radius: 0 20px 20px 0;}.form {display: flex;flex-direction: column;justify-content: center;user-select: none;.title {margin: 0 auto;}.button {width: 100%;}.flex {width: 100%;display: flex;justify-content: space-between;}}
}
/style注册功能
1.新建 api/user.js 封装
import request from /utils/request//注册接口
export const userRegisterService ({ username, password, repassword }) {//return 和 {} 可以省略//return request.post(/api/reg, { username, password, repassword })request.post(/api/reg, { username, password, repassword })
}
2.页面中调用LoginPage.vue
const register async () {//注册成功之前先进行校验。校验成功就发请求校验失败自动提示//调用validate会触发校验给用户显示错误提示await form.value.validate()await userRegisterService(formModel.value)
//调用组件ElMessage.success(success)isRegister.value false
}
3.eslintrc 中声明全局变量名, 解决 ElMessage 报错问题
module.exports {...globals: {ElMessage: readonly,ElMessageBox: readonly,ElLoading: readonly}
} 切换的时候重置表单内容利用watch监视 当isRegister变量发生改变时这段代码就会运行并清空formModel对象中的所有表单输入字段从而重置注册表单。watch 可以让你设置一个回调函数当被监控的数据发生变化时这个回调函数就会被执行
watch(isRegister, () {formModel.value {username: ,password: ,repassword: }})
登录封装登录接口 //登录接口post
//不能加花括号否则就要加return
export const userLoginService ({ username, password }) request.post(/api/login, {username,password})
登录调用方法将 token 存入 pinia 并 自动持久化本地
//调store下的user里的setToken方法
const userStore useUserStore()
//当你调用useRouter()函数时它会返回一个路由实例对象你可以通过这个对象来访问和操作路由相关的功能。
//记得导入
const router useRouter()
const login async () {//登录前进行预校验没通过就不能发请求await form.value.validate()//调用接口发送数据const res await userLoginService(formModel.value)//把返回的res存到pinia里面去,并且自动持久化到本地userStore.setToken(res.data.token)//给出提示登录成功ElMessage.success(success)//跳转首页router.push(/)
}
