Как я могу проверить минимальную длину и ограничить специальные символы с помощью Vue Js?

Question

Добрый день или, по крайней мере, в моей стране ^ _ ^

Я в основном пытаюсь выполнить полную проверку перед отправкой формы с помощью библиотеки Vue Js, в этом фрагменте я проверка на пустоту ввода.

const app = new Vue({
  el: '#app',
  data: {
    name: null
  },
  methods:{
    checkForm: function (e) {
      if (this.name) {
        return true;
      }

      if (!this.name) {
        console.log("Please write your name :)")
      }
      
      e.preventDefault();
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<form id="app" @submit="checkForm" method="post">
<input type="text" v-model="name">
<input type="submit">
</form>

Как видите, это работает. Но я хочу повысить безопасность, добавив ограничение для специальных символов, а также обнаружив minlenght.

Я пытаюсь найти в inte rnet функции, которые позволяют мне делать то, что я ищу. Но я ничего не могу найти.

Answer 1

Проверить длину можно с помощью свойства .length. Итак, вы можете добавить:

if(this.name.length < 30) {
   console.log('Name must have 30 characters or more.');
}

Конечно, вы не хотите использовать console.log для проверки формы, но вы сделали это при первой проверке, поэтому я повторил это. Кроме того, 30 было произвольным, вы бы изменили его на то, что хотите.

Что вы имеете в виду под «спецсимволами»? Вы хотите запретить определенные символы или разрешить только некоторые символы? Если вы хотите запретить использование некоторых символов, вы можете использовать регулярное выражение и использовать test, чтобы узнать, существует ли оно. Например:

let badchrs = /[$%\^]/;
if(badchrs.test(this.name)) {
    console.log("you can't use $ or % or ^");
}

Чтобы разрешить только буквы, вы можете сделать так:

s = 'raymond';
badchrs = /^[a-z]/;
console.log(badchrs.test(s));

Answer 2

@ catawP, я отредактировал ваш фрагмент, чтобы можно было проверять длину и специальные символы.

const app = new Vue({
  el: '#app',
  data: {
    name: null,
    email: null
  },
  methods:{
    checkForm: function (e) {
      e.preventDefault();
      // if you want to check both fields
      if(this.checkField(this.name, 'name') && this.checkField(this.email, 'email')) return true
      // if you want to check only one field
      if(this.checkField(this.email, 'email')) return true
     
    },
    checkField(value, field){
      if (value) {
        if(value.length < 10 && field === 'name'){ // check the length only for name field
          console.log("The " + field + " should contain at least 10 characters!")
        }else if(/[;,.]/.test(value) && field !== 'email'){ // exclude email field from this check
          console.log('No special characters are allowed')
        }else if(field === 'email' && !this.email.includes('@')){ // ex of custom checks for a specific field
          console.log('Email field should contain @')
        }else{
          return true;
        }
      }

      if (!value) {
        console.log("Please write your " + field + " :)")
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<form id="app" @submit="checkForm" method="post">
<label for="name">Name</label>
<input type="text" v-model="name" id="name">
<label for="email">Email</label>
<input type="text" v-model="email" id="email">
<input type="submit">
</form>