Form 表单验证rules的使用

这里举例使用验证用户名来说明：

<template>
<div>
    <el-form :label-position="labelPosition" label-width="80px"  :model="subUserDialog" :rules="rules">
        <el-form-item label="用户名" prop="name">
            <el-input  v-model="subUserDialog.name"></el-input>
        </el-form-item>
    </el-form>
</div>
<template>
<script>
export default {
  data () {
    var ruleUsnername = (rule, value, callback) => {
      const reg = /^[_a-zA-Z0-9]{1,32}$/
      if (value === '' || value === undefined || value == null) {
        callback()
      } else {
        if (!reg.test(value)) {
          callback(new Error('用户名仅由英文字母，数字以及下划线组成'))
        } else {
          callback()
        }
      }
    }
    return {
        rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { validator: ruleUsnername, trigger: 'blur' }
        ],
}

参考博文：
https://www.cnblogs.com/wei-dong/p/8776466.html
https://www.cnblogs.com/luoxuemei/p/9295506.html