Form组件常用校验规则-1（持续更新中~）

Posted 2022-07-08 由也__

前言

最近感触越来越深，就是要经常分享，分享自己遇到的坑，分享自己的解决办法，分享自己的各种经验，这非常有必要。因为，我遇到问题第一反应是先看看别人是怎么解决的，肯定有人也有相同的想法，那这个时候就需要大家都非常慷慨地分享。所以，以后我会尽量定期进行总结分享，与人方便与己方便~

参考链接

​​https://element.eleme.io/#/zh-CN/component/form​​

​​https://github.com/yiminghe/async-validator​​

表单校验简介

使用目的

在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。

简单使用

Form 组件提供了表单验证的功能，只需要通过 ​​rules​​ 属性传入约定的验证规则，并将 Form-Item 的 ​​prop​​ 属性设置为需校验的字段名即可。

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm(ruleForm)">立即创建</el-button>
    <el-button @click="resetForm(ruleForm)">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default 
    data() 
      return 
        ruleForm: 
          name: ,
        ,
        rules: 
          name: [
             required: true, message: 请输入活动名称, trigger: blur ,
             min: 3, max: 5, message: 长度在 3 到 5 个字符, trigger: blur 
          ],
        
      ;
    ,
    methods: 
      submitForm(formName) 
        this.$refs[formName].validate((valid) => 
          if (valid) 
            alert(submit!);
           else 
            console.log(error submit!!);
            return false;
          
        );
      ,
      resetForm(formName) 
        this.$refs[formName].resetFields();
      
    
  
</script>

常用字段

​​required​​

是否为必填项，用于验证字段内容是否为空；

​​type​​

数据类型，类似数据格式校验，默认是string，常见的类型有​​number​​​，​​boolean​​​，​​integer​​​，​​float​​​，​​array​​​，​​date​​​，​​email​​等；

​​pattern​​

字段值匹配正则表达式才能通过验证；

​​min​​​和​​max​​

对于string和数组来说，min和max表示最小和最大的长度；对于数字number来说，表示限制值大小；

​​trigger​​

触发验证的条件；

​​validator​​

可以为指定字段自定义验证函数：function(rule, value, callback)；