vue的rules校验使用例子

好的，以下是一个使用 Vue 的 rules 校验的例子：

<template>
  <div>
    <h1>注册</h1>
    <form @submit.prevent="submitForm">
      <label>用户名:</label>
      <input v-model="username" type="text" name="username" id="username">
      <br><br>
      <label>密码:</label>
      <input v-model="password" type="password" name="password" id="password">
      <br><br>
      <button type="submit">注册</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    submitForm() {
      // 提交表单
    }
  },
  computed: {
    // 定义 rules 对象
    rules() {
      return {
        // 使用 required 规则校验用户名和密码
        username: [{ required: true, message: '用户名不能为空' }],
        password: [{ required: true, message: '密码不能为空' }]
      }
    }
  }
}
</script>

在上面的例子中，我们先定义了一个表单，包含了用户名和密码两个输入框，然后利用 Vue 的 computed 属性，在其中定义了一个 rules 对象，用来校验输入框中的内容是否合法。在 rules 对象中，我们使用了 required 规则，表示输入框中的内容不能为空，如果不符合规则，则会提示相应的错误信息。最后，在 submitForm 方法中，可以将用户输入的内容提交到后台进行处理。