ElementUI 表单校验：如何进行整数校验

<template>
  <el-form :model="form" :rules="rules" ref="form" label-width="120px">
    <el-form-item label="延期月数" prop="defermentMonth">
      <el-input v-model="form.defermentMonth" type="number"></el-input>
    </el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      form: {
        defermentMonth: ''
      },
      rules: {
        defermentMonth: [
          { required: true, message: '延期月数不能为空', trigger: 'blur' },
          { validator: this.validateDefermentMonth, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    validateDefermentMonth(rule, value, callback) {
      if (value === '') {
        callback(new Error('请输入延期月数'));
      } else if (!Number.isInteger(Number(value))) {
        callback(new Error('延期月数必须是整数'));
      } else {
        callback();
      }
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单校验通过，进行提交操作
          console.log('表单校验通过');
        } else {
          // 表单校验不通过
          console.log('表单校验不通过');
          return false;
        }
      });
    }
  }
}
</script>
<p>在上述示例中，定义了一个延期月数的表单项，使用了<code>type=&quot;number&quot;</code>来限制输入为数字。在校验规则中，除了使用<code>required</code>规则来判断是否为空，还使用了自定义的校验函数<code>validateDefermentMonth</code>来判断输入是否为整数。在<code>validateDefermentMonth</code>函数中，使用<code>Number.isInteger()</code>方法来判断输入是否为整数，如果不是整数则通过<code>callback</code>方法返回一个错误信息。最后，在提交表单时使用<code>this.$refs.form.validate()</code>方法来触发表单校验。</p>