这里我用 vue.js 写了代码。我已经验证了这些字段。在这里,当所有输入字段都填满时,我必须更改按钮颜色。此外,如果有任何字段未填写且用户尝试提交表单,则未填写的字段应以红色边框突出显示。在此先感谢您,请帮助我。
<div id="app">
<p>
<label for='terms'>
<input id='category' type='checkbox' v-model='category'/>
<input id="title" type='text' v-model='title'/>
<input id="address" type='text' v-model='address'>
<input id="city" type='text' v-model='city'/>
<input id="state" type='text' v-model='state'/>
<input id="zip" type='text' v-model='zip'/>
<input id="price" type='text' v-model='price'/>
<input id="Description" type='text' v-model='Description'/>
</label>
</p>
vue.js
new Vue({
el: '#q-vikreya',
components: {
"vue-form-g": VueFormGenerator.component
},
data() {
return {
step:1,
category:'',
title:'',
address:'',
city:'',
state:'',
zip:'',
price:'',
description:'',
methods: {
checkForm: function (e) {
if (this.category && this.title && this.address && this.city && this.state && this.price && this.description) {
return true;
}
this.errors = [];
if (!this.category) {
this.errors.push('Name required.');
}
if (!this.title) {
this.errors.push('Age required.');
}
if (!this.address) {
this.errors.push('Age required.');
}
if (!this.city) {
this.errors.push('Age required.');
}
if (!this.state) {
this.errors.push('Age required.');
}
if (!this.price) {
this.errors.push('Age required.');
}
if (!this.description) {
this.errors.push('Age required.');
}
if (!this.description) {
this.errors.push('Age required.');
}
e.preventDefault();
},
submitForm: function(){
axios({
method : "POST",
url: "{% url 'PostAd' %}", //django path name
headers: {'X-CSRFTOKEN': '{{ csrf_token }}', 'Content-Type': 'application/json'},
data : {"category":this.category, "title":this.title,
"address":this.address,
"city": this.city,
"state": this.state,
"zip": this.zip,
"price": this.price,
"description": this.description,
"radio_price": this.radio_price,
"Job_title": this.model,
},//data
}).then(response => {
console.log("response");
console.log(response.data);
this.success_msg = response.data['msg'];
window.location.replace('{% url "classifieds" %}') // Replace home by the name of your home view
}).catch(err => {
this.err_msg = err.response.data['err'];
console.log("response1");
console.log(err.response.data);
});
},
},
})
答案 0 :(得分:1)
你不需要js或vue来实现它。您可以利用 required
属性和 :invalid
伪类来控制样式。
input {
outline: none;
border: solid 1px green;
}
input:invalid {
border: solid 1px red;
}
input:invalid ~ button {
background-color: red;
}
<label>Name: </label><input required="required" value="Alice" />
<br />
<label>Age: </label><input required="required" />
<br />
<label>Address: </label><input required="required" />
<br />
<button>Submit</button>