vue 注册页面的实现

一、登录组件表单的数据绑定

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>

 三、接口联调