project_id需要在表單提交時進行驗證:
<td>
<select2。
name="project_id"。
id="project_id"/span>
v-model.trim="item.project_id.$model"
v-bind:class="{
'is-invalid': item.project_id.$error,
'is-valid':
item.project_id.$dirty &&
!item.project_id.$error,
}"
>
<option value=""/span>> 選擇</選項>
<option v-for=" (project)in projects"
:selected="project.id == timesheet.project_id"/span>
:key="project.id"
:value="project.id"
>{{專案.名稱}}。
</option>
</select2>/span>
</td>
<td>< input type= "checkbox" name="disable" v-on。 click="disabled()"></td>
<script>
import { required, minLength } from "vuelidate/lib/validators"/span>;
validations(){
return{
timesheet: {
items: {
需要的。
minLength: minLength(1)。
project_id: { required },
}
}
}
},
disabled(){
$('#project_id').attr('disabled', true) 。
}
</script>
當disable復選框被選中時,如何使該欄位成為非必須的?
我試著用requiredIf驗證器,但似乎在什么地方遺漏了:
$each: {
project_id: {
required: requiredIf (function(item){
return this.disable。
})
},
},
uj5u.com熱心網友回復:
你可能想在你的disable()函式中做以下事情:
document. getElementById("project_id").removeAttribute("required") 。
//or
document.getElementById("project_id"/span>)。 setAttribute("required", "") 。
為了決定你是否需要洗掉這個屬性,你需要在你的<input type= "checkbox" name="disable" v-on:click="disabled()">上應用一個v-model屬性。如果這個復選框被選中,它的屬性將變成true,否則它將是false。
編輯:這里有一個完整的使用例子。
<template>
<div>
<select id="project_id" required>/span>
<option value="bar"/span>> 選項1</選項>/span>
<option value="foo"/span>> 選項2</option>
<option value=" baz"> 選項3</option>>
</select>/span>
< input type="checkbox"/span> name="disable" v-model="clickedBox" @change="checkSelected">
</div>
</template>/span>
<script>
export default {
data() {
return {
clickedBox: false methods: {
checkSelected() {
if (this.clickedBox ==true) {
document.getElementById("project_id"/span>)。 removeAttribute("required")。
}
else {
document.getElementById("project_id") 。 setAttribute("required", "") 。
}
}
}
</script>
如果復選框被選中,project_id將失去它的required屬性。如果它不被選中,required屬性將被重新設定。
編輯2
EDIT2: 使用動態驗證模式 如果你想為 更多資訊請參見檔案。動態驗證模式
標籤: 上一篇:螞蟻金服的設計表格沒有得到驗證
下一篇:你能對一組復選框進行模糊處理嗎?
project_id使用動態驗證模式,你需要這樣使用它:validations(){
if (!this.clickedBox) {
return {
timesheet: {
items: {
需要的。
minLength: minLength(1)。
project_id: { required },
}
}
}
} else {
return {
timesheet: {
items: {
需要的。
minLength: minLength(1)。
project_id: ''。
}
}
}
}
}
