Element------validate表单验证代码示例与校验规则

校验规则参见: async-validator
表单有一个validate(）发法，是一个异步验证器，可以进行用户数据的验证，所采用的规则就是rules规则。它有一个参数，是回调函数，当验证结束的时候，会调用这个回调函数并给函数传入一个验证结果，如果为True，说明验证通过，否则验证失败。若不传入回调函数，则返回一个promise。
语法：Function（callback：Function(boolean,object))

一、代码示例

.<template>
  <div class="index">
    <!-- ：model：收集表单数据对象，里面的每一个表单分别绑定这个对象中的某个属性 -->
    <!-- ：rules:校验规则，是一个对象，里面的每组键值对就是一条规则，一条规则就是一个数据属性的规则 -->
    <!-- ref：当前表单的标识 -->
    <el-form :model="user" :rules="rules" ref="ruleForm" class="demo-ruleForm">
      <!-- prop:设置当前表单元素所需要使用的验证规则，属性的值一般和验证规则一样 -->
      <el-form-item prop="username">
        <el-input
          v-model="user.username"
          placeholder="请输入用户名称"
          prefix-icon="el-icon-user"
        ></el-input>
      </el-form-item>
      <!-- 点击按钮触发事件 -->
      <el-button type="primary" round class="login-btn" @click="userlogin"
        >按钮</el-button
      >
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        username: "",
      },
      // 定义校验规则，required：必须输入字段，message：没有值时调用的信息trigger：触发器
      rules: {
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          {
            pattern: /^1\d{4}$|^1d{10}$/,
            message: "请输入合法的手机号",
            trigger: "blur",
          },
        ],
      },
    };
  },
  // 点击时验证结果，结果为布尔值
  methods: {
    userlogin() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log("可以登录");
        } else {
          console.log("用户输入不合法");
        }
      });
    },
  },
};
</script>

<style>
</style>

二、默认校验规则

类型

指示要使用的验证器。识别的类型值包括：type
number： 必须是数字
boolean： 必须是布尔值
method： 必须是方法
regexp：必须是正则
integer：必须是整数
float：必须是浮点或小数
array： 必须是数组
object：必须是对象
date： 必须是日期
url： 必须是url
hex： 必须是十六进制
email： 必须是email
any： 可以是任何类型。

必填

required:规则属性指示要验证的源对象上必须存在字段

模式

pattern:规则属性指示值必须匹配的正则表达式才能通过验证

范围

min：最小
max：最大