Vue实战（三）：Element UI+Vue实现用户信息添加的完整例子，包括了验证处理

1、此用户信息添加增删改查处理中遇到了很多的坑，博客其他文章有些有介绍，下方直接看代码

<template>
<div> 
   <el-dialog
      title="添加/修改用户信息"
      :visible.sync="dialogFormVisible"
      @close="clear">
      <el-form :model="usersForm" :rules="rules" style="text-align: left" ref="usersForm">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
          <el-input v-model="usersForm.username" autocomplete="off"></el-input>
        </el-form-item>        
        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input type="password" v-model="usersForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" :label-width="formLabelWidth" prop="realName">
          <el-input v-model="usersForm.realName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
          <el-input v-model="usersForm.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="职位" :label-width="formLabelWidth" prop="position">
          <el-input v-model="usersForm.position" autocomplete="off"></el-input>
        </el-form-item>       
        <el-form-item prop="id" style="height: 0">
          <el-input type="hidden" v-model="usersForm.id" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit('usersForm')">确 定</el-button>
      </div>
    </el-dialog>
</div>
  </template>

<script>
export default {
  name: 'UserListIndex',
  data () {
    const validateAge = (rule, value, callback) => {
      if (!value) {
        callback(new Error('必须输入年龄'))
      }
      value = Number(value)
      if (typeof value === 'number' && !isNaN(value)) {
        if (value < 0 || value > 100) {
          callback(new Error('年龄在 0 至 100 之间'))
        } else {
          callback()
        }
      } else {
        callback(new Error('年龄必须为数字'))
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('必须输入密码'))
      }
      if (!value.match('[a-zA-Z0-9]')) {
        callback(new Error('密码由6-12个字母或者数字组成'))
      } else {
        callback()
      }
    };
    return {
      dialogFormVisible: false,
      usersForm: {
        id: '',
        username: '',
        password: '',
        realName: '',
        age: '',
        position: ''
      },
      rules: {
        username: [{
          required: true,
          message: '用户名不能为空',
          trigger: blur
        },
        {min:5,max:15,message:'长度在5到15个字符之间'}
        ],
        password: [
          {required: true,
          message: '密码不能为空',
          trigger: blur},
          {validator: validatePassword,
          trigger: 'blur'}
        ],
        realName: [
          {
          required: true,
          message:'真实姓名不能为空',
          trigger: 'blur'
          },
          {min:1,max:10,message:'真实姓名在1到10个字符之间'}
        ],
        age: [
          {required: true,
          message: '年龄不能为空',
          trigger: 'blur'
          },
          {validator: validateAge,
          trigger: 'blur'
          }
        ],
        position: [
          {
          required: true,
          message:'职位不能为空',
          trigger: 'blur'
          },
          {min:1,max:10,message:'长度在1到10个字符之间'}
        ]
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    clear () {
      this.usersForm = {
        id: '',
        username: '',
        password: '',
        realName: '',
        age: '',
        postion: ''
      }
    },
    onSubmit (usersForm) {
      alert("00000")
      this.$refs.usersForm.validate(valid => {
         alert("1111")
        if(valid) {
          this.$axios.post('/userinfo/addUpdateUser',{
            id: this.usersForm.id,
            username: this.usersForm.username,
            password: this.usersForm.password,
            realName: this.usersForm.realName,
            age: this.usersForm.age,
            position: this.usersForm.position
          }).then(resp => {
           this.dialogFormVisible = false
           this.loadUsers()
          })
        } else {
          console.log('Error Submit!!')
          return false
        }
      })
    }
  }
}
</script>