#javascript #html #jquery #css #vue.js
Вопрос:
Как поделиться @focus=»фокус(«)» и @blur=»размытие(«)»?
- Если формат ввода электронной почты правильный, но формат ввода имени неправильный, имя не отобразит сообщение об ошибке. Я думаю о том, как использовать «Имя поля», чтобы он мог судить, на какое из них я нажал.
- Если существует много регулярных выражений, которые необходимо оценить, есть ли способ поделиться функцией?
const app = new Vue({
el: "#app",
data: {
carrierEmailError: false,
carrierNameError: false,
carrierEmailErrMsg: '',
carrierNameErrMsg: '',
},
methods: {
// emailRule
emailRule() {
var isEmail = /^w ((-w )|(.w ))*@[A-Za-z0-9] ((.|-)[A-Za-z0-9] )*.[A-Za-z] $/
if (!isEmail.test(this.carrierEmail)) {
return false
}
return true
},
// nameRule
nameRule() {
var isText = /^[A-Za-z0-9]{1,10}$/
if (!isText.test(this.carrierName)) {
return false
}
return true
},
focus(fieldName) {
this.carrierEmailError = false;
this.carrierNameError = false;
},
blur(fieldName) {
if (this.emailRule() === true) {
this.carrierEmailError = false;
this.carrierEmailErrMsg = '';
return
} else {
this.carrierEmailError = true;
this.carrierEmailErrMsg = 'Incorrect email format';
}
if (this.nameRule() === true) {
this.carrierNameError = false;
this.carrierNameErrMsg = '';
return
} else {
this.carrierNameError = true;
this.carrierNameErrMsg = 'Incorrect email format';
}
},
}
})
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
</head>
<body>
<div id="app">
<div class="form-control invoice-form" :class="{ 'is-invalid': carrierEmailError }">
<input v-model="carrierEmail" @blur="blur('carrierEmail')" @focus="focus('carrierEmail')" type="text" placeholder="E-MAIL">
</div>
<div class="invalid-feedback" v-show="carrierEmailError">
{{ carrierEmailErrMsg }}
</div>
<div class="form-control invoice-form" :class="{ 'is-invalid': carrierNameError }">
<input v-model="carrierName" @blur="blur('carrierName')" @focus="focus('carrierName')" type="text" placeholder="name">
<div class="ic-clear" @click="clearField('carrierName')"></div>
</div>
<div class="invalid-feedback" v-show="carrierNameError">{{ carrierNameErrMsg }}</div>
</div>
</body>
</html>
Комментарии:
1. Прочитайте о проверке формы. Поможет такая библиотека, как Vueliedate .
2. Вы также можете
watch
настроить свойства и проверить их вручную, если не хотите использовать стороннюю библиотеку.