我正在使用 Vue 3 處理用戶CRUD 應用程式。我在嘗試驗證“添加新用戶”表單中的資料時遇到了麻煩。
更準確地說，我使用下面的函式來確保沒有表單欄位是 empy：
isNotEmpty() {
return (
this.formData.first_name &&
this.formData.last_name &&
this.formData.email
);
}
出于某種原因，我無法弄清楚，formErrors陣列看起來像這樣["The email is invalid"]而不是["There are empty filelds","The email is invalid"];
const usersApp = {
data() {
return {
users: [{
id: 1,
first_name: "John",
last_name: "Doe",
email: "[email protected]"
},
{
id: 2,
first_name: "Jane",
last_name: "Doe",
email: "[email protected]"
}
],
formData: {
first_name: "",
last_name: "",
email: ""
},
formErrors: [],
userAdded: false
};
},
methods: {
isNotEmpty() {
return (
this.formData.first_name &&
this.formData.last_name &&
this.formData.email
);
},
isEmail(email) {
return String(email)
.toLowerCase()
.match(
/^(([^<>()[\]\\.,;:\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,}))$/
);
},
formValidation() {
this.formErrors = [];
if (!this.isNotEmpty) {
this.formErrors.push("There are empty filelds");
}
if (!this.isEmail(this.formData.email)) {
this.formErrors.push("The email is invalid");
}
console.log(this.formErrors);
},
resetAddFormData() {
this.formData.first_name = "";
this.formData.last_name = "";
this.formData.email = "";
this.userAdded = false;
},
addUser() {
// Validate form data
this.formValidation();
// Make New User
let newUser = {
first_name: this.formData.first_name,
last_name: this.formData.last_name,
email: this.formData.email
};
// Add new user
if (this.formErrors.length == 0) {
this.users.push(newUser);
this.userAdded = true;
window.setTimeout(this.resetAddFormData, 1000);
}
}
},
watch: {
users() {
this.users();
}
}
};
Vue.createApp(usersApp).mount("#app");.logo {
width: 30px;
}
.nav-item {
width: 100%;
}
@media (min-width: 768px) {
.nav-item {
width: auto;
}
}
.users-table-item-active {
transition: opacity 2s ease;
opacity: 0;
}
.users-table-item {
opacity: 1;
}
.alert {
padding: 0.6rem 0.75rem;
text-align: center;
font-weight: 600;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue@next"></script>
<div id="app">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand p-0" href="#">
<img src="https://www.pngrepo.com/png/303293/180/bootstrap-4-logo.png" alt="" class="logo">
</a>
<!-- Links -->
<div class="navbar-nav w-100">
<ul class="navbar-nav ml-auto" id="navbarSupportedContent">
<li class="nav-item">
<button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#exampleModalCenter">
Add user
</button>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="card my-2">
<h5 class="card-header px-2">Users</h5>
<div class="card-body p-0">
<table class="table table-striped m-0">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody name="users-table" is="transition-group">
<tr v-for="user, key in users" :key="user.id">
<td>{{user.first_name}}</td>
<td>{{user.last_name}}</td>
<td>{{user.email}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title h6" id="exampleModalLongTitle">Add New User</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div v-if="this.formErrors.length > 0">
<div v-for="error in formErrors" class="alert alert-danger">
{{error}}
</div>
</div>
<div v-if="userAdded" class="alert alert-success">User added successfully!</div>
<form @submit.prevent="addUser" novalidate>
<div class="form-group mb-2">
<input type="text" class="form-control input-sm" placeholder="First name" v-model="formData.first_name">
</div>
<div class="form-group mb-2">
<input type="text" class="form-control input-sm" placeholder="Last name" v-model="formData.last_name">
</div>
<div class="form-group mb-2">
<input type="email" class="form-control input-sm" placeholder="Email address" v-model="formData.email">
</div>
<div class=" mt-2">
<button type="submit" class="btn btn-sm btn-block btn-success">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>我究竟做錯了什么？
uj5u.com熱心網友回復：
似乎您忘記實際呼叫 isNotEmpty 函式。現在代碼正在檢查變數 isNotEmpty 是否已定義，并反轉陳述句。
if (!this.isNotEmpty) {
this.formErrors.push("There are empty filelds");
}
應該
if (!this.isNotEmpty()) {
this.formErrors.push("There are empty filelds");
}
uj5u.com熱心網友回復：
您可以在每個欄位中使用規則，而不是使用計算布林值來檢查您的表單是否有效，如下所示：
定義規則
定義你data喜歡的規則：
rules: {
notNull: v => {
if(!v) return 'The field cannot be null'
else return true
},
}
向您的輸入添加規則
<v-text-field
v-model='myModel'
type='number'
label='MyLbael'
:rules='[rules.notNull]'
/>
檢查您的表格是否有效
檢查您的表單是否符合條件this.$refs.myForm.validate()（通過指定表單的參考）
uj5u.com熱心網友回復：
感謝您的幫助，這是我得到的：
const usersApp = {
data() {
return {
users: [
{
id: 1,
first_name: "John",
last_name: "Doe",
email: "[email protected]"
},
{
id: 2,
first_name: "Jane",
last_name: "Doe",
email: "[email protected]"
}
],
formData: {
first_name: "",
last_name: "",
email: ""
},
formErrors: [],
userAdded: false
};
},
methods: {
isNotEmpty() {
return (
this.formData.first_name &&
this.formData.last_name &&
this.formData.email
);
},
isEmail(email) {
return String(email)
.toLowerCase()
.match(
/^(([^<>()[\]\\.,;:\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,}))$/
);
},
formValidation() {
this.formErrors = [];
if (!this.isNotEmpty()) {
this.formErrors.push("There are empty filelds");
}
if (this.isNotEmpty() && !this.isEmail(this.formData.email)) {
this.formErrors.push("The email is invalid");
}
},
resetAddFormData() {
this.formData.first_name = "";
this.formData.last_name = "";
this.formData.email = "";
this.userAdded = false;
},
addUser() {
// Validate form data
this.formValidation();
// Make New User
let newUser = {
first_name: this.formData.first_name,
last_name: this.formData.last_name,
email: this.formData.email
};
// Add new user
if (!this.formErrors.length) {
this.users.push(newUser);
this.userAdded = true;
window.setTimeout(this.resetAddFormData, 1000);
}
}
},
watch: {
users() {
this.users();
}
}
};
Vue.createApp(usersApp).mount("#app");.logo {
width: 30px;
}
.nav-item {
width: 100%;
}
@media (min-width: 768px) {
.nav-item {
width: auto;
}
}
.users-table-item-active {
transition: opacity 2s ease;
opacity: 0;
}
.users-table-item {
opacity: 1;
}
.alert {
padding: 0.6rem 0.75rem;
text-align: center;
font-weight: 600;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue@next"></script>
<div id="app">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand p-0" href="#">
<img src="https://www.pngrepo.com/png/303293/180/bootstrap-4-logo.png" alt="" class="logo">
</a>
<!-- Links -->
<div class="navbar-nav w-100">
<ul class="navbar-nav ml-auto" id="navbarSupportedContent">
<li class="nav-item">
<button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#exampleModalCenter">
Add user
</button>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="card my-2">
<h5 class="card-header px-2">Users</h5>
<div class="card-body p-0">
<table class="table table-striped m-0">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody name="users-table" is="transition-group">
<tr v-for="user, key in users" :key="user.id">
<td>{{user.first_name}}</td>
<td>{{user.last_name}}</td>
<td>{{user.email}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title h6" id="exampleModalLongTitle">Add New User</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="resetAddFormData">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div v-if="this.formErrors.length">
<div v-for="error in formErrors" class="alert alert-danger">
{{error}}
</div>
</div>
<div v-if="userAdded" class="alert alert-success">User added successfully!</div>
<form @submit.prevent="addUser" novalidate>
<div class="form-group mb-2">
<input type="text" class="form-control input-sm" placeholder="First name" v-model="formData.first_name">
</div>
<div class="form-group mb-2">
<input type="text" class="form-control input-sm" placeholder="Last name" v-model="formData.last_name">
</div>
<div class="form-group mb-2">
<input type="email" class="form-control input-sm" placeholder="Email address" v-model="formData.email">
</div>
<div class=" mt-2">
<button type="submit" class="btn btn-sm btn-block btn-success">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/368231.html
標籤：javascript Vue.js Vuejs2 Vuejs3
上一篇：如何將一個變數的值分配給另一個變數的名稱？[JavaScript,Vue.js]
下一篇：如何修復“未知”型別的物件？