초기 입력의 초기 상태

유효성 검사 실패시 CSS 클래스를 동적으로 바인딩하는 전자 메일 입력이 매우 간단합니다.초기 입력의 초기 상태

나는 상태가 유효한지 여부를 추적하기 위해 상태 플래그를 사용하고 있습니다.

분명히, 기본적으로 유효성이 검사되지 않습니다. 그러나 박쥐 오른쪽에서 실패로 입력을 스타일링하는 것은 오히려 불쾌합니다.

변경 사항이 적용되기 전에 유효성 검사 오류가 표시되는 것을 피하기를 바랍니다.

분명히 이것은 구현 질문보다 디자인 질문 일 뿐이며 참조 용 코드 (Vue.js)를 추가했습니다.

어떻게 하시겠습니까?

<template> 
    <p class="control has-addons"> 
    <input 
     v-model="email" 
     class="input is-large" 
     :class="{'is-danger': !validated}" 
     placeholder="Email"> 
    <a 
     @click.prevent="submitEmail" 
     class="button is-info is-large"> 
     Subscribe 
    </a> 
    </p> 
</template> 

<script> 
import { isEmail } from 'validator' 
export default { 
    data() { 
    return { 
     email: '', 
     validated: false 
    } 
    }, 
    methods: { 
    submitEmail() { 
     if (isEmail(event.target.value)) { 
     this.validated = true 
     this.$store.dispatch('submit_email', this.email) 
     } else { 
     this.validated = false 
     } 
    } 
    } 
} 
</script>

출처

2017-02-04 softcode

Vue는 "dirty" checking을 제공하지 않습니다.

하나의 옵션은 이메일 변수를 "dirty"속성을 가진 개체로 만드는 것입니다.

email: { 
     "value": null, 
     "dirty": false, 
     "validated": false, 
     },

입력란을 추가 할 때 코드를 쉽게 추적 할 수 있습니다.

출처

2017-02-04 16:02:48 retrograde

나는 데이터 키를 추가했지만 여전히 더 좋은 솔루션을 원합니다. – softcode

visited과 같은 하나의 상태 키를 계속 추적합니다. 필드가 흐려지면 visited를 true로 설정합니다. 수업 상태를 visited && !validated으로 업데이트하십시오.

사용자가 집중하여 올바르게 채우지 않고 필드에서 벗어날 때까지는 오류 상태가 표시되지 않는다는 것을 의미합니다.

출처

2017-02-04 04:52:31 shadymoses

ans에 감사드립니다. 키를 추가하지 않으려 고 시도했습니다. – softcode

아무 것도 나타나지 않으면 받아 들일 것입니다. – softcode

필드를 방문한 후에 만 해당 클래스를 추가하려면 새로운 상태 키를 사용하는 것보다 깨끗하게 처리 할 방법을 알지 못합니다. 그게 바로 국가의 목적입니다. – shadymoses

초기 입력의 초기 상태

답변

관련 문제