vue 使用elementui 表单rules验证小数跟整数

在Vue中使用Element UI进行表单规则验证时，可以通过自定义验证规则来验证小数和整数。

首先，在Vue组件中引入Element UI和所需的验证规则：

import {Form,FormItem,Input,Button} from 'element-ui';
import {validNumber, validInteger} from '@/utils/validate';

export default {
  components: {
    'el-form': Form,
    'el-form-item': FormItem,
    'el-input': Input,
    'el-button': Button
  },
  data() {
    return {
      form: {
        decimal: '',
        integer: ''
      },
      rules: {
        decimal: [
          { validator: validNumber, trigger: 'blur' }
        ],
        integer: [
          { validator: validInteger, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 表单验证通过，提交表单
          // ...
        } else {
          // 表单验证失败
          return false;
        }
      });
    }
  }
};

在上述代码中，`validNumber`和`validInteger`是用于验证小数和整数的自定义验证方法，这两个方法可以根据自己的需求进行编写。例如，验证小数的方法可以是：

validNumber(rule, value, callback) {
  if (!value) {
    return callback(new Error('请输入内容'));
  } else if (!/^[-+]?([0-9]+(\.[0-9]+)?|\.[0-9]+)$/.test(value)) {
    return callback(new Error('请输入正确的小数'));
  } else {
    callback();
  }
}

验证整数的方法可以是：

validInteger(rule, value, callback) {
  if (!value) {
    return callback(new Error('请输入内容'));
  } else if (!/^[1-9]\d*$/.test(value)) {
    return callback(new Error('请输入正确的整数'));
  } else {
    callback();
  }
}

以上就是使用Element UI进行表单规则验证时，验证小数和整数的方法。在规则中添加相应的验证规则，并且通过自定义验证规则方法来实现对小数和整数的验证。