一:先上全部代码:
<template>
<div>
<Nav></Nav>
<Header>
<MyDialog>您可以在此修改您的账号相关信息!</MyDialog>
</Header>
<el-card style="width: auto; margin-top: 10px" shadow="hover">
<el-form ref="form" label-width="80px" size="small" :rules="rules" :model="form">
<el-form-item label="账号" style="margin-left: 400px">
<el-input v-model="form.username" disabled autocomplete="off" style="width: 400px"></el-input>
</el-form-item>
<el-form-item label="姓名" style="margin-left: 400px">
<el-input v-model="form.name" autocomplete="off" style="width: 400px"></el-input>
</el-form-item>
<el-form-item label="邮箱" style="margin-left: 400px" prop="email">
<el-input v-model="form.email" autocomplete="off" style="width: 400px"></el-input>
</el-form-item>
<el-form-item label="电话" style="margin-left: 400px" prop="phone">
<el-input v-model="form.phone" autocomplete="off" style="width: 400px"></el-input>
</el-form-item>
<el-form-item label="地址选择" style="margin-left: 400px">
<area-select :level="2" v-model="address1" :data="pcaa"></area-select>
</el-form-item>
<el-form-item label="地址" style="margin-left: 400px">
<el-input
type="textarea"
v-model="form.address"
disabled
autocomplete="off"
style="width: 400px"
></el-input>
</el-form-item>
<el-form-item style="margin-left: 500px">
<el-button type="primary" @click="saveForm">保 存</el-button>
</el-form-item>
</el-form>
</el-card>
<Footer></Footer>
</div>
</template>
<script>
import Nav from '../../components/Common/Nav'
import Footer from '../../components/Common/Footer'
import Header from '../../components/Common/HeadNav'
import { getByUserId, updateUser } from '../../api/user'
import { pca, pcaa } from 'area-data'
export default {
name: 'AccountSetting',
components: {
Nav,
Footer,
Header
},
data () {
return {
form: {
id: '', // 绑定表单数据的 id 字段
username: '',
name: '',
email: '',
phone: '',
address: ''
},
user: localStorage.getItem('userInfo')
? JSON.parse(localStorage.getItem('userInfo'))
: {},
value: '',
address1: [], // 接收地区的数组对象
pca: pca,
pcaa: pcaa,
rules: {
email: [
// { message: '请输入邮箱', trigger: 'blur' },
{ required: false, type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] }
],
phone: [
// { message: '请输入手机号', trigger: 'blur' },
{ required: false, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号码', trigger: ['blur', 'change'] }
]
}
}
},
created () {
this.load()
},
methods: {
load () {
const token = localStorage.getItem('token')
const username = this.user.name
if (!username || !token) {
this.$message.error('当前无法获取用户信息!请登录!')
return
}
// 缓存中有数据,根据id获取其他信息
console.log(token)
// 构造请求头对象
const headers = {
token: `${token}`
}
getByUserId(this.user.id, headers)
.then((response) => {
console.log(response.data)
this.form = response.data.data
})
},
saveForm () {
this.$refs.form.validate(valid => {
if (valid) {
const token = localStorage.getItem('token')
// 构造请求头对象
const headers = {
token: `${token}`
}
updateUser(this.form, headers)
.then(() => {
this.$message.success('保存成功')
this.load()
this.$emit('refreshUser')
})
.catch((error) => {
this.$message.error(`保存失败:${error.message}`)
})
} else {
this.$message.error('请填写正确的表单信息')
}
})
}
},
watch: {
address1 (newVal) {
const province = pcaa[86][newVal[0]]
const city = pcaa[newVal[0]][newVal[1]]
const district = pcaa[newVal[1]][newVal[2]]
const address2 = [province, city, district].join('')
this.form.address = address2
console.log(this.form.address)
}
}
}
</script>
<style>
/* 样式省略 */
</style>
二:介绍:
这是在做一个个人信息的修改页面,打开后可以根据本地缓存的用户id字段从服务端获取用户的具体信息并展示出来,修改完点击提交可以更改数据。
三:目标需求:给邮箱和手机号添加校验功能(可以不填内容,但填了就要符合基本数据的结构)
四:操作:
1、ref后取表单元素,:rules设置校验的规则,:model绑定数据模型(这个要做)
(为什么还要绑定数据对象:)
2、(非常重要的事情):千万记得给每个标签都使用prop=""的方式标记上,必然也无法进行校验,(记得给想要校验的东西的都标记上)
3、要校验就需要把数据的字段都列出来,不要写个空对象
4、在return下写校验规则
rules: {
email: [
{ required: false, type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] }
],
phone: [
{ required: false, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号码', trigger: ['blur', 'change'] }
]
}
required是是否是必填;type和pattern是设置的类型和规则,message是提示信息,trigger是什么操作下会校验
5、最后在执行逻辑上写上校验的核心判断代码:
根据¥refs获取上面设置的ref的组件元素,调用了它的 validate
方法 ,该方法接受一个回调函数作为参数,在校验结束后会将校验结果传递给该回调函数。回调函数的参数 valid
是一个布尔值,表示表单是否通过校验。如果 valid
为 true
,则表示表单校验通过,可以执行保存逻辑。反之,如果 valid
为 false
,则表示表单校验不通过,需要进行错误处理。