Vue表单验证
目录复制
Vue表单验证
- 1 前端
-
- 1 `template`标签的内容
-
- 1 在`el-form`标签中定义如下属性
-
- 1 `ref="edit-form"` 用于调用关于表单的方法
- 2 `:model="form"` `el-input`标签中表单值`v-model`的父属性
- 3 `:rules="rulers"` `el-form-item`标签中验证规则`prop`的父属性
- 2 在`el-form-item`标签中定义 `prop="name"`属性 用于表单校验
- 3 在`el-input`标签中定义 `v-model="form.name""`属性用于存放表单值
- 2 `script 和 style`标签的内容
- 2 后端
-
- 1 条件查询数据库，有没有相同的用户名或手机号/或邮箱
- 2 给明码加密
-
- 1 引入spring security
- 2 把密码加密交给spring管理
- 3 在实体类中加入明码属性 给一个不在用户表的注解
1 前端
前端发给后端的是明码，在后端进行加密。
1 template标签的内容
1 在el-form标签中定义如下属性
1 ref="edit-form" 用于调用关于表单的方法
2 :model="form" el-input标签中表单值v-model的父属性
3 :rules="rulers" el-form-item标签中验证规则prop的父属性
2 在el-form-item标签中定义 prop="name"属性 用于表单校验
3 在el-input标签中定义 v-model="form.name""属性用于存放表单值
<template>
<div>
<el-form ref="edit-form" :model="form" :rules="rulers" label-width="100px">
<el-form-item label="登入名" prop="longinName">
<el-input v-model="form.longinName"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="form.phone"></el-input>
</el-form-item>
<el-form-item label="密码" prop="rawPassword">
<el-input v-model="form.rawPassword" show-password></el-input>
</el-form-item>
<el-form-item label="头像" prop="icon">
<el-input v-model="form.icon"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" plain @click="save">保存</el-button>
</el-form-item>
</el-form>
</div>
</template>
2 script 和 style标签的内容
<script>
export default {
name: 'UserEdit',
// props 是用于接收父组件传递过来的属性 名称和父组件绑定的属性名一致
// 如:id="dialog.id" 中:id :表示绑定 id为传递过来的属性名
props: {
show: {
type: Boolean,
default: null
},
id: {
type: Number,
default: null
}
},
data() {
// 定义一个异步请求 用于判断表单中的元素是否重复
// 在rulers中用 validator: checkData 调用
const checkData =( rule,value,callback) =>{
// 请求地址按需求修改 value: 表示后端用value来接收这个值
this.get('/ums-user/check',{
value: value},response =>{
if(response){
callback()
}else{
callback(new Error('存在相同数据'))
}
})
}
// 表单的属性和值
return {
form: {
longinName: '',
name: '',
email: '',
phone: '',
rawPassword: '',
icon: '',
active: '1'
},
// 表单验证 其中登入名 手机号 和邮箱有重复验证 即这三个数据不能相同
// 手机号和邮箱有单独的格式验证
rulers: {
name: [{
required: true,
message: '请输入姓名',
trigger: 'blur'
},
{
min: 1,
max: 20,
message: '长度在 1 到 20 个字符',
trigger: 'blur'
}
],
longinName: [{
required: true,
message: '请输入登入名',
trigger: 'blur'
},
{
min: 1,
max: 20,
message: '长度在 1 到 20 个字符',
trigger: 'blur'
},
{
validator: checkData ,trigger: 'blur'
},
],
email: [{
required: true,
message: '请输入邮箱',
trigger: 'blur'
},
{
min: 1,
max: 50,
message: '长度在 1 到 50 个字符',
trigger: 'blur'
},
{
type: 'email',
message: '格式不符，请输入正确的邮箱',
trigger: 'blur'
},
{
validator: checkData ,trigger: 'blur'
},
],
phone: [{
required: true,
message: '请输入手机号',
trigger: 'blur'
},
{
min: 1,
max: 20,
message: '长度在 1 到 20 个字符',
trigger: 'blur'
},
{
pattern: /^1([38][0-9]|4[5-9]|5[0-3,5-9]|66|7[0-8]|9[89])[0-9]{
8}$/,
message: '格式错误',
trigger: 'blur'
},
{
validator: checkData ,trigger: 'blur'
},
],
rawPassword: [{
required: true,
message: '请输入密码',
trigger: 'blur'
},
{
min: 1,
max: 20,
message: '长度在 1 到 20 个字符',
trigger: 'blur'
}
],
}
}
},
created() {
if (this.id) {
this.getOne(this.id)
}
},
// 如果表单验证正确后才进行保存
methods: {
save() {
// 先在form表单上定义"ref='edit-form'" 然后在此处引用
this.$refs['edit-form'].validate(valid =>{
if(valid){
this.post('/ums-user/save', this.form, response => {
this.$emit('update:show', false)
this.$emit('getTableData')
})
}
})
},
getOne() {
this.get('/ums-user/getOne', {
id: this.id
}, response => {
this.form = response
})
}
}
}
</script>
<style scoped=" lang=" less">
</style>
</script>
2 后端
1 条件查询数据库，有没有相同的用户名或手机号/或邮箱
@GetMapping("/check")
ResultJson check(String value){
return ResultJson.success(iUmsUserService.check(value)==0);
}
public int check(String value) {
QueryWrapper<UmsUser> wrapper = new QueryWrapper<UmsUser>();
wrapper.eq("longin_name", value)
.or().eq("email", value)
.or().eq("phone", value);
return this.count(wrapper);
}
2 给明码加密
1 引入spring security
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-core</artifactId>
<version>5.3.3.RELEASE</version>
</dependency>
2 把密码加密交给spring管理
@Configuration
public class UserConfig {
@Bean
BCryptPasswordEncoder getPasswordEncoder(){
return new BCryptPasswordEncoder();
}
}
3 在实体类中加入明码属性 给一个不在用户表的注解
@TableField(exist = false)
private String rawPassword;