element 表单验证

  <el-form ref="formRef" inline label-width="100px" :model="formList" :rules="rules">
        <el-form-item label="用户名" prop="Account">
          <el-input v-model.trim="formList.Account" />
        </el-form-item>

        <el-form-item label="密码" prop="PassWord">
          <el-input v-model.trim="formList.PassWord" type="password" maxlength="50" />
        </el-form-item>

        <el-form-item label="真实姓名" prop="RealName">
          <el-input v-model.trim="formList.RealName" />
        </el-form-item>

        <el-form-item label="昵称" prop="NickName">
          <el-input v-model.trim="formList.NickName" />
        </el-form-item>

        <el-form-item label="性别" prop="Gender">
          <el-select v-model="formList.Gender" placeholder="选择性别">
            <el-option v-for="(item, index) in sex" :key="index" :label="item.name" :value="item.field" />
          </el-select>
        </el-form-item>
        <el-form-item label="身份证" prop="IDCardNo">
          <el-input v-model.trim="formList.IDCardNo" maxlength="18" />
        </el-form-item>

        <el-form-item label="手机" prop="MobilePhone">
          <el-input v-model.trim="formList.MobilePhone" maxlength="11" />
        </el-form-item>

        <el-form-item label="区划" prop="areacode">
          <el-tree-select v-model="formList.areacode" :data="data" lazy :load="load" node-key="id" :props="props"
            :render-after-expand="false" />

        </el-form-item>

        <div class="flex">
          <el-form-item label="用户状态" prop="EnabledMark">
            <el-switch v-model="formList.EnabledMark"></el-switch>
          </el-form-item>

          <el-form-item label="用户类型" prop="UserType">
            <el-select v-model="formList.UserType" placeholder="选择用户类型">
              <el-option v-for="(item, index) in dictionary" :key="index" :label="item.name" :value="item.field" />
            </el-select>
          </el-form-item>
        </div>

        <div>
          <el-form-item label="主角色" prop="RoleId">
            <el-checkbox-group v-model="formList.RoleId">
              <el-checkbox v-for="role in roleList" :key="role" :label="role.value">
                {{ role.name }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>

        <div class="remarks">
          <el-form-item label="备注" prop="Description">
            <el-input v-model="formList.Description" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容"
              type="textarea" />


          </el-form-item>
        </div>
      </el-form>

这种方式需要在data()中写入rule{},将prop中需要校验的字段写上验证规则，示例代码如下：

//引入regular.js 需要哪个引入哪个
import { isPhone, isIdCard, isName, isPassword, isUsername, isDescription } from '@/utils/regular.js'

data(){

    return{

        rules: {
        Account: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入用户名',
          },
          { validator: isUsername, trigger: 'blur' }
        ],
        PassWord: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入密码',
          },
          { validator: isPassword, trigger: "blur" }
        ],
        RealName: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入真实姓名',
          },
          { validator: isName, trigger: "blur" }
        ],
        NickName: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入昵称',
          },
        ],
        Gender: [
          {
            required: true,
            trigger: 'change',
            message: '请选择性别',
          },
        ],
        MobilePhone: [
          { required: true, trigger: 'blur', message: '请输入手机号' },
          { validator: isPhone, trigger: "blur" }

        ],
        IDCardNo: [
          { validator: isIdCard, trigger: "blur" }
        ],
        UserType: [
          {
            required: true,
            trigger: 'change',
            message: '请选择用户类型',
          },
        ],
        areacode: [
          {
            required: true,
            trigger: 'change',
            message: '请选择区划',
          },
        ],
        EnabledMark: [
          {
            required: true,
            trigger: 'change',
            message: '请输选择用户状态',
          },
        ],
        RoleId: [
          {
            required: true,
            trigger: 'blur',
            message: '请选择角色',
          },
        ],

        Description: [
          { validator: isDescription, trigger: 'blur' }

        ],
      },
}

}

regular.js文件

// 校验手机号
export const isPhone = (rule, value, cb) => {
  const regMobile = /^1\d{10}$/
  if (regMobile.test(value)) {
    return cb()
  }
  cb(new Error('请输入合法的手机号'))
}

// 校验身份证
export const isIdCard = (rule, value, cb) => {
  const regMobile =
    /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
  if (regMobile.test(value)) {
    return cb()
  }
  cb(new Error('请输入合法的身份证'))
}

// 校验姓名
export const isName = (rule, value, cb) => {
  const regMobile =
    /^(([a-zA-Z+\.?\·?a-zA-Z+]{2,10}$)|([\u4e00-\u9fa5+\·?\u4e00-\u9fa5+]{2,10}$))/
  if (regMobile.test(value)) {
    return cb()
  }
  cb(new Error('请输入正确的姓名'))
}

// 校验密码

export const isPassword = (rule, value, cb) => {
  const regMobile = /^[a-zA-Z]\w{0,50}$/
  if (regMobile.test(value)) {
    return cb()
  }
  cb(new Error('请输入正确的密码'))
}

// // 校验用户名
export const isUsername = (rule, value, cb) => {
  const regMobile = /^[\u4e00-\u9fa5_a-zA-Z0-9_]{2,10}$/
  if (regMobile.test(value)) {
    return cb()
  }
  cb(new Error('请输入正确的用户名'))
}

//备注
export const isDescription = (rule, value, cb) => {
  const regMobile = /^[\u4e00-\u9fa5_a-zA-Z0-9_\^%&',;=?$/x22]{0,500}$/
  if (regMobile.test(value)) {
    return cb()
  }

  cb(new Error('备注长度为500'))
}