给form表单添加校验前提是要处理以下三步

1. 在el-form元素上绑定一个model属性和绑定一个rules规则属性
2. 在el-form-item,表单项添加一个prop属性
3. 在el-input输入框添加v-model进行双向绑定

例如

<div id="app">
    <el-card>
      <!-- 登录功能 -->
    <!-- 表单组件:绑定model属性和规则属性，model属性就是data中定义的loginForm对象 -->
    <el-form class="Loginform" ref="loginForm" :model="loginForm" :rules="rules">
      <!-- 表单项 绑定prop属性，对应的就是data中loginForm对象中的username属性-->
      <el-form-item prop="username">
        <!-- 输入框 v-model双向绑定的是data中的loginForm的username -->
        <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <!-- 输入框 -->
        <el-input placeholder="请输入密码" v-model="loginForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <!-- 登录按钮 -->
        <el-button type="primary" class="loginBtn" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
    </el-card>
  </div>

在data中进行规则校验

	data(){
		return {
			loginForm:{
				username:'',
				password:''
			},
			//制定规则
			rules:{
				username:[{
					//必填项
					required:true,
					//提示消息
					message:'请输入用户名'
				},{
					//通过正则校验
					pattern:/^1[3|5|7|8|9]\d{9}$/,
					//不通过的提示信息
					message:'请输入正确的手机号'
				},{
					//自定义规则
					//写法：validator:函数（参数1，参数2（校验的内容），回掉函数）
					//自定义一个手机号第三位必须是9的规则
					validator:(rules,value,callback)=>{
					//如果内容的第二个字符是9，则执行callback，不操作，如果不是，就new 一个错误对象，进行callback进行调用
						value.charAt(2)==='9'?callback():callback(new Error('第三位必须是9'))
					}
				}],
				password:[{
					//触发方式：blur或者change
					trigger:'blur',
					//最小6位数，最大16位数字
					min:6,
					max:16
					//message提示文字
					message:'请输入6-16位字符或者数字'
				},{
					trigger:'blur',
					required:true,
          			message:'请输入密码',
				}]
			}
		}
	}

如果用户直接通过点击登陆进行登陆，不触发blur校验，这时候就需要手动校验

1. 给登陆按钮绑定点击事件

2. 在点击时做校验

   2.1给form表单添加一个ref属性
   2.2通过this.$refs.属性名,validate进行校验
   	有两种方式进行校验
   	方式1：在validate方法中传入一个回调函数
   	方法2：不给validate传回调函数，它的返回 值就是一个promise对象，可以通过then方法获取成功的，可以通过catch获取失败的信息
   

	//登陆的点击事件
	login(){
		//方式1，有回调函数
		//获取form表单
		this.$refs.loginForm.validate((isok)=>{
			if(isok){
			//校验通过
				return alert('校验通过')
			}else{
				return alert('校验失败')
			}
		)
		//方式2
		this.$refs.loginForm.validate().then(()=>console.log('校验通过')).catch(()=>{console.log('校验失败')})
	}