纯vuejs校验表单

Vue.js可以通过v-model指令绑定表单输入值，并使用计算属性或者自定义方法进行表单校验。以下是一个简单的示例：

<template>
  <form @submit.prevent="submitForm">
    <div>
      <label for="name">姓名：</label>
      <input type="text" id="name" v-model="name">
      <span v-if="!validName" class="error">请输入有效的姓名</span>
    </div>
    <div>
      <label for="email">邮箱：</label>
      <input type="email" id="email" v-model="email">
      <span v-if="!validEmail" class="error">请输入有效的邮箱地址</span>
    </div>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: ''
    }
  },
  computed: {
    validName() {
      // 在这里编写姓名校验逻辑
      return this.name.length > 0;
    },
    validEmail() {
      // 在这里编写邮箱校验逻辑
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return emailRegex.test(this.email);
    }
  },
  methods: {
    submitForm() {
      if (this.validName && this.validEmail) {
        // 在这里处理表单提交逻辑
        console.log('表单提交成功');
      } else {
        console.log('表单校验失败');
      }
    }
  }
}
</script>

<style>
.error {
  color: red;
}
</style>

在上面的示例中，我们使用了v-model指令将输入框的值绑定到Vue实例的data中的属性。然后，通过计算属性validName和validEmail来校验输入框的值是否有效。如果校验失败，会显示错误提示信息。最后，在submitForm方法中检查validName和validEmail是否都为true，如果是则表示表单校验通过，可以进行提交操作。

这只是一个简单的示例，实际应用中的表单校验逻辑可能更加复杂，可以根据具体需求进行扩展和调整