光标离开时校验必填字段

components/plate-input/plate-input.wxss

@@ -2,9 +2,9 @@
 
 .plate-container {
   flex: 1;
-  position: relative;
   display: flex;
   align-items: center;
+  overflow: hidden;
 }
 
 /* 车牌格子区域 */
@@ -17,6 +17,8 @@
   padding: 8rpx 16rpx;
   height: 72rpx;
   flex: 1;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .plate-cell {
@@ -72,14 +74,11 @@
 
 /* 清除按钮 */
 .plate-clear {
-  position: absolute;
+  flex-shrink: 0;
-  right: -60rpx;
-  top: 50%;
-  transform: translateY(-50%);
   font-size: 24rpx;
   color: #ff4d4f;
   padding: 8rpx 12rpx;
-  flex-shrink: 0;
+  margin-left: 12rpx;
 }
 
 /* 弹窗遮罩 */

pages/appointment/appointment.js

@@ -29,7 +29,8 @@ Page({
     today: '',
     timeStart: '',
     timeEnd: '',
-    submitting: false
+    submitting: false,
+    fieldErrors: {}
   },
 
   onLoad() {
@@ -87,15 +88,19 @@ Page({
 
   onNameInput(e) {
     this.setData({ 'form.name': e.detail.value })
+    this._clearFieldError('name')
   },
   onPhoneInput(e) {
     this.setData({ 'form.phone': e.detail.value })
+    this._clearFieldError('phone')
   },
   onCompanyInput(e) {
     this.setData({ 'form.company': e.detail.value })
+    this._clearFieldError('company')
   },
   onReasonInput(e) {
     this.setData({ 'form.reason': e.detail.value })
+    this._clearFieldError('reason')
   },
   onHostNameInput(e) {
     this.setData({ 'form.hostName': e.detail.value })
@@ -104,6 +109,33 @@ Page({
     this.setData({ 'form.plateNumber': e.detail.value })
   },
 
+  onNameBlur() {
+    if (!this.data.form.name.trim()) {
+      this.setData({ 'fieldErrors.name': '姓名不能为空' })
+    }
+  },
+  onPhoneBlur() {
+    if (!this.data.form.phone.trim()) {
+      this.setData({ 'fieldErrors.phone': '手机号不能为空' })
+    }
+  },
+  onCompanyBlur() {
+    if (!this.data.form.company.trim()) {
+      this.setData({ 'fieldErrors.company': '公司不能为空' })
+    }
+  },
+  onReasonBlur() {
+    if (!this.data.form.reason.trim()) {
+      this.setData({ 'fieldErrors.reason': '来访事由不能为空' })
+    }
+  },
+
+  _clearFieldError(field) {
+    if (this.data.fieldErrors[field]) {
+      this.setData({ ['fieldErrors.' + field]: '' })
+    }
+  },
+
   onAreaChange(e) {
     const index = Number(e.detail.value)
     const department = this.data.departments[index]
@@ -173,7 +205,12 @@ Page({
   _updateTimeRange() {
     const { timeStart, timeEnd } = this.data
     if (timeStart && timeEnd) {
-      this.setData({ 'form.time': timeStart + '-' + timeEnd })
+      if (timeEnd <= timeStart) {
+        this.setData({ 'form.time': '', 'fieldErrors.timeRange': '结束时间必须晚于开始时间' })
+        wx.showToast({ title: '结束时间必须晚于开始时间', icon: 'none' })
+        return
+      }
+      this.setData({ 'form.time': timeStart + '-' + timeEnd, 'fieldErrors.timeRange': '' })
     } else {
       this.setData({ 'form.time': '' })
     }

pages/appointment/appointment.wxml

@@ -5,19 +5,31 @@
     <view class="section-title">预约人信息</view>
     <view class="form-group">
       <text class="form-label">姓名<text class="required">*</text></text>
-      <input class="form-input" placeholder="请输入访客姓名" value="{{form.name}}" bindinput="onNameInput" />
+      <view class="form-field-wrap">
+        <input class="form-input {{fieldErrors.name ? 'form-input-error' : ''}}" placeholder="请输入访客姓名" value="{{form.name}}" bindinput="onNameInput" bindblur="onNameBlur" />
+        <text wx:if="{{fieldErrors.name}}" class="form-error">{{fieldErrors.name}}</text>
+      </view>
     </view>
     <view class="form-group">
       <text class="form-label">手机号<text class="required">*</text></text>
-      <input class="form-input" type="number" maxlength="11" placeholder="请输入手机号" value="{{form.phone}}" bindinput="onPhoneInput" />
+      <view class="form-field-wrap">
+        <input class="form-input {{fieldErrors.phone ? 'form-input-error' : ''}}" type="number" maxlength="11" placeholder="请输入手机号" value="{{form.phone}}" bindinput="onPhoneInput" bindblur="onPhoneBlur" />
+        <text wx:if="{{fieldErrors.phone}}" class="form-error">{{fieldErrors.phone}}</text>
+      </view>
     </view>
     <view class="form-group">
       <text class="form-label">公司<text class="required">*</text></text>
-      <input class="form-input" placeholder="请输入所属公司" value="{{form.company}}" bindinput="onCompanyInput" />
+      <view class="form-field-wrap">
+        <input class="form-input {{fieldErrors.company ? 'form-input-error' : ''}}" placeholder="请输入所属公司" value="{{form.company}}" bindinput="onCompanyInput" bindblur="onCompanyBlur" />
+        <text wx:if="{{fieldErrors.company}}" class="form-error">{{fieldErrors.company}}</text>
+      </view>
     </view>
     <view class="form-group">
       <text class="form-label">来访事由<text class="required">*</text></text>
-      <input class="form-input" placeholder="请输入来访事由" value="{{form.reason}}" bindinput="onReasonInput" />
+      <view class="form-field-wrap">
+        <input class="form-input {{fieldErrors.reason ? 'form-input-error' : ''}}" placeholder="请输入来访事由" value="{{form.reason}}" bindinput="onReasonInput" bindblur="onReasonBlur" />
+        <text wx:if="{{fieldErrors.reason}}" class="form-error">{{fieldErrors.reason}}</text>
+      </view>
     </view>
     <view class="form-group">
       <text class="form-label">车牌号</text>
@@ -39,6 +51,7 @@
     </view>
     <view class="form-group form-group-time">
       <text class="form-label">来访时段<text class="required">*</text></text>
+      <view class="form-field-wrap">
         <view class="time-range">
           <picker class="time-picker-wrap" mode="time" value="{{timeStart}}" bindchange="onTimeStartChange">
             <view class="time-picker">
@@ -52,6 +65,8 @@
             </view>
           </picker>
         </view>
+        <text wx:if="{{fieldErrors.timeRange}}" class="form-error">{{fieldErrors.timeRange}}</text>
+      </view>
     </view>
   </view>
 

pages/appointment/appointment.wxss

@@ -41,6 +41,11 @@ page {
   flex-wrap: wrap;
 }
 
+.form-field-wrap {
+  flex: 1;
+  min-width: 0;
+}
+
 .time-range {
   flex: 1;
   display: flex;
@@ -158,3 +163,13 @@ page {
   color: #94aec5;
   box-shadow: none;
 }
+
+.form-input-error {
+  color: #ff4d4f;
+}
+
+.form-error {
+  font-size: 22rpx;
+  color: #ff4d4f;
+  padding-top: 4rpx;
+}