最近跟着视频做一个前后端分离的项目,后端是java,前端是vue,前端用的框架有nuxt用来做前台页面,后台页面是利用vue-admin-template-master。
目前到了前台的注册和登录过程,下面简单描述一下注册和功能的实现。
1. 注册功能:
利用element-ui的表单组件,做出注册的表单,样式什么的是视频资料里直接复制的,然后自己更改了一点点,如图
element-ui的组件表单验证做的很不错完全够使用,官方的例子如下:
只要有一个表单输入框未满足验证规则,点击提交按钮就会提示规则,
实现步骤:在表单元素<el-form>
上添加一个ref属性,vue中ref类似于普通元素的id属性
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
:model指定vue中data里的对象,因为提交表单一般用一个对象,可以再<el-form>
上加rules然后后续定义方法,也可以再每个<el-form-item>
上加上rules,prop
指定要提交对象的属性
<el-form-item class="input-prepend restyle" prop="mobile" :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{validator: checkEmail, trigger: ['blur','change']}]">
<div>
<el-input type="text" placeholder="邮箱地址" v-model="user.mobile"/>
<i class="el-icon-message"/>
</div>
</el-form-item>
validator: checkEmail
中checkEmail指验证规则的方法可以再methods中定义:
checkEmail(rule, value, callback) {
//debugger
if (!(/^([A-z0-9]{6,18})(\w|\-)+@[A-z0-9]+\.([A-z]{2,3})$/.test(value))) {
return callback(new Error('邮箱格式不正确'))
}
return callback()
}
最后点击提交或者注册提交时需要使用到<el-form-item>
处的ref属性,不然不会出现提交时还检测是否通过验证规则
代码如下
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
如果this.$refs[formName]
这种格式不生效,试试this.$refs.formName
以上是注册的表单验证过程,后端接口以及登录步骤将在后续文章中写到。
下一篇链接:https://blog.csdn.net/six_teen/article/details/108650767