Form表单校验的几种情况：

1、正常添加校验流程，在form表单加rule

1.在里添加:rules="Rules"

2.在里添加prop，prop对应:model="Form"的form属性

3.然后在data里添加属性rules

4.在点击提交的按钮里进行validate校验

<!-- 添加用户的对话框 -->
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
 <!-- 内容主体区 -->
 <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
     <el-form-item label="用户名" prop="username">
     <el-input v-model="addForm.username"></el-input>
     </el-form-item>
     <el-form-item label="密码" prop="password">
     <el-input v-model="addForm.password"></el-input>
     </el-form-item>
     <el-form-item label="邮箱" prop="email" type="email">
     <el-input v-model="addForm.email" type="email"></el-input>
     </el-form-item>
     <el-form-item label="手机" prop="mobile">
     <el-input v-model="addForm.mobile"></el-input>
     </el-form-item>
 </el-form>
 <!-- 底部按钮区 -->
 <span slot="footer" class="dialog-footer">
     <el-button @click="addDialogVisible = false">取 消</el-button>
     <el-button type="primary" @click="addUser">确 定</el-button>
 </span>
</el-dialog>

data (){
return {
//   添加用户的表单数据
 addForm:{
     username:'',
     password:'',
     email:'',
     mobile:''
}
}
}

2、自定义校验（正则校验手机号码、邮箱）

用正则表达式

3、添加动态校验

根据form表单的列表选项来判断某些字段是否需要校验，选了A,要校验几个字段必填，选了B又要校验其他几个字段必填，这时候表单的校验需要动态添加，这时候我们需要动态改变rules属性相关的校验即可

暂时只遇到这三种情况，有新的就补充。

---

Element-UI的Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator。

validate 方法，对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise。有三个参数 Function(callback: Function(boolean, object))。

以下是vue项目里的源码：

// 点击登录按钮，进行页面跳转
login(){
 this.$refs.loginFormRef.validate(async valid=>{
   // console.log(valid);
   if(!valid) return;
   const { data: res } = await this.$http.post("login",this.loginForm) 
   //如果要请求服务器，要保证API服务器处于运行的状态 1、启动mysql 2、终端 node执行app.js
   // if (res.meta.status !== 200) return console.log("登录失败");
   if (res.meta.status !== 200) return this.$message.error('登录失败!');
   // console.log("成功^_^");
   this.$message.success('登录成功^_^');
   console.log(res);
   window.sessionStorage.setItem("token",res.data.token);
   this.$router.push("/home");
 });
}

// 编辑用户信息并提交
editRoleInfo(){
 this.$refs.addFormRef.validate(async valid =>{
     // console.log(valid);
     if(!valid) return;
     const{data:res} = await this.$http.put('roles/' + this.addForm.roleId,
     {roleName:this.addForm.roleName,
     roleDesc:this.addForm.roleDesc});
     if(res.meta.status !== 200){
         return this.$message.error('更新用户失败！');
     }
     // 关闭对话框
     this.editRoleDialogVisible = false;
     // 刷新数据列表
     this.getRolesList();
     // 提示修改成功
     this.$message.success('编辑用户成功～～');
 })
}

表单里邮箱、电话的验证规则：
使用语法：{validator:验证方法,trigger:验证触发}

data (){
//   验证邮箱的规则
var checkEmail = (rule, value, cb) =>{
    // 验证邮箱的正则表达式
    const regEmail = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;

    if(regEmail.test(value)) {
        // 合法的邮箱
        return cb();
    }
    cb(new Error('请输入合法的邮箱!'));
}

// 验证手机号的规则
var checkMobile = (rule, value, cb) =>{
    // 验证手机号的正则表达式
    const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;

    if(regMobile.test(value)) {
        return cb();
    }
    cb(new Error('请输入合法的手机号!'));
}
return {
// 添加表单的验证规则对象
 addFormRules:{         
  email:[
      {required: true,
      message:'请输入邮箱',trigger:'blur'},
      {validator: checkEmail, trigger:'blur'}
  ],
  mobile:[
      {required: true,
      message:'请输入手机号码',trigger:'blur'},
      {validator: checkMobile, trigger:'blur'}
     ]},
  // 修改表单的验证规则对象
editFormRules:{
 email:[
     {required: true, message: '请输入用户邮箱', trigger: 'blur'},
     {validator: checkEmail,trigger:'blur'}
 ],
 mobile:[
     {required: true, message: '请输入用户手机号码', trigger: 'blur'},
     {validator: checkMobile,trigger:'blur'}
 ]
}
}
}