前言
用guiplan快速制作一个注册页面，模拟用户数据并实现简单的校验等提示：以下是本篇文章正文内容，下面案例可供参考
二、使用步骤
创建一个页面
创建一个注册页面，选择空页面模板即可
复制页面：
切换到做好的登录页面，然后选择这个最外层部分，也就是这个背景，按ctrl+c复制
粘贴页面
再切换到注册页面，然后按ctrl+v将登录页面粘贴进来，修改标题将系统登录改为系统注册
保存页面并创建路由
输入保存位置，并点击保存即可自动保存页面。如果没有启动服务点击右边的启动图标，来启动本地服务。
点击 文件->打开路由配置
点击一键插入路由，注册页面的路由即可配置完成
当然这里用的vite对@符号做了定义所以可以手动修改路由配置。@前面添加一个/ ,name值也可以改为中文“注册”
{
path: '/user/register',
name: '注册',
meta: {
icon: 'md-funnel',
title: 'user_register'
},
component: () => import('/@/views/user/register.vue')
},
预览注册页面
右下角输入端口，这里是3000，点击打开预览并点击刷新。这里会自动打开当前3000端口的首页，首页顶部会显示整个路由链接，点击注册即可跳转到当前正在制作的注册页面
点击开启编辑模式按钮，系统会自动用红色边框选择当前所选的元素
按方向键移动选择元素，选择el-form元素，可以看到这里所创建的数据与绑定的方法
点击数据可以看到登录页面所用到的数据字段以即校验方法
再添加一个字段password2,并对password2自定义一个校验方法，代码如下
form: {
username: '',
password: '',
password2:''
},
rules: {
username: [
{ required: true, message: '请输入用户名称', trigger: 'blur' },
{ min: 1, max: 15, message: '用户名称必须大于1个字', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, message: '密码长度必须大于6个字', trigger: 'blur' }
],
password2: [
{ required: true, message: '请再次输入密码', trigger: 'blur' },
{
validator:(rule,value,callback)=>{
if(value&&value == this.form.password){
callback()
}else{
callback(new Error("密码输入不一致"));
}
},
trigger:"change"
}]
}
再选中输入密码文本框，ctrl+c复制所选的密码文本框，ctrl+shift + v 粘贴到相邻下方，如下图：
将el-form-item校验改为password2
再将文本框绑定改为password2
将文本提示改为请再次输入密码
选中登录按钮将内容改为注册
将绑定的点击方法改为register()
再选中el-form将login方法改为register
可以看到方法里自动含有校验
输入信息测试校验
这样一个注册页面以及相关的表单校验就完成了
源代码
最后附上自动生成的vue源代码
<template>
<!--user_registerhtmlStart-->
<div id="defaultId1" class=" gui-no " > <div id="c7d1ce" class=" p-2 row no-gutters justify-content-end position-relative testBorder ue0a15" > <div id="c212e2" class=" p-2 u3c5c6" > <div id="cd43fc" class=" p-2 ub-img u4b25e" > </div><div id="c948c3" class=" bg-white rounded celelogin udc98b" > <div id="ce4ee9" class=" row no-gutters justify-content-start p-2 font-7 ud2570"> <div><div>系统注册</div></div> </div><div id="c2c5d5" class=" p-2 udf323"> </div><div id="cf2e9d" class=" p-1 u0ad02"> <el-form :model="form" :rules="rules" ref="ruleForm" label-width="1px"> <el-form-item prop="username"> <div id="c61708" class=" u9d692"> <el-input v-model="form.username" prefix-icon="el-icon-user" placeholder="请输入用户名称"></el-input> </div> </el-form-item> <el-form-item prop="password"> <div id="c33400" class=" u9d692"> <el-input v-model="form.password" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password></el-input> </div> </el-form-item> <el-form-item prop="password2"> <div id="cefd13" class=" testBorder u9d692"> <el-input v-model="form.password2" prefix-icon="el-icon-lock" placeholder="请再次输入密码" show-password></el-input> </div> </el-form-item><div id="c81a66" class=" u79591"> <el-button @click="register()" type="primary" style="width:100%">注册</el-button> </div> </el-form> </div><div id="c93958" class=" p-2 row no-gutters justify-content-end u34be3"> <div id="c48800" class=" testBorder ueef0b"> <a href="#/register" class="d-flex"> <div id="c2e6e9" class=" ud6735"> <div><div>注册</div></div> </div> </a> </div> </div> </div> </div><div id="cd0f01" class=" p-2 row no-gutters font-4 u46149" > <div id="cb0e60" class=" u447e0"> <div><div>技术支持：</div></div> </div><div id="c19f87" class=" ml-1 mr-1 uf92b2"> <div><div>上海尚进网络科技有限公司</div></div> </div><div id="c5e4b7" class=" ml-1 u7b2f2"> <a href="http://www.guiplan.com" target="_blank" class="d-flex"> <div id="c67ace" class=" u0c039"> <div><div>www.guiplan.com</div></div> </div> </a> </div> </div><div id="cb95fd" class=" p-2 u116e8"> </div> </div> </div>
<!--user_registerhtmlEnd-->
</template>
<script>
// interfaceCode
export default {
name: '',
mounted(){
// defaultLoad
// user_registerMountedStart
// user_registerMountedEnd
},
components: {},
data () {
return {
// insertData
// user_registerDataStart
form: {
username: '',
password: '',
password2:''
},
rules: {
username: [
{ required: true, message: '请输入用户名称', trigger: 'blur' },
{ min: 1, max: 15, message: '用户名称必须大于1个字', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, message: '密码长度必须大于6个字', trigger: 'blur' }
],
password2: [
{ required: true, message: '请再次输入密码', trigger: 'blur' },
{
validator:(rule,value,callback)=>{
if(value&&value == this.form.password){
callback()
}else{
callback(new Error("密码输入不一致"));
}
},
trigger:"change"
}]
}
// user_registerDataEnd
}
},
methods: {
default (){
},
// insertMethod
// user_registerMethodStart
register(){
this.$refs.ruleForm.validate(data=>{
if(data){
alert("检验成功,去调用接口吧")
}else{
alert("检验失败")
}
var tims = setTimeout(()=>{ // 一秒之后重置
// this.$refs.ruleForm.resetFields()
},1000)
})
}
// user_registerMethodEnd
// methodsCode
},
computed: {}
}
</script>
<style>
.user_registercssStart{}
.no_name{height:1030px;background-repeat: no-repeat;background-position:center 0;}
.ue0a15{ background-image:url('../../assets/images/userbg.jpg');height:100vh;}
.u3c5c6{height:40.70em;width:25.0em;}
.u4b25e{height:8.49em; background-image:url('../../assets/images/logo.png');margin-bottom:1.2em; margin-left:0.9em; margin-right:1.8em; margin-top:0.7em; }
.udc98b{box-shadow: 0 0 20px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 20px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.3);padding-top:2.6em; padding-right:2.2em; padding-left:2.0em; padding-bottom:2.6em; }
.u46149{position:absolute; bottom:0.6em; width:30em;}
@media (min-width: 576px) {
}
@media (min-width: 768px) {
.u3c5c6{margin-right:6.7em; }
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}
.user_registercssEnd{}
/*cssStart*/
/*cssEnd*/
</style>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
