使用干净的 Vue.js 进行表单验证

Question

I need to make clean vue.js based form validation, that checks input on-the-fly without page refresh.

So far i`ve come to the following code for e-mail field validation

<div class="container" id="forms" >
<label for="inputEmail" class="sr-only"></label>
<input type="email" id="inputEmail" class="form-control" placeholder="example@domen.com" required v-model='email'>
<div class="error" v-show="email &amp;&amp; !isEmailValid"><span style="color:red;">Input Correct e-mail </span></div></div>

new Vue({
el: '#forms',
data: { email: ''},
computed: {isEmailValid: function isEmailValid() {
        return (/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(this.email)
        ); } } });

But when i try to add other validation forms in same way/pattern, it breaks - it starts to display erroe message from the very beginning or doesnt display error at all no matter what have been inputed into the field.

Here is the link for the fiddle https://jsfiddle.net/CapablancaYEAH/vpk02stu/

In scripts section i have that instance which im trying to make work, there is probably a mistake there, that breaks everything and i cant understand what should i fix exactly. Something is wrong with declaring or Syntax. I`ve been trying different variants.

Can you please help me?

Answer 1

You can only have one data and one computed properties.

the following is a working version of your code. I didn't do anything except add the fio v-model and combine your computed and data properties. So , um, good job!

see: https://jsfiddle.net/vpk02stu/5/

code to satisfy stackoverflow standards:

js

new Vue({
    el: '#forms',
    data: { email: '', fio: ''},
    computed: {
        isEmailValid: function isEmailValid() {
            return (/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(this.email)
            );
        },
        isFioValid: function isFioValid() {
            return (/\w+[ ]+\w+[ ]+\w+/.test(this.fio)
            );
        }
    }
});

HTML

  <div class="container" id="forms" >
  <h3  style="text-align:center;">Fill the fields</h3>
        <form class="form-signin">

          <label for="inputFIO" class="sr-only" >ФИО</label>
          <input type="text" id="inputFIO" class="form-control" placeholder="Surname and Name" required v-model="fio">
          <div class="error" v-show="fio &amp;&amp; !isFioValid"><span style="color:red;">Input name and surname</span></div>

          <label for="inputEmail" class="sr-only"></label>
          <input type="email" id="inputEmail" class="form-control" placeholder="example@domen.com" required v-model='email'>
          <div class="error" v-show="email &amp;&amp; !isEmailValid"><span style="color:red;">Введите корректный e-mail </span></div>

          <label for="inputText"></label>
    <textarea class="form-control" id="inputText" rows="4"></textarea>

          <button class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>
        </form>
      </div>

style

body {
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #eee;
}

.form-signin {
  max-width: 430px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin  {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: 10px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="text"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}


.btn {
max-width: 200px;
margin: 0 auto;
margin-top: 15px;
}

Answer 2

In Angular, we have a built-in option to validate forms. But Vue offers very limited functionality when it comes to create and validate forms. To add more functionality, we have to install a separate package called Vuelidate to validate our Vue application forms.

What is Vuelidate?
According to the Vuelidate website :
“Vuelidate 2 is a simple, but powerful, lightweight model-based validation for Vue.js 3 and Vue 2.x.”

It allows us to use built-in as well as custom validators

Install

npm install @vuelidate/core @vuelidate/validators

Reference:
https://aaqibqs.medium.com/learn-form-validation-in-vue-3-in-10-minutes-with-vuelidate-8929c5059e66