文章摘要
这篇文章介绍了一个基于前端技术的表单组件和JavaScript代码实现。主要内容包括：
1. **表单组件**：使用martial.js和uForm框架定义了一个表单，包含五个字段：
- 姓名
- 服务时间
- 服务地址
- 联系电话
- 需求描述
2. **字段验证**：表单对多个字段进行了验证：
- 姓名是必填字段，缺少时会提示“请填写您的姓名”。
- 服务时间是必选选项，缺少时会显示“请选择服务时间”。
- 联系电话和需求描述也是必填字段，缺少时会提示相关错误信息。
3. **服务时间选择**：通过u-picker组件选择服务时间，并将其整合到表单中。
4. **表单提交处理**：当用户提交表单时，JavaScript代码会：
- 调用`timeShow`组件获取服务时间。
- 发送表单数据到后端。
- 提交成功时显示Toast提示“提交成功”。
- 提交失败时显示Toast提示“提交失败”。
5. **错误处理**：表单验证失败时会显示Toast提示，确保用户知道哪里出错。
总结而言，这篇文章展示了如何使用前端技术构建一个功能完善且带有验证机制的表单系统。
<template>
<view>
<view class=”setp”>
<publishStep :list=”setpList” :current=”0″ mode=”number” active-color=”#eb3572″></publishStep>
</view>
<view class=”container”>
<u-form :model=”form” ref=”uForm” :rules=”rules” :error-type=”errorType”>
<u-form-item label=”姓名” label-width=”160rpx” :border-bottom=”true” :label-style=”{‘font-size’:’28rpx’}” prop=”realName”>
<u-input v-model=”form.realName” placeholder=”” input-align=”right” />
</u-form-item>
<u-form-item label=”服务时间” label-width=”160rpx” :border-bottom=”true” :label-style=”{‘font-size’:’28rpx’}”
right-icon=”arrow-right” prop=”serviceTime”>
<u-input v-model=”form.serviceTime” placeholder=”请选择服务时间” :disabled=”true” input-align=”right” @click=”timeShow=true” />
</u-form-item>
<u-form-item label=”服务地址” label-width=”160rpx” :border-bottom=”true” :label-style=”{‘font-size’:’28rpx’}” prop=”serviceAddress”>
<u-input v-model=”form.serviceAddress” placeholder=”” input-align=”right” @click=”selectAddress” />
</u-form-item>
<u-form-item label=”联系电话” label-width=”160rpx” :border-bottom=”true” :label-style=”{‘font-size’:’28rpx’}”
prop=”lxtel”>
<u-input v-model=”form.lxtel” type=”number” placeholder=”请输入联系电话” input-align=”right” :clearable=”false” />
</u-form-item>
<u-form-item label=”需求描述” label-width=”160rpx” :border-bottom=”true” :label-style=”{‘font-size’:’28rpx’}”
prop=”remarks”>
<u-input v-model=”form.remarks” type=”text” placeholder=”请输入您的需求” input-align=”right” :clearable=”false” />
</u-form-item>
</u-form>
</view>
<view style=”height: 160rpx;”></view>
<view class=”bottom_nav”>
<view class=”buttom_box padding-horizontal-20 padding-vertical-10″>
<u-button type=”error” @click=”submitForm” :loading=”submit_loading” style=”height: 100rpx; font-weight: bold; font-size: 36rpx;”>确认提交</u-button>
</view>
</view>
<u-picker mode=”time” v-model=”timeShow” :params=”timeParams” @confirm=”timeConfirm”></u-picker>
</view>
</template>
<script>
export default {
data() {
return {
form:{
realName:””,
serviceTime:”,
serviceAddress:””,
lxtel:””,
remarks:””
},
rules:{
realName: [{
required: true,
message: “请填写您的姓名”,
trigger: ‘change’
}],
serviceTime: [{
required: true,
message: “请选择服务时间”,
trigger: ‘change’
}],
lxtel: [{
required: true,
message: “请输入联系电话”,
trigger: ‘change’
}],
},
errorType: [‘toast’],
timeShow:false,
timeParams:{
year: true,
month: true,
day: true,
hour: false,
minute: false,
second: false
},
submit_loading:false,
}
},
onReady() {
this.$refs.uForm.setRules(this.rules);
},
onLoad(params) {
let that=this;
},
methods: {
timeConfirm(e){
let that=this;
that.form.serviceTime=e.year +”-“+e.month+”-“+e.day
},
gotoOrder(){
uni.redirectTo({
url:”/pages/order/order”
})
},
submitForm(){
let that=this;
this.$refs.uForm.validate(valid=>{
if (valid){
that.$u.api.submit_order(that.form).then(res=> {
if (res.success) {
let data=res.data;
uni.showToast({
title: ‘提交成功’,
icon: ‘success’
})
// #ifdef MP-WEIXIN
uni.requestSubscribeMessage({
tmplIds:[‘XXXXXXXXXXX’], //这里填写tempid
success:function(subscribeMessageRes){
if(subscribeMessageRes.errMsg==”requestSubscribeMessage:ok”){
if(subscribeMessageRes.XXXXXXXXXXX==”accept”){
uni.login({
provider: ‘weixin’,
success:function(loginRes){
if(loginRes.errMsg==”login:ok”){
const code=loginRes.code;
that.$u.api.sendSubscribeMessage({
“code”:code,
“orderId”:data.orderId
}).then(res=>{
that.gotoOrder()
})
}else{
that.gotoOrder()
}
},
fail() {
that.gotoOrder()
}
})
}else{
that.gotoOrder()
}
}else{
that.gotoOrder()
}
},
fail:function(){
that.gotoOrder()
}
})
// #endif
} else {
uni.$u.toast(res.message);
}
});
}
})
}
}
}
</script>
<style>
.setp{ padding: 40rpx 0;}
.bottom_nav {
position: fixed;
width: 100%;
height: 100rpx;
left: 0;
bottom: 0;
z-index: 9999;
background: #FFFFFF;
border-top: 1rpx #f3f3f3 solid;
}
</style>