vue表单加入空格校验

在Vue中，可以通过使用正则表达式进行空格校验。

首先，我们需要在表单的输入框中绑定一个数据属性，例如inputValue，用于存储用户输入的值。

接下来，在Vue的methods选项中，我们可以创建一个空格校验的方法，例如checkSpace，用来检查输入是否包含空格。在方法中，我们可以使用正则表达式来检查输入是否包含至少一个空格，如果包含，则返回false，表示输入不合法；如果不包含，则返回true，表示输入合法。

然后，在表单的输入框中，在用户输入内容时，触发一个事件，例如input事件，将输入的值更新到inputValue数据属性中，并在事件中调用checkSpace方法进行空格校验。

最后，我们可以在表单中添加一个提示信息的标签，根据checkSpace方法的返回值，来动态显示提示信息。如果返回false，则显示提示信息，提示用户输入不合法；如果返回true，则不显示提示信息，表示输入合法。

以下是一个示例代码：

<template>
  <div>
    <input type="text" v-model="inputValue" @input="checkSpace">
    <span v-if="!validInput">输入不能包含空格</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      validInput: true
    }
  },
  methods: {
    checkSpace() {
      const reg = /\s+/; // 正则表达式，匹配至少一个空格
      this.validInput = !reg.test(this.inputValue); // 检查输入是否包含空格
    }
  }
}
</script>

以上是一个简单的实现，当用户输入框中的值包含空格时，会显示提示信息；当输入框中的值不包含空格时，不会显示提示信息。请根据实际需求进行修改和扩展。