光标离开时校验必填字段

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': '' })
     }