Vuej 2 + 폼 검증

Vuej 2 + 폼 검증

마감되었습니다. 이 질문은 충족되지 않습니다.스택 오버플로우 가이드라인현재 답변을 받고 있지 않습니다.

---

이 질문을 개선하시겠습니까?스택 오버플로의 토픽이 되도록 질문을 업데이트합니다.

3년 전에 문을 닫았어요

이 질문을 개선하다

vue-validator https://github.com/vuejs/vue-validator는 Vuejs 2를 준비하고 있습니다.프런트 엔드 검증을 실장하는 최선의 방법은 무엇입니까?

업데이트 이 멋진 플러그인 Vee Validate를 찾았습니다.

VueJ의 프런트 엔드 검증을 실장하는 좋은 방법은 vuelidate를 사용하는 것이라고 생각합니다.

매우 사용하기 쉽고 강력합니다.모델 기반 검증을 제공합니다. 즉, 검증된 데이터에 정의된 대로이므로 템플릿에서 완전히 분리됩니다.이메일, 최소 길이 및 최대 길이 또는 필수 항목에 대한 일반적인 빌트인 검증자가 포함되어 있습니다.그리고 다른 많은 것들도.

최종적으로 모두 Javascript이기 때문에 Parsely.js 또는 Validate.js와 같은 기존 Javascript 검증 라이브러리를 사용하여 이를 연결할 수도 있습니다.Validate.js 라이브러리의 장점 중 하나는 Vuex를 사용하는 경우 포맷을 글로벌 스토어에 쉽게 저장할 수 있다는 것입니다.

var constraints = {
  creditCardNumber: {
    presence: true,
    format: {
      pattern: /^(34|37|4|5[1-5]).*$/,
      message: function(value, attribute, validatorOptions, attributes, globalOptions) {
        return validate.format("^%{num} is not a valid credit card number", {
          num: value
        });
      }
    },
    length: function(value, attributes, attributeName, options, constraints) {
      if (value) {
        // Amex
        if ((/^(34|37).*$/).test(value)) return {is: 15};
        // Visa, Mastercard
        if ((/^(4|5[1-5]).*$/).test(value)) return {is: 16};
      }
      // Unknown card, don't validate length
      return false;
    }
  },
  creditCardZip: function(value, attributes, attributeName, options, constraints) {
    if (!(/^(34|37).*$/).test(attributes.creditCardNumber)) return null;
    return {
      presence: {message: "is required when using AMEX"},
      length: {is: 5}
    };
  }
};

다음으로 다음과 같이 사용합니다.

validate({creditCardNumber: "4"}, constraints);
// => {"creditCardNumber": ["Credit card number is the wrong length (should be 16 characters)"]}

validate({creditCardNumber: "9999999999999999"}, constraints);
// => {"creditCardNumber": ["9999999999999999 is not a valid credit card number"]}

validate({creditCardNumber: "4242424242424242"}, constraints);
// => undefined

validate({creditCardNumber: "340000000000000"}, constraints);
// => {"creditCardZip": ["Credit card zip is required when using AMEX"]}

이러한 validate() 함수를 컴포넌트에 후크할 수도 있습니다.@blur=validate(...)

현재 선택의 여지가 많지 않다.가장 관련성이 높은 라이브러리를 찾을 수 있는 vue-awesome을 살펴보십시오.현재 2개입니다.

semantic-ui 또는 semantic-ui 옵션을 사용하는 경우 놀라운 형식 검증 플러그인이 있습니다.

의미적 의 형식 검증

Vuejs와 함께 사용했는데 잘 작동합니다.

이 검증기는 단순하고 유연하며 문서화되어 있습니다.Vue Js에서 폼을 검증하는 대부분의 시나리오를 다룹니다.

저는 예전에 Jquery Validator 플러그인을 사용했습니다.이에 비해 이 Simple-Vue-Validator는 유연성과 하드 코딩된 폼과 동적으로 생성된 폼을 모두 검증하는 기능이 매우 뛰어납니다.

https://github.com/semisleep/simple-vue-validator

SaaS 프로젝트에 광범위하게 사용했고, 지금까지 매우 잘 진행되어 왔습니다.

언급URL : https://stackoverflow.com/questions/40210063/vuejs-2-form-validation