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
- element-ui表單驗證輸入空格也能驗證通過UI
- 使用表單驗證,建立資料驗證層,Ajax 統一返回驗證錯誤資訊
- iview表單驗證問題 Select驗證必填失敗,以及表單物件巢狀陣列驗證方法View物件巢狀陣列
- JavaWeb——驗證碼功能解決表單重複提交問題(使用谷歌驗證碼jar包為例)JavaWeb谷歌JAR
- angular中的表單資料自定義驗證Angular
- 表單驗證使用擴充套件套件
- element-ui自定義表單校驗規則及常用表單校驗UI
- vue+typescript+iview表單驗證 this.$refs獲取問題VueTypeScriptView
- Laravel 的表單驗證 , 如何做到驗證並改變 ( 轉換 ) 資料 ?( 使用中介軟體 )Laravel
- PHP 表單提交後臺資料驗證 ValidatorPHP
- JavaScript 表單及表單驗證JavaScript
- SpringMVC表單驗證器的使用SpringMVC
- js表單驗證和各種資料驗證正規表示式外掛JS
- beego表達資料驗證Go
- bootstrap表單驗證boot
- javascript表單驗證JavaScript
- Laravel 表單驗證Laravel
- JavaScript 表單驗證JavaScript
- Django表單驗證Django
- jquery 表單驗證jQuery
- Js表單驗證JS
- laravel線上環境表單驗證重定向問題解決方案Laravel
- vue+element-ui el-table元件內表單驗證問題VueUI元件
- Laravel POST 請求 API 介面,使用自定義表單驗證,驗證失敗跳轉回首頁的問題記錄LaravelAPI
- 關於表的資料塊驗證 DUMP 工具 使用
- 如何優雅的使用 Angular 表單驗證Angular
- 如何使用angularjs實現表單驗證AngularJS
- 表單required 必需驗證UI
- HTML 表單驗證概述HTML
- bootstrapValidator 表單驗證boot
- 表單驗證——筆記筆記
- angularjs表單驗證AngularJS
- JavaScript表單驗證事件JavaScript事件
- ElementUi rules表單驗證UI
- 表單驗證<AngularJs>AngularJS