作者微信
微

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

小技术 7个月前 (07-05) 0 999+

前言

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

参考链接

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>