表单验证(vue.js)

ycl3bljg  于 7个月前  发布在  Vue.js
关注(0)|答案(2)|浏览(108)

我是vue.js的初学者。我想构建一个用于学习的小应用程序。我坚持检查密码字段的长度:

const app = new Vue({
el: '#app',
data: {
errors: [],
vorname: null,
nachname: null,
email: null,
password1: null,
password2: null
},
methods: {
checkForm: function (e) {
  this.errors = [];

  if (!this.vorname) {
    this.errors.push("Bitte Vornamen eingeben.");
  }
  if (!this.nachname) {
    this.errors.push("Bitte den Nachnamen eingen.");
  }
  if (!this.email) {
    this.errors.push('Bitte E-Mail eingeben.');
  } else if (!this.validEmail(this.email)) {
    this.errors.push('Es wird eine valide E-Mail-Adresse benötigt.');
  }
  if (!this.password1) {
    this.errors.push("Bitte geben Sie ein Passwort an.");
  }
  if (!this.password1.length < 8) {
    this.errors.push("Das Password muss mindestens 8 Zeichen lang sein.");  
  } 

  if (!this.errors.length) {
    return true;
  }

  e.preventDefault();
},
validEmail: function (email) {
  var re = /^(([^<>()[\]\\.,;:\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,}))$/;
  return re.test(email);
}
}})

字符串
HTML:

<form
        id="app"
        @submit="checkForm"
        action="test.php"
        method="post"
      >
  <div class="modal-body">
    
      
        <div class="row spacer-sm">
          <div class="col">
            <input class="form-control" placeholder="Vorname" aria-label="Vorname"

            id="vorname"
            v-model="vorname"
            type="text"
            name="vorname"
          >

          </div>
          <div class="col">
            <input class="form-control" placeholder="Nachname" aria-label="Nachname"

            id="nachname"
            v-model="nachname"
            type="text"
            name="nachname"
            >

          </div>
        </div>

        <div class="row spacer-sm">
          <div class="col">
            <input class="form-control" placeholder="E-Mail-Adresse" aria-label="E-Mail-Adresse"

            id="email"
            v-model="email"
            type="email"
            name="email"
            >

          </div>
          <div class="col">
            
          </div>
        </div>
        <hr>
        <div class="row spacer-sm">
          <div class="col">
            <input  class="form-control spacer-sm" placeholder="Passwort" aria-label="Passwort"
            id="password1"
            v-model="password1"
            type="password"
            name="password1"
            >
            <input class="form-control" placeholder="Passwort wiederholen" aria-label="Passwort"
            id="password2"
            v-model="password2"
            type="password"
            name="password2"
            >
          </div>
          <div class="col">
            <div id="passwordHelpBlock" class="form-text">
              Das Passwort muss 8-20 Zeichen lang sein. Es muss Buchstaben und Zahlen enthalten.
            </div>
            
          </div>
        </div>
        <hr>
        <div class="alert alert-danger fade show" v-if="errors.length">
          <b>Bitte korigieren Sie folgenden Fehler:</b>
          <ul>
            <li v-for="error in errors">{{ error }}</li>
          </ul>
          
        </div>

        
      

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
    <button type="submit" class="btn btn-primary" value="Submit">Speichern</button>
  </div>
</form>


每次都出现少于8个字符的错误。不管它有多少个字符。我搜索了文档,但我找不到任何东西。即使我尝试
password1.value.length
不起作用。

ldxq2e6h

ldxq2e6h1#

我认为你在!this.password1.length < 8中有一个错误。你需要删除表达式中的!

jq6vz3qz

jq6vz3qz2#

你在条件中有JS错误:
if(!this.password1.length < 8)
尝试使用(不使用!):
this.password1.length < 8

相关问题