93 lines
2.1 KiB
Vue
93 lines
2.1 KiB
Vue
<template>
|
|
<view>
|
|
<view class="form-area">
|
|
<uni-forms ref="driverForm" :rules="rules" :modelValue="driverFormData" label-position="top">
|
|
<uni-forms-item required name="name" label="机手姓名" label-width="150">
|
|
<uni-easyinput placeholder="请输入" v-model="driverFormData.name"></uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item required name="tel" label="机手电话" label-width="150">
|
|
<uni-easyinput placeholder="请输入" v-model="driverFormData.tel"></uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item required name="age" label="年龄" label-width="150">
|
|
<uni-easyinput placeholder="请输入" type="number" v-model="driverFormData.age"></uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item required name="idCard" label="身份证号" label-width="150">
|
|
<uni-easyinput placeholder="请输入" type="number" v-model="driverFormData.idCard"></uni-easyinput>
|
|
</uni-forms-item>
|
|
<button @click="subForm">提交</button>
|
|
</uni-forms>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
driverFormData: {
|
|
name: '',
|
|
tel: '',
|
|
age: '',
|
|
idCard: ''
|
|
},
|
|
rules: {
|
|
name: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: '请填写机手姓名！'
|
|
}
|
|
]
|
|
},
|
|
tel: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: '请填写机手电话！'
|
|
}
|
|
]
|
|
},
|
|
age: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: '请填写年龄！'
|
|
}
|
|
]
|
|
},
|
|
idCard: {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
errorMessage: '请填写身份证号！'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
subForm () {
|
|
let that = this
|
|
this.$refs.driverForm.validate().then(formData => {
|
|
console.log(formData);
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
body{
|
|
background-color: #F3F3F3;
|
|
}
|
|
.form-area{
|
|
width: 95%;
|
|
margin: 20rpx auto;
|
|
background-color: #fff;
|
|
border-radius: 15rpx;
|
|
box-sizing: border-box;
|
|
padding: 20rpx;
|
|
}
|
|
</style>
|