标签文本和输入边框上的验证焦点和错误

Question

我是vue js的新手，仍在尝试弄清楚如何以正确的方式做到这一点。

我有输入验证，当它为空并在输入外部单击时，它会在边框和标签输入上显示错误或红色。当它对焦时，在输入或键入文本内单击，边框和标签文本将变为蓝色。

我用javascript做这个，它可以工作。(下面的代码片段(

我尝试使用 vue 来做到这一点，但是当我单击 1 个输入时，另一个输入也成为焦点。 (下面的代码片段(

我的问题是是否可以使用 vue 而不是 vanila 对其进行编码？

VUE

data: function() {
return {
focusBlue: true
}
}
computed: {
inputFocus: function(){
return{
focus_blue: this.focusBlue
}
}

.focus_blue{
border: 1px solid #4990e2 !important;
}
.test1 input {
background-color: transparent;
border: 1px solid #9b9b9b;
padding: 10px;
color: #ffffff;
}
.test1 input:focus {
outline: none;
}
.test1 {
display: flex;
flex-direction: column;
width: 48%;
margin-top: 25px;
}
.test2{
color: #9b9b9b;
font-size: 14px;
margin-bottom: 5px;
display: block;
}

<div class="test1">
<label class="test2">First Name *</label>
<input type="text" @click="focusBlue = !focusBlue" :class="inputFocus">
</div>
<div class="test1">
<label class="test2">First Name *</label>
<input type="text" @click="focusBlue = !focusBlue" :class="inputFocus">
</div>

<div class="test1">
<label class="test2">First Name *</label>
<input type="text" @click="focusBlue = !focusBlue" :class="inputFocus">
</div>

JAVASCRIPT

userInputValidation: function() {
const userInput = document.querySelectorAll(".inputJs");
const userLabel = document.querySelectorAll(".guestlist-form-label");
const textArea = document.querySelector(".test");
userInput.forEach(function(input, index) {
const labelInput = userLabel[index];
const errorClass = "has-error";
const blueClass = "has-blue";
input.addEventListener("blur", function() {
var hasError = input.value === "";
input.classList.toggle(errorClass, hasError);
labelInput.classList.toggle(errorClass, hasError);
labelInput.classList.remove(blueClass);
console.log("okay");
});
input.addEventListener("focus", function() {
input.classList.remove(errorClass);
labelInput.classList.remove(errorClass);
labelInput.classList.add(blueClass);
console.log("okay");
textArea.classList.add(blueClass);
});
});
},

.guestlist-form-wrapper-textarea {
width: 100%;
margin-top: 25px;
}
.guestlist-textarea {
background-color: transparent;
text-indent: 5px;
height: 50px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #ffffff;
}
.guestlist-form-label.has-blue {
color: #4990e2;
}
.guestlist-form-label.has-error {
color: #d04843;
}
.inputJs.has-error {
border: 1px solid #d04843;
}
.guestlist-form-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 62%;
}
.guestlist-form-wrapper-input {
display: flex;
flex-direction: column;
width: 48%;
margin-top: 25px;
}
.guestlist-form-label {
color: #9b9b9b;
font-size: 14px;
margin-bottom: 5px;
display: block;
}
.guestlist-form-wrapper-input input {
background-color: transparent;
border: 1px solid #9b9b9b;
padding: 10px;
color: #ffffff;
}
.guestlist-form-wrapper-input input:focus,
.guestlist-textarea:focus {
outline: none;
border: 1px solid #4990e2;
color: #4990e2;
-webkit-box-shadow: 0 0 10px 0 rgba(73, 144, 226, 0.2);
box-shadow: 0 0 10px 0 rgba(73, 144, 226, 0.4);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="guestlist-form-wrapper-input">
<label class="guestlist-form-label">First Name *</label>
<input type="text" class="inputJs">
</div>
<div class="guestlist-form-wrapper-input">
<label class="guestlist-form-label">Last Name *</label>
<input type="text" class="inputJs">
</div>
<div class="guestlist-form-wrapper-input">
<label class="guestlist-form-label">Email *</label>
<input type="email" class="inputJs">
</div>
<div class="guestlist-form-wrapper-input">
<label class="guestlist-form-label">Phone *</label>
<input type="tel" class="inputJs">
</div>

<div class="guestlist-form-wrapper-textarea">
<label class="guestlist-form-label test">Booking note *</label>
<textarea
class="guestlist-textarea inputJs"
placeholder="Type your message"
name="textarea"
id="textarea"
cols="30"
rows="10"
></textarea>

Answer 1

首先，你在 Vue 中使用@click事件，但在原版 js 中使用模糊/聚焦。 多次单击输入将切换变量focusBlue。

然后我们有第二个问题，所述变量focusBlue在每个输入之间共享 - 它是保存这些输入的 vue 组件的变量。

您可以存储当前选择的输入的 id/名称，并在必要时切换类，或者(甚至更好(将这些输入提取到单独的组件中 - 这样它们就可以在其他地方重用，切换逻辑将包含在其中

<template>
<div>
<input type="text" @focus="selectedInput = 'input1'" @blur="selectedInput = ''" :class="{ 'focus_blue': selectedInput === 'input1' }"/>
<input type="text" @focus="selectedInput = 'input2'" @blur="selectedInput = ''" :class="{ 'focus_blue': selectedInput === 'input2' }"/>
<input type="text" @focus="selectedInput = 'input3'" @blur="selectedInput = ''" :class="{ 'focus_blue': selectedInput === 'input3' }"/>
</div>
</template>
<script>
// ...
data() {
return {
selectedInput: ''
}
}
// ...
</script>

或作为单独的组件

// input-component
<template>
<div :class="cssClassNames">
<input 
type="text" 
@focus="focus" 
@blur="blur" 
:value="value" 
@input="$emit('input', $event.target.value)"
/>
</div>
</template>
<script>
// ...
name: 'customInput',
props: ['value'],
data() {
return {
focused: ''
}
}
// ...
methods: {
focus() {
this.focused = true
},
blur() {
this.focused = false
}
}
// ...
computed: {
cssClassNames() {
return {
'focused': this.focused,
'has-error': !this.value, // or other classes
}
}
}
// ...
</script>

然后在另一个组件中的某个地方

<customInput v-model="valueOfThisInput" />