看到同期小伙伴写的表单检验，刚好自己没有自己写过，今天也动手自己写写。

<template>
    <el-table
 class="v-table"
 :data="userList"
 border
v-autoHeight>
<el-table-column prop="sequenceNumber" label="序号" align="center" width="100%" :sortable=true></el-table-column>
<el-table-column prop="userName" label="用户名" align="center" width="100%"></el-table-column>
<el-table-column prop="email" label="邮箱" align="center" width="150%" show-overflow-tooltip></el-table-column>
<el-table-column prop="phoneNumber" label="手机号" align="center" width="120%"
 show-overflow-tooltip></el-table-column>
<el-table-column prop="userRoles" label="用户角色" align="center" width="100%">
<template slot-scope="scope">
<span>{{scope.row.userRoles === "0" ? '超级管理员' : '普通管理员'}}</span>
</template>
</el-table-column>
<el-table-column prop="userStatus" label="状态" align="center" width="100%">
<template slot-scope="scope">
<el-switch
 active-color="#13ce66"
 inactive-color="#ff4949"
 v-model="scope.row.userStatus"
 @change="changeSwitch(scope.$index,scope.row)"
 active-value="0"
 inactive-value="1">
</el-switch>
</template>
</el-table-column>
<el-table-column prop="createUser" label="创建人" align="center" width="100%"></el-table-column>
<el-table-column prop="createTime" label="创建时间" align="center" width="150%" show-overflow-tooltip></el-table-column>
<el-table-column prop="edit" label="操作" align="center" width="120%">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.$index,scope.row)" type="primary" plain size="small">修改</el-button>
<el-button @click="handleResetPassword(scope.$index,scope.row)" type="primary" plain size="small">重置密码
</el-button>
</template>
</el-table-column>
</el-table>
</template>

页面表单完成后，下面就可以开始进行表单校验啦

data (){
 return{
 ruls:{
 userName:[{validator:checkUserName,trigger:'blur'}],
 email:[{validator:checkEmail,tigger:'blur'}],
 phoneNumber:[{validator:checkOhoneNumber,tigger:'blur'}],
 userRoles:[{required:true,message:"选择用户角色"，tigger:"blur"}],
 userMode:[{required:true,message:"选择用户状态"，tigger:"blur"}],
 password:[
 {min:6,message:'密码长度最少为6位'，tigger:'blur'},
 {validator:checkPassword1,tigger:'blur'}
 ],

 repeatPassword:[
 {min:6,message:'密码长度最少为6位'，tigger:'blur'}
 {validator:checkPassword2,tigger:'blur'}
 ],
}
var emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
var phoneReg = /^1[345678]\d{9}$/;
//检查用户名是否为空
var checkUserName = (rule, value, callback) => {
  if (value === '' || value.trim().length <= 0) {
    return callback(new Error('用户名不能为空'));
  } else {
    callback();
  }
};
// 检查email是否为空
var checkEmail = (rule, value, callback) => {
  if (value === '' || value.trim().length <= 0) {
    return callback(new Error('email不能为空'));
  } else if (!emailReg.test(value)) {
    return callback(new Error('email格式不正确'));
  } else {
    callback();
  }
};
// 检查手机号是否为空
var checkPhoneNumber = (rule, value, callback) => {
  if (value === '' || value.trim().length <= 0) {
    return callback(new Error('手机号不能为空'));
  } else if (!phoneReg.test(value)) {
    return callback(new Error('手机号格式不正确'));
  } else {
    callback();
  }
};
//检查输入的密码是否符合格式
var checkPassword1 = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('密码不能为空'));
  } else if (this.userForm.password === this.userForm.userName) {
    return callback(new Error('密码不能和用户名的正序相同'));
  } else {
    callback();
  }
};
//检查再次输入的密码与之前是否一致
var checkPassword2 = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('确认密码不能为空'));
  } else if (value !== this.userForm.password) {
    return callback(new Error('两次输入的密码不一致'));
  } else {
    callback();
  }
};

}

}

正则表达式，亲测有效

var emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;//邮箱
var phoneReg = /^1[345678]\d{9}$/;//电话号码