Vue使用正则校验文本框为正整数

关于Vue使用正则校验文本框为正整数的攻略，可以按照以下步骤进行：

1. 设置校验规则

首先，在Vue中可以通过正则表达式对文本框进行校验。我们可以设置一个正则表达式，来限制输入的内容只能是正整数：

// 定义校验规则，只允许输入正整数
const validatePositiveInteger = (rule, value, callback) => {
  const reg = /^[1-9]\d*$/
  if (reg.test(value)) {
    callback()
  } else {
    callback(new Error('请输入正整数'))
  }
}

在上面的代码中，我们定义了一个validatePositiveInteger方法，用来校验输入的value是否满足正整数的规则。如果满足，则调用callback函数，否则提示用户输入正整数。其中正则表达式^[1-9]\d*$表示第一位必须是1-9的数字，后面可以是任意数字。通过这个正则表达式，我们就可以限制输入的内容只能是正整数了。

2. 在表单元素中使用校验规则

在Vue中，可以通过在表单元素中添加rules属性，来声明需要校验的规则。下面是一个例子：

<template>
  <el-form :model="form" ref="form" :rules="rules">
    <el-form-item label="数量" prop="count">
      <el-input v-model="form.count"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        count: ''
      },
      rules: {
        count: [
          { required: true, message: '数量不能为空', trigger: 'blur' },
          { validator: validatePositiveInteger, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 定义校验规则
    validatePositiveInteger(rule, value, callback) {
      const reg = /^[1-9]\d*$/
      if (reg.test(value)) {
        callback()
      } else {
        callback(new Error('请输入正整数'))
      }
    }
  }
}
</script>

在上面的代码中，我们使用了Element UI的表单组件el-form和el-form-item，同时给el-input元素绑定了v-model指令，用来实现双向数据绑定。接着，我们通过添加rules属性来声明我们需要校验的rule数组。在这个例子中，我们声明了一个count属性，通过添加规则来限制用户输入的内容。在rules中，我们定义了两个规则，一个是必填规则{ required: true, message: '数量不能为空', trigger: 'blur' }，一个是自定义的正整数输入规则{ validator: validatePositiveInteger, trigger: 'blur' }。其中，trigger属性表示校验的时机，这里设置为blur即当失去焦点时进行校验；validator属性表示校验函数，我们将上面定义的validatePositiveInteger方法作为规则。

3. 示例

下面我们进行两个示例说明：

示例1：验证用户年龄

要求：用户年龄必须是18岁以上的正整数。

<template>
  <el-form :model="form" ref="form" :rules="rules">
    <el-form-item label="年龄" prop="age">
      <el-input v-model="form.age"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
const validateAge = (rule, value, callback) => {
  const reg = /^(1[8-9]|[2-9]\d)$/
  if (reg.test(value)) {
    callback()
  } else {
    callback(new Error('请输入18岁以上的正整数'))
  }
}

export default {
  data() {
    return {
      form: {
        age: ''
      },
      rules: {
        age: [
          { required: true, message: '年龄不能为空', trigger: 'blur' },
          { validator: validateAge, trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

在上面的代码中，我们添加了一个validateAge方法，用来校验输入的年龄是否符合要求。正则表达式^(1[8-9]|[2-9]\d)$表示年龄必须是18岁以上的数字，可以写成18-99岁之间的数字。

示例2：商品价格

要求：商品价格必须是大于0的正整数或者小数，且最多保留两位小数。

<template>
  <el-form :model="form" ref="form" :rules="rules">
    <el-form-item label="价格" prop="price">
      <el-input v-model="form.price"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
const validatePrice = (rule, value, callback) => {
  const reg = /^([1-9]\d*|0)(\.\d{1,2})?$/
  if (reg.test(value)) {
    callback()
  } else {
    callback(new Error('请输入大于0的正整数或者小数，且最多保留两位小数'))
  }
}

export default {
  data() {
    return {
      form: {
        price: ''
      },
      rules: {
        price: [
          { required: true, message: '价格不能为空', trigger: 'blur' },
          { validator: validatePrice, trigger: 'blur' }
        ]
      }
    }
  }
}
</script>

在上面的代码中，我们添加了一个validatePrice方法，用来校验输入的价格是否符合要求。正则表达式^([1-9]\d*|0)(.\d{1,2})?$表示，整数部分可以是0或者不以0开头的正整数，小数部分最多保留两位小数。如：0.01, 1.00, 100, 666.66 等都是符合要求的。同时，我们还定义了必填规则和自定义规则。

到这里，关于Vue使用正则校验文本框为正整数的攻略，我已经讲解完了。希望对你有所帮助！