Vue 문서에서 양식 유효성 검사 기능을 사용하는 방법

Vue는 사용자 인터페이스 구축을 위한 진보적인 JavaScript 프레임워크입니다. Vue의 초점은 거의 모든 프로젝트에서 사용할 수 있는 단순성과 유연성입니다. 프런트엔드 개발자로서 우리는 양식 유효성 검사에 함수를 사용해야 하는 경우가 많습니다. Vue 문서는 매우 실용적이며 개발자가 양식 유효성 검사를 보다 효율적으로 완료하는 데 도움이 될 수 있는 몇 가지 양식 유효성 검사 기능을 제공합니다. 이 글에서는 Vue 문서에서 양식 유효성 검사 기능을 사용하는 방법을 소개합니다.

먼저 v-model을 사용하여 Vue 템플릿의 양식 필드 값을 바인딩해야 합니다. 예를 들어 다음 코드는 v-model을 사용하여 입력 상자의 값을 바인딩합니다. v-model绑定表单字段的值。例如，以下代码使用v-model绑定一个输入框的值：

<template>
  <div>
    <input type="text" v-model="username">
  </div>
</template>

在Vue文档中，表单验证函数包含在Vue的实例方法$validator中。要使用表单验证函数，我们需要先通过Vue.use(VeeValidate)引入VeeValidate插件，这是Vue官方推荐的表单验证插件。

在引入VeeValidate之后，我们可以在Vue实例的生命周期中调用$validator方法，例如在created()方法中，以便在Vue实例被创建时完成初始化。

<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';  // 引入VeeValidate插件
Vue.use(VeeValidate);  // 使用VeeValidate
export default {
  name: 'formDemo',
  data() {
    return {
      username: '',
    };
  },
  created() {
    this.$validator.localize('zh_CN', {  // 将验证器语言设置为中文
      messages: {
        required: (field) => `${field}不能为空`,
      },
    });
  }
}

上述代码中，在created()方法中，我们使用this.$validator.localize()方法将验证器的语言设置为中文，并定义了一条自定义错误消息。这里的required是一个默认的VeeValidate规则，它表示此项字段必填。在本例中，自定义错误消息是“用户名不能为空”。

现在，我们定义了一个自定义的VeeValidate规则checkUsernameAvailable，在本例中，它是用来检查用户名是否可用的。在该规则中，我们可以访问输入框绑定的值，然后我们可以使用Axios请求POST方法将该值发送到服务器。如果返回的结果是数据状态码为200，则表示该用户名可用，否则表示用户名不可用。

<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';
import axios from 'axios';
Vue.use(VeeValidate);
export default {
  name: 'formDemo',
  data() {
    return {
      username: '',
    };
  },
  created() {
    this.$validator.localize('zh_CN', {
      messages: {
        required: (field) => `${field}不能为空`,
        checkUsernameAvailable: (field) => `${field}已经被注册了`,
      },
    });

    this.$validator.extend('checkUsernameAvailable', {
      getMessage: (field, params, data) => data.message,
      validate: async (value) => {
        const { data } = await axios.post('/api/checkusername', {
          username: value,
        });
        return {
          valid: data.status === 200,
          data: data,
        };
      },
    });
  }
}
</script>

在上述代码中，我们定义了一个带有自定义函数的验证规则checkUsernameAvailable，该规则使用异步/await来等待Axios的POST方法响应。如果响应中的状态码为200，则返回true，否则返回false。

最后，我们需要将这个验证规则绑定到HTML表单中。在表单元素中添加data-vv-validate属性，这告诉Vue Validator开始验证该表单。然后，我们在需要验证的表单元素中添加自定义规则v-validate="{ rules: { checkUsernameAvailable: true } }"。这告诉Vue Validator使用我们自定义的验证规则。

<template>
  <div>
    <form @submit.prevent="">
      <div>
        <input type="text" name="username" v-model="username" data-vv-validate="''" v-validate="{ rules: { checkUsernameAvailable: true } }" placeholder="请输入用户名">
        <div v-show="errors.has('username')" class="invalid-feedback">{{ errors.first('username') }}</div>
      </div>
      <button @click="submitForm">提交</button>
    </form>
  </div>
</template>

在上述代码中，我们在输入框中添加了一个错误消息v-show="errors.has('username')"rrreee

Vue 문서에서 양식 유효성 검사 기능은 Vue의 인스턴스 메서드 $validator에 포함되어 있습니다. 양식 유효성 검사 기능을 사용하려면 먼저 공식적으로 권장되는 Vue용 양식 유효성 검사 플러그인인 Vue.use(VeeValidate)를 통해 VeeValidate 플러그인을 도입해야 합니다.

VeeValidate를 도입한 후 created() 메서드와 같이 Vue 인스턴스의 수명 주기에서 $validator 메서드를 호출할 수 있습니다. 인스턴스가 생성되었습니다. 초기화가 완료되었습니다.

rrreee

위 코드의 created() 메서드에서 this.$validator.localize() 메서드를 사용하여 유효성 검사기의 언어를 중국어로 설정했습니다. 사용자 정의 오류 메시지 생성을 정의합니다. 여기서 required는 기본 VeeValidate 규칙이며, 이는 이 필드가 필수임을 나타냅니다. 이 예에서 사용자 정의 오류 메시지는 "사용자 이름은 비워둘 수 없습니다."입니다. 🎜🎜이제 사용자 정의 VeeValidate 규칙 checkUsernameAvailable을 정의합니다. 이 경우 사용자 이름을 사용할 수 있는지 확인하는 데 사용됩니다. 이 규칙에서는 입력 상자에 바인딩된 값에 액세스한 다음 Axios 요청 POST 메서드를 사용하여 해당 값을 서버로 보낼 수 있습니다. 반환된 결과가 데이터 상태 코드 200이면 사용자 이름을 사용할 수 있음을 의미하고, 그렇지 않으면 사용자 이름을 사용할 수 없음을 의미합니다. 🎜rrreee🎜위 코드에서는 비동기/대기를 사용하여 Axios의 POST 메서드 응답을 기다리는 사용자 정의 함수로 유효성 검사 규칙 checkUsernameAvailable을 정의합니다. 응답의 상태 코드가 200이면 true가 반환되고, 그렇지 않으면 false가 반환됩니다. 🎜🎜마지막으로 이 유효성 검사 규칙을 HTML 양식에 바인딩해야 합니다. 양식 요소에 data-vv-validate 속성을 ​​추가하면 Vue Validator가 양식 유효성 검사를 시작합니다. 그런 다음 유효성 검사가 필요한 양식 요소에 사용자 정의 규칙 v-validate="{ 규칙: { checkUsernameAvailable: true } }"를 추가합니다. 이는 Vue Validator에게 사용자 정의 유효성 검사 규칙을 사용하도록 지시합니다. 🎜rrreee🎜위 코드에서는 입력란에 오류 메시지 v-show="errors.has('username')"를 추가했습니다. 오류 메시지가 비어 있지 않으면 메시지가 표시됩니다. 표시됩니다. 🎜🎜이제 사용자 정의 유효성 검사 규칙의 생성 및 바인딩이 완료되었습니다. 사용자 이름 입력 상자의 값을 서버 측에서 사용할 수 있으면 양식이 데이터를 제출하고, 그렇지 않으면 Vue Validator가 사용자 정의 오류 메시지를 표시합니다. 🎜🎜전반적으로 Vue Validator는 매우 강력하고 사용하기 쉬운 양식 검증 플러그인입니다. Vue는 프런트엔드 개발자가 양식 유효성 검사를 신속하게 개발할 수 있는 탁월한 플랫폼을 제공합니다. Vue Validator의 사용은 이해하기 쉽고 개발 효율성을 크게 향상시킬 수 있습니다. 🎜

위 내용은 Vue 문서에서 양식 유효성 검사 기능을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!