Блог

Главная - Вопросы по программированию - Как поделиться @focus=»фокус(«)» и @blur=»размытие(«)»?

Как поделиться @focus=»фокус(«)» и @blur=»размытие(«)»?

#javascript #html #jquery #css #vue.js

Вопрос:

Как поделиться @focus=»фокус(«)» и @blur=»размытие(«)»?

  1. Если формат ввода электронной почты правильный, но формат ввода имени неправильный, имя не отобразит сообщение об ошибке. Я думаю о том, как использовать «Имя поля», чтобы он мог судить, на какое из них я нажал.
  2. Если существует много регулярных выражений, которые необходимо оценить, есть ли способ поделиться функцией?
 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 настроить свойства и проверить их вручную, если не хотите использовать стороннюю библиотеку.

Метки: