用vue js element 写出自定义rules,类型为 数字、字符串、布尔值 、整形、等类型校验的代码进行校验输入框输入的数据

好的，我可以帮你编写一个自定义的表单验证规则。首先，你需要引入 Element UI 组件库，然后在 Vue 组件中使用它提供的 $validator 对象来实现自定义校验规则。

以下是一个示例代码，该代码实现了对输入框输入的数据类型进行校验：

<template>
  <el-form ref="form" :model="formData" :rules="rules">
    <el-form-item label="数字">
      <el-input v-model="formData.number"></el-input>
    </el-form-item>
    <el-form-item label="字符串">
      <el-input v-model="formData.string"></el-input>
    </el-form-item>
    <el-form-item label="布尔值">
      <el-switch v-model="formData.boolean"></el-switch>
    </el-form-item>
    <el-form-item label="整形">
      <el-input v-model="formData.integer"></el-input>
    </el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        number: '',
        string: '',
        boolean: false,
        integer: ''
      },
      rules: {
        number: [
          { required: true, message: '请输入数字', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (isNaN(value)) {
                callback(new Error('请输入有效数字'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        string: [
          { required: true, message: '请输入字符串', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (typeof value !== 'string') {
                callback(new Error('请输入有效字符串'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        boolean: [
          { required: true, message: '请选择布尔值', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              if (typeof value !== 'boolean') {
                callback(new Error('请选择有效布尔值'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }
        ],
        integer: [
          { required: true, message: '请输入整数', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (!Number.isInteger(Number(value))) {
                callback(new Error('请输入有效整数'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 校验通过，提交表单
          // ...
        } else {
          // 校验失败，提示错误信息
          // ...
        }
      })
    }
  }
}
</script>

以上代码中，我们通过定义 rules 对象来实现对输入框输入的数据类型进行校验。每个表单项都有一个对应的校验规则数组，其中包含多个校验规则对象。每个校验规则对象都有一个 validator 属性，它是一个函数，用于校验输入框的值是否符合规则。如果校验不通过，就需要调用 callback 函数，并传入一个 Error 对象，该对象的 message 属性为错误提示信息。如果校验通过，则调用 callback 函数，不传入任何参数。

这样，就可以实现自定义的表单验证规则了。