一、登录组件表单的数据绑定
1.为a-form-model加上 :model="form"属性进行数据绑定
在a-form-model表单上填写的数据自动同步到form对象上 :model="form"
在当前组件的行为区有data数据,在data数据里面设置一个form对象,即为表单的数据绑定对象
2.为每一个表单项的文本输入框通过v-model属性绑定form对象上具体的属性中
为了看到测试效果,我在这里先在form对象初始化一个值,用户在页面上可以看到以用户名和密码等
二、登录组件表单的数据验证
1.在a-form-model表单上添加 :rules="rules"
用户一离开输入框(鼠标失去售点时候)会有数据验证操作,看所输入的数据是否符合验证规则
一开始我在搭建页面的时候并没有使用:rules去检验,采用的是:v-decorator直接在页面上进行检验,后来发现过于繁琐,在联调接口的时候全部改用了rules检验
2.在data中定义检验对象
通过rules属性传入约定的规则
3.为a-form-model-item标签的prop属性设置为需要检验的字段名即可
(备注:一开始我用的是Form表单,上述步骤做完后进行字段检验时一直检验不成功,后来换成了FormModel表单重新做检验,就成功了)
里面的pattern方法:
// 正则表达式工具类
// 正则校验的正则表达式,这里注意正则表达式中的‘\’要使用‘\\’转义
const patterns = {
name: '^[a-zA-Z_][0-9a-zA-Z_]{0,}$',
contactNumber: '^1[34578][0-9]{9}$',
mail: '^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$',
pwd:
'^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[\\(\\)])+$)([^(0-9a-zA-Z)]|[\\(\\)]|[a-z]|[A-Z]|[0-9]){8,}$',
IP:
'^(?=(\\b|\\D))(((\\d{1,2})|(1\\d{1,2})|(2[0-4]\\d)|(25[0-5]))\\.){3}((\\d{1,2})|(1\\d{1,2})|(2[0-4]\\d)|(25[0-5]))(?=(\\b|\\D))$',
IDCard: '(^\\d{15}$)|(^\\d{17}([0-9]|X)$)'
}
// 对应正则表达式的提示信息
const patternMsg = {
name: '请以字母、下划线开头并包括数字、字母、下划线组成',
contactNumber: '请输入正确的手机号',
mail: '请输入正确的邮箱地址',
pwd: '密码至少由8位包含字母、数字、特殊字符两种组合',
IP: '非正确IP地址',
IDCard: '非正确身份证号码'
}
// 根据使用的正则返回对应的正则和信息对象
const pattern = (name, para = 'g') => {
return {
pattern: new RegExp(patterns[name], para),
message: patternMsg[name]
}
}
export default pattern
代码如下:
<template>
<div id="register">
<div class="loginTitle">
<span>江苏海域海浪精细化数值预报系统</span>
</div>
<div class="content">
<div class="login-contain">
<div class="head">
<span>欢迎注册</span>
</div>
<div class="form-login">
<a-form-model ref="ruleForm" :model="form" :rules="rules" v-bind="formItemLayout">
<a-form-model-item ref="username" has-feedback label="用户名:" class="login-item-width" prop="username">
<a-input v-model="form.username" />
</a-form-model-item>
<!-- <div class="checkUserName">{{ userNameTips }}</div> -->
<a-form-model-item ref="password" label="设置密码:" has-feedback class="login-item-width" prop="password">
<a-input v-model="form.password" type="password" />
</a-form-model-item>
<a-form-model-item ref="checkUserpwd" label="确认密码:" has-feedback class="login-item-width"
prop="checkUserpwd">
<a-input v-model="form.checkUserpwd" type="password" />
</a-form-model-item>
<a-form-model-item ref="email" label="个人邮箱:" has-feedback class="login-item-width" prop="email">
<a-input v-model="form.email" />
</a-form-model-item>
<a-form-model-item ref="sex" label="性别:" class="login-item-width" prop="sex">
<a-radio-group v-model="form.sex">
<a-radio value="1">
男
</a-radio>
<a-radio value="2">
女
</a-radio>
</a-radio-group>
</a-form-model-item>
<a-form-model-item ref="realName" label="姓名:" has-feedback class="login-item-width" prop="realName">
<a-input v-model="form.realName" />
</a-form-model-item>
<a-form-model-item ref="telephone" label="手机:" has-feedback class="login-item-width"
prop="telephone">
<a-input v-model="form.telephone" />
</a-form-model-item>
<a-form-model-item ref="department" label="单位类别:" has-feedback class="login-item-width" prop="department">
<a-select v-model="form.department" placeholder="please select your zone">
<a-select-option value="1">
业务部门
</a-select-option>
<a-select-option value="2">
科研院所
</a-select-option>
<a-select-option value="3">
高等院校
</a-select-option>
<a-select-option value="4">
其他
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item ref="company" label="用户单位:" has-feedback class="login-item-width" prop="company">
<a-input v-model="form.company" />
</a-form-model-item>
<div class="regItem" v-bind="tailFormItemLayout">
<a-checkbox>
我接受这些条款和条件立即注册
<a href="">《数据使用协议》</a>
</a-checkbox>
</div>
<a-form-model-item v-bind="tailFormItemLayout">
<a-button class="login-item" type="primary" @click="onRigiter">
立即注册
</a-button>
</a-form-model-item>
</a-form-model>
</div>
</div>
</div>
</div>
</template>
<script>
import pattern from '../common/Reg'
import { mapState, mapActions } from 'vuex'
export default {
data() {
let validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'))
} else {
if (this.form.password !== '') {
this.$refs.ruleForm.validateField('checkUserpwd')
}
callback()
}
}
let validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次确认密码'))
} else if (value !== this.form.password) {
callback(new Error('两次输入密码不一致'))
} else {
callback()
}
}
return {
confirmDirty: false,
// residences,
autoCompleteResult: [],
formItemLayout: {
labelCol: {
xs: { span: 24 },
sm: { span: 8 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
},
tailFormItemLayout: {
wrapperCol: {
xs: {
span: 24,
offset: 0,
},
sm: {
span: 16,
offset: 8,
},
},
},
form: {
username: '',
password: '',
checkUserpwd: '',
email: '',
sex: '',
realName: '',
telephone: '',
department: '',
company: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '最少3个字,最多10个字', trigger: 'blur' }
],
password: [
{ required: true, validator: validatePass, trigger: 'change' },
{ min: 6, max: 15, message: '最少6个字,最多15个字', trigger: 'blur' }
],
checkUserpwd: [
{ required: true, validator: validatePass2, trigger: 'change' }
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
pattern('email')
],
sex: [
{ required: false, message: '请选择性别', trigger: 'blur' }
],
realName: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
telephone: [
{ required: true, message: '请输手机号', trigger: 'blur' },
pattern('telephone')
],
department: [
{ required: false, message: '请选择单位类别', trigger: 'blur' }
],
company: [
{ required: false, message: '请输入用户单位', trigger: 'blur' }
]
}
};
},
beforeCreate() {
this.form = this.$form.createForm(this, { name: 'register' });
},
computed: {
...mapState('LoginStore', ['registerInformation'])
},
methods: {
...mapActions('LoginStore', ['getRegister']),
onRigiter(e) {
//如果valid值为false,则不发起网络请求
//valid为true,则发起网络请求
this.$refs.ruleForm.validate(valid => {
if (!valid) return
this.getRegister(this)
})
}
},
};
</script>
<style lang="scss" scoped>
@import './Register.scss';
</style>
三、接口联调