javascript数组从索引
我想创建一个简单的web应用程序，它可以使用Vue验证表单？
我有两个输入字段，firstname[1]和firstname[2]
data: {
firstname: ['',''],
}
我想使用以下代码来验证表单，但最后不要使用suessful。
computed: {
missfirstname(){
for(var i=1;i<this.firstname.length;i++){
if(this.firstname[i] =='' && this.attemptSubmit) {
this.firstname_ErrMsg[i] = 'Not be empty';
return true;
}
return false;
}
}
},
methods: {
validateForm: function (e) {
this.attemptSubmit = true;
if(this.missfirstname){
e.preventDefault();
}else{
return true;
}
}
},
是否可以在验证表单上使用数组循环？？
这是我的代码，我正在使用Vue 2
我的完整代码
script.js
var app = new Vue({
el: '#app',
data: {
firstname: ['',''],
firstname_ErrMsg: ['',''],
attemptSubmit: false
},
mounted () {
var self = this;
},
computed: {
missfirstname(){
for(var i=1;i<this.firstname.length;i++){
if(this.firstname[i] =='' && this.attemptSubmit) {
this.firstname_ErrMsg[i] = 'Not be empty';
return true;
}
return false;
}
}
},
methods: {
validateForm: function (e) {
this.attemptSubmit = true;
if(this.missfirstname){
e.preventDefault();
}else{
return true;
}
}
},
})
index.html
<div id="app">
<form action='process.php' method="post" autocomplete="off" name="submit_form" v-on:submit="validateForm">
firstname1 : <input type='text' id='firstname1' name='firstname1' alt='1' v-model='firstname[1]'>
<div v-if="missfirstname">{{firstname_ErrMsg[1]}}</div>
<br><br>
firstname2 :
<input type='text' id='firstname2' name='firstname2' alt='2' v-model='firstname[2]'>
<div v-if="missfirstname">{{firstname_ErrMsg[2]}}</div>
<br><br>
<input id="submit" class="preview_button" name="submit_form" type="submit">
</form>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js'></script>
<script src='js/script.js'></script>
观察结果：
missfirstname属性对于每个字段都应该是单独的，否则很难为特定字段分配错误- 您可以使用
@blur并检查用户触摸的特定字段的值，而不是每次在计算属性中迭代this.firstname v-model属性应该是唯一的，否则它将在更改当前属性时更新其他属性
您的用户对象应该是这样的，您可以使用v-for在HTML中对其进行迭代，以创建动态字段，而不是硬编码。
data: {
user: [{
name: 'firstName1',
missfirstname: false
}, {
name: 'firstName2',
missfirstname: false
}]
}
现在，在validateForm()中，您只需传递迭代的索引并检查模型值。如果值为空，则可以将missfirstname指定为user数组中该特定索引对象的true。
更新：根据作者评论，通过for循环在用户数组中分配对象
data: {
users: []
},
mounted() {
for(let i = 1; i <= 2; i++) {
this.users.push({
name: 'firstName' + i,
missfirstnam: false
})
}
}
0开始。
这意味着在您的missfirstname()中，i应该用0定义
missfirstname(){
for(var i=0;i<this.firstname.length;i++){
if(this.firstname[i] =='' && this.attemptSubmit) {
this.firstname_ErrMsg[i] = 'Not be empty';
return true;
}
return false;
}
}