Vue 메소드에서 검사 규칙을 작성하는 방법-프런트엔드 Q&A-php.cn

Vue 메소드에서 검사 규칙을 작성하는 방법

王林

풀어 주다： 2023-05-24 09:25:37

원래의

588명이 탐색했습니다.

Vue는 SPA(단일 페이지 애플리케이션) 애플리케이션을 구축하는 데 자주 사용되는 인기 있는 JavaScript 프레임워크입니다. Vue 애플리케이션에서 사용자 입력의 유효성을 검사하는 것은 매우 중요한 부분입니다. Vue에서는 애플리케이션의 요구 사항을 충족하고 데이터 보안을 보장하기 위해 몇 가지 규칙과 메서드를 정의하여 사용자 입력의 유효성을 확인할 수 있습니다.

Vue는 필수, 이메일, 숫자 등과 같은 몇 가지 내장된 유효성 검사 규칙을 제공합니다. 입력 및 양식 요소를 사용하여 데이터 바인딩을 수행하고, 유효성 검사 규칙을 해당 요소에 직접 바인딩하고, v-model 지시문을 통해 데이터를 Vue 인스턴스 데이터에 바인딩할 수 있습니다. 또한 데이터 검증을 위한 규칙과 방법을 사용자 정의할 수도 있습니다.

1. 내장된 유효성 검사 규칙

1. 필수

필수 규칙의 기능은 입력 상자가 비어 있는지 확인하는 것입니다.

템플릿에 사용됨:

<input type="text" v-model="name" required>

로그인 후 복사

Vue 인스턴스에 사용됨:

data() {
  return {
    name: ''
  }
}

로그인 후 복사

2. Email

이메일 규칙의 기능은 입력이 합법적인 이메일 형식인지 확인하는 것입니다.

템플릿에 사용됨:

<input type="email" v-model="email" required>

로그인 후 복사

Vue 인스턴스에 사용됨:

data() {
  return {
    email: ''
  }
}

로그인 후 복사

3. 숫자

숫자 규칙의 기능은 입력이 순수한 숫자 형식인지 확인하는 것입니다.

템플릿에서 사용:

<input type="number" v-model="age" required>

로그인 후 복사

Vue 인스턴스에서 사용:

data() {
  return {
    age: ''
  }
}

로그인 후 복사

2. 사용자 정의 규칙

Vue에서 제공하는 내장 규칙을 사용하는 것 외에도 사용자 입력을 검증하기 위해 규칙을 사용자 정의할 수도 있습니다. 예를 들어, 입력 데이터는 특정 범위 내에 있어야 하고, 특정 정규식을 준수해야 하며, 특정 데이터 형식을 충족해야 합니다. Vue.directive 메소드를 사용하여 사용자 정의 규칙을 구현할 수 있으며 바인딩 시 확인 기능을 전달할 수 있습니다.

사용자 정의 규칙의 템플릿 사용법은 기본 제공 규칙과 유사합니다. 먼저 템플릿에서 확인 지침을 정의한 다음 사용자 정의 규칙 지침을 입력 요소의 v-bind 지침에 전달합니다. 초점이 맞지 않습니다. 맞춤 규칙이 트리거됩니다.

사용자 정의 규칙 구현:

Vue.directive('my-rule', {
  bind: function(el, binding, vnode) {
    el.addEventListener('blur', function() {
      const value = el.value
      const rule = binding.value.rule // 获取规则
      const errorMessage = binding.value.message // 获取错误提示信息
      const isValid = rule(value) // 验证数据
      if (!isValid) { // 显示错误提示
        const errorElement = document.createElement('div')
        errorElement.innerHTML = errorMessage
        errorElement.style.color = 'red'
        insertAfter(errorElement, el)
      } else { // 清除错误提示
        const errorElement = nextSibling(el)
        if (errorElement.nodeType === 1 && errorElement.className === 'error-msg') {
          el.parentNode.removeChild(errorElement)
        }
      }
    })
  }
})

// 实例
new Vue({
  el: '#app',
  data() {
    return {
      name: '',
      age: ''
    }
  },
  methods: {
    // 自定义规则
    myRule(value) {
      return value.length === 4 && /^d+$/.test(value)
    }
  }
})

로그인 후 복사

템플릿에서 사용자 정의 규칙을 사용하고 v-bind 지침의 사용자 정의 규칙 명령에 my-rule을 전달합니다.

<input type="text" v-model="name" v-my-rule="{rule: myRule, message: '年龄必须是4位纯数字'}">

로그인 후 복사

3. 사용자 정의 방법

사용자 정의 방법은 다음 용도로도 사용할 수 있습니다. 데이터 검증은 주로 입력이 규칙을 준수하는지 확인하는 함수를 작성한 다음 템플릿의 v-on 명령을 통해 해당 이벤트를 바인딩하고 이벤트를 바인딩하는 코드에서 사용자 정의 메서드를 호출하는 방식으로 수행됩니다.

Vue에서 사용자 정의 메소드 작성:

methods: {
  myMethod(value) {
    return value.length === 11 && /^1d{10}$/.test(value)
  }
}

로그인 후 복사

템플릿에서 사용자 정의 메소드 호출:

<input type="text" v-model="phone" v-on:blur="checkPhone">

로그인 후 복사

methods: {
  checkPhone() {
    const phone = this.phone
    const isValid = this.myMethod(phone)
    if (!isValid) {
      alert('请输入正确的手机号码')
    }
  }
}

로그인 후 복사

요약:

Vue의 데이터 검증은 내장 규칙 및 사용자 정의 규칙, 사용자 정의 메소드 및 다른 기술적 수단을 통해 데이터 검증 기능을 효과적으로 실현할 수 있습니다. 개발 과정에서 사용자 입력을 검증하기 위해 이러한 기술을 합리적으로 사용하면 프로그램의 보안과 안정성을 향상시킬 수 있을 뿐만 아니라 사용자 경험도 향상시킬 수 있습니다.

위 내용은 Vue 메소드에서 검사 규칙을 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!