Vue表单校验规则rules验证规则

直接上代码

<div>
      <el-form 
      :model="ces" 
      :rules="loginFormRules" 
      ref="ruleFormaa">
          <el-form-item label="测试邮件校验" prop="email">
              测试校验规则用例
         <el-input v-model="ces.email" placeholder="请输入回答次数" style="width: 160px;"></el-input>
        </el-form-item>
         <el-form-item>
   		 <el-button type="primary" @click="submitFormaa('ruleFormaa')">提交</el-button>
         </el-form-item>
      </el-form>
</div>

1.标签要绑定rules属性，即在标签内部声明 rules = “loginFormRules”
2.双引号内名字可以自己定义，随后在data中声明此为表单验证规则对象 标签要绑定prop属性，即在标签内部声明
3.prop = "username” ；username表示在表单验证规则对象中定义的属性
4.required: true 表示必填项
5.trigger: 'blur’表示当失去焦点时触发

校验data

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop
属性设置为需校验的字段名即可
注意：
1.如果需要表单提交校验，在methods中自定义校验函数
2.必须在el-form标签中定义:model=“ces” :rules=“loginFormRules” ref="ruleFormaa"三个参数，并且注意前面的冒号
3.在el-form-item中添加prop属性，并且prop中的属性名称引用的是loginFormRules中定义好的校验规则的名字

    return {
      ces: {
        email: ''
      },loginFormRules: {
         email: [
          {required: true,message: '请输入邮箱地址',trigger: 'blur'},{type: 'email',message: '请输入正确的邮箱地址',trigger: ['blur','change']}
        ]
      }
    }
  },methods: {
  // 第一种方法要接收参数 并且$refs[formName]
      submitFormaa(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
      }
`