element-ui使用from表單驗證資料問題
from表單:
<div id="myDiv">
<el-form ref="form" :model="student" label-width="80px">
<el-form-item label="學生編號">
<el-select v-model="student.id" placeholder="請選擇">
<el-option
v-for="stu in studentList"
:key="stu.name"
:value="stu.id">
<span style="float: left">{{ stu.id }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ stu.name }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="學生姓名">
<el-input v-model="student.name"></el-input>
</el-form-item>
<el-form-item label="學生性別">
<el-radio v-model="student.sex" label="男">男</el-radio>
<el-radio v-model="student.sex" label="女">女</el-radio>
</el-form-item>
<el-form-item label="學生年齡">
<el-input v-model="student.age"></el-input>
</el-form-item>
<el-form-item label="出生年月">
<el-col :span="24">
<el-date-picker type="date" placeholder="選擇日期" v-model="student.birthday"
style="width: 100%;"></el-date-picker>
</el-col>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">確定</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
JavaScript程式碼:
<script>
const myModel = {
student: {
id:'',
name: '',
sex: '',
age: '',
birthday: ''
},
sex: [{
id: 1,
name: '男'
}, {
id: 2,
name: '女'
}]
};
new Vue({
el: "#myDiv",
data: myModel,
methods:{
onSubmit(){
console.log( myModel.student );
//後續可以通過ajax或者axios和後端進行資料互動
}
}
})
</script>
注意:注意事件中的列印console.log( myModel.student );
它列印的結果是和表單中填入的資料一致:
填入的資料:
控制檯列印的資料:
既然能拿到表單中的資料,後續懂的都懂
相關文章
- iview 表單提交資料的時候驗證問題View
- 表單資料驗證
- Element-ui如何抽出公共表單驗證UI
- 使用表單驗證,建立資料驗證層,Ajax 統一返回驗證錯誤資訊
- iview表單驗證問題 Select驗證必填失敗,以及表單物件巢狀陣列驗證方法View物件巢狀陣列
- JavaWeb——驗證碼功能解決表單重複提交問題(使用谷歌驗證碼jar包為例)JavaWeb谷歌JAR
- PHP 表單提交後臺資料驗證 ValidatorPHP
- 表單驗證使用擴充套件套件
- SpringMVC表單驗證器的使用SpringMVC
- vue+typescript+iview表單驗證 this.$refs獲取問題VueTypeScriptView
- element-ui自定義表單校驗規則及常用表單校驗UI
- Laravel 的表單驗證 , 如何做到驗證並改變 ( 轉換 ) 資料 ?( 使用中介軟體 )Laravel
- vue+element-ui el-table元件內表單驗證問題VueUI元件
- Spring MVC from 表單接收二維陣列的問題SpringMVC陣列
- beego表達資料驗證Go
- Laravel POST 請求 API 介面,使用自定義表單驗證,驗證失敗跳轉回首頁的問題記錄LaravelAPI
- JavaScript 表單驗證JavaScript
- Laravel 表單驗證Laravel
- javascript表單驗證JavaScript
- bootstrap表單驗證boot
- bootstrapValidator 表單驗證boot
- antd 表單驗證
- laravel線上環境表單驗證重定向問題解決方案Laravel
- 如何優雅的使用 Angular 表單驗證Angular
- vxe-form table 表單使用資料校驗ORM
- element-ui的----el-form表單校驗巢狀表單校驗(表單多層巢狀)+el-table和el-form巢狀使用表單校驗UIORM巢狀
- 輸入表單驗證
- 路由表單驗證路由
- 表單required 必需驗證UI
- HTML 表單驗證概述HTML
- 表單驗證 regex:pattern
- vue+elementUI 複雜表單的驗證、資料提交方案VueUI
- element-ui 表單校驗 Rules 配置 常用黑科技UI
- vue表單驗證你真的會了嗎?元件之表單驗證(form)validateVue元件ORM
- 資料庫課程作業筆記 - 編寫表單驗證資料庫筆記
- Laravel 8 表單驗證丟擲異常返回 json 格式資料LaravelJSON
- 利用js編寫一個簡單的html表單驗證,驗證通過時提交資料(附原始碼)JSHTML原始碼
- Lumen 仿 Laravel 表單驗證Laravel