我是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
不起作用。
2条答案
按热度按时间ldxq2e6h1#
我认为你在
!this.password1.length < 8
中有一个错误。你需要删除表达式中的!
。jq6vz3qz2#
你在条件中有JS错误:
if(!this.password1.length < 8)
尝试使用(不使用!):
this.password1.length < 8