校验规则rules

表单的校验需要在el-form标签的rules属性上绑定rules规则

• rules里面的每一个itemName都代表一个表单项的校验规则
• itemName数组里的每一个对象则都是一条规则 数据结构：

  rules:{  //rules名称可自定义
      //表单项itemName1的规则：
    itemName1:[
        {},  //第一条规则
        {}   //第二条规则
    ],
      //表单项itemName2的规则:  
    itemName2:[
        {},  //第一条规则
        {}   //第二条规则
    ]
}

element-ui自带校验规则

注意： 单纯绑定rules，只会在输入框失去焦点时提示校验失败的信息，若要在校验未通过时阻止提交 则需要在提交事件中加入判断

<template>
//:model  绑定存储表单数据的对象
//:rules  绑定表单校验规则
//:fef    触发表单提交方法将通过ref获取表单dom并判断是否有未满足校验的表单项。
<el-form :model="formData" :rules="rules" ref="testForm">
<!--prop  绑定校验的重点，需保证form-item标签的prop值与其内部标
签（如el-input）的v-model绑定的变量名一致-->
  <el-form-item label="表单项名称" prop="itemName">
      <el-input v-model="formData.itemName" />
  </el-form-item>
  
  <!--提交按钮，需要给提交事件添加判断-->
  <el-form-item>
      <!--此处传的值为字符串类型，是在<el-form>标签中设置的ref的值-->
      <el-button @click="submit('testForm')">提交</el-button>
  </el-form-item>

</el-form>
</template>

...
data() {
    return {
    //存储表单数据的对象
      formData: {
          itemName: ''  //绑定在表单项名称上的属性
      },
    //设置规则
      rules: [
          itemName: [
              //非空规则，失去焦点时触发，校验未通过则提示message
              {required: true, message: '表单项名称不能为空', trigger: 'blur'}
              //长度限制规则
              { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
      ]
    }
},

methods:{
     submmit(formName) {
     //通过传递过来的ref值查看表单验证是否以全部通过
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('表单验证已全部通过，提交成功')
        } else {
        //校验失败
          console.log('error submit!!')
          return false
        }
      })
    },
}

校验失败时触发的提示效果