如何实现表单预校验,以下我写了详细的简介。

校验规则生效

1、from必须关联 :model="form对象"

2、input双向绑定

3、form 定义:rules="rules对象"

4、input所在的form-item绑定prop属性

<template>
  <div>
    <!-- 如果你需要一个表单,可以使用el-form -->
    <!-- 如果需要表单校验 el-form 2、需要传递model属性是定死的，且指定表单对象from  3、还需要rules验证规则 -->
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
    <!-- 每一个表单域(包括每一个输入框以及前面的文字提示),都是一个 el-form-item   
        el-form-item里面需要1、v-model双向数据绑定
        el-form-item需要传递 4、prop属性（这里面你需要传递的时=是字段名字符串）
    -->
        <el-form-item label="手机号: " prop="mobile" >
            <el-input type="text" v-model="form.mobile" placeholder="请输入手机号"/>
        </el-form-item>

        <el-form-item label="验证码: " prop="code">
            <el-input type="text" v-model="form.code" placeholder="请输入验证码"/>
        </el-form-item>

        <el-form-item label="年龄: " prop="age">
            <el-input type="text" v-model="form.age" placeholder="请输入年龄"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    // 调在这里好维护
    // 这个函数是提供最为数据的一部分，不是提供给组件使用的！！！
    const validAge = (rule, value, callback) => {
        // rule：表示要校验的规则对象
        // value：表示用户现在要输入的内容
        // callback：是个函数，且必须调用产生一个结果（成功/失败）
            // 如果你验证成功，callback()
            // 如果你验证失败，callback('你的格式错了')，显示错误信息
            if (value <= 120 && /^[1-9]\d{0,2}$/.test(value)) {
              // 数据满足条件
                callback()
            }else {
              // 数据不满足条件 
              // 更加规范加new Error('..')
               callback(new Error('年龄不符合实际'))
            }
          }
          
    return {
      form: {
        mobile: '',
        code: '',
        age: ''
      },
      // 这是在配置表单验证的规则
      rules: {
          // 你要校验的字段名：[{每一个对象，表示一个校验规则}，{}]
        mobile:[
            // 每一个对象，表示一个校验规则
            // 必填的校验规则
            { 
              required: true, // required:必须的意思，该字段必填校验
              message: '手机号不能为空', //如果没有填，提供错误信息
              trigger: ['blur','change'] //文本框失焦时触发校验,且内容发生变化时触发校验
            },
            // 长度的校验规则
            // {
            //   min: 7, // 最少输入几个字符
            //   max: 12, // 最多输入几个字符
            //   message: '长度必须是7-12位',
            //   trigger: ['blur','change'] //失焦时触发，且内容发生变化时触发校验
            // },
            // 正则校验
            // 手机号的正则：一定是11位：3~9
            {
              pattern: /^1[3-9]\d{9}$/,
              message: '手机号格式不对',
              trigger: ['blur','change']
            }
          ],
        code:[
          // 必填
          {
            required: true,
            message: '验证码不能为空',
            trigger: ['blur','change']
          },
          // 6位数校验
          {
            pattern: /^\d{6}$/,
            message: '验证码只能是6位数字',
            trigger: ['blur','change']
          }
        ],
        age:[
          // 必填
          {
            required: true,
            message: '年龄不能为空',
            trigger: ['blur','change']
          },
          // 输入的年龄只能是1位2位3位，不能以0开头，且年龄<=120
          // 自定义校验
          {
            // 校验函数：固定语法，失焦以后立即触发，change内容发生变化立即触发
            // validator: () => {},
            // trigger: ['blur','change']
            validator: validAge,
            trigger: ['blur','change']//触发时机决定了你的校验函数什么时候执行
          }
        ] 
      },
    }
  },
      methods: {
        login() {
          // 通过form组件方法 validate 可以获取获取表单整体校验结果，拿到form组件对象
          this.$refs.formRef.validate( (flag) => {
                  // flag:表单整体校验结果
                  if (!flag) return
                  console.log('可以发送请求',this.form)
          })
        },
        reset() {
          // 所有字段值重置为初始值并移除校验结果
          this.$refs.formRef.resetFields()
        }
      }
}
</script>

<style>

</style>