vue2的data写成箭头函数形式，自定义校验规则写在哪，给出例子

在Vue2中，data属性不应该写成箭头函数形式，因为箭头函数会绑定父级作用域的this，导致在组件实例中无法访问到this属性。而自定义校验规则则可以写在组件实例的methods属性中。

以下是一个示例：

<template>
  <div>
    <input type="text" v-model="username" />
    <span v-if="!validateUsername()">用户名格式不正确</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
    };
  },
  methods: {
    validateUsername() {
      const reg = /^[a-zA-Z]\w{5,17}$/;
      return reg.test(this.username);
    },
  },
};
</script>

在上面的示例中，我们在组件的methods属性中定义了一个名为validateUsername的方法，用于检测用户名格式是否正确。在模板中，我们使用v-if指令来判断用户名是否符合规则，如果不符合则显示提示信息。注意到我们在methods属性中使用了this.username来获取用户名数据，这里的this指向的是组件实例，而不是父级作用域的this。

相关问题

vue2中的data写成data: () => ({ }),自定义表单校验写在哪

在Vue2中，不推荐将data写成箭头函数形式，因为箭头函数会绑定父级作用域的this，导致在组件实例中无法访问到this属性。正确的写法应该是将data写成一个返回对象的函数。

自定义表单校验可以写在组件实例中的`methods`属性中。具体实现步骤如下：

1. 在`data`中定义表单的数据字段，如下所示：

data() {
  return {
    username: '',
    password: '',
    email: ''
  }
}

2. 在模板中使用v-model指令绑定表单数据字段，并使用v-show指令显示校验结果，例如：

<template>
  <div>
    <label>用户名：</label>
    <input type="text" v-model="username" />
    <span v-show="!validateUsername()">用户名格式不正确</span>
    <br />
    <label>密码：</label>
    <input type="password" v-model="password" />
    <span v-show="!validatePassword()">密码格式不正确</span>
    <br />
    <label>邮箱：</label>
    <input type="email" v-model="email" />
    <span v-show="!validateEmail()">邮箱格式不正确</span>
  </div>
</template>

3. 在组件实例中定义校验方法，例如：

methods: {
  validateUsername() {
    const reg = /^[a-zA-Z]\w{5,17}$/;
    return reg.test(this.username);
  },
  validatePassword() {
    const reg = /^[a-zA-Z]\w{5,17}$/;
    return reg.test(this.password);
  },
  validateEmail() {
    const reg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
    return reg.test(this.email);
  }
}

在以上示例中，我们在组件实例中定义了三个校验方法，分别用于校验用户名、密码和邮箱格式是否正确。在模板中，我们使用v-show指令来判断校验结果是否为false，如果为false则显示提示信息。

需要注意的是，以上示例只是一个简单的例子，实际开发中校验规则可能更加复杂，可以使用第三方校验库如VeeValidate等来简化校验逻辑。

vueform自定义校验规则

在 Vue.js 中使用 vueform 进行自定义校验规则，可以通过在表单组件中定义 `validations` 对象来实现。例如：

<template>
  <form>
    <input v-model="email" name="email" type="email" />
    <span v-if="!$v.email.required">Email is required</span>
    <span v-if="!$v.email.email">Invalid email format</span>
  </form>
</template>

<script>
import { validationMixin } from 'vuelidate'
import { required, email } from 'vuelidate/lib/validators'

export default {
  mixins: [validationMixin],
  data() {
    return {
      email: ''
    }
  },
  validations: {
    email: {
      required,
      email
    }
  }
}
</script>

在上面的例子中，我们定义了一个 `validations` 对象，其中 `email` 是表单项的名称，`required` 和 `email` 是校验规则。如果校验不通过，就会显示相应的错误信息。