添加输入校验

src/views/user/components/adminInfo.vue

 <template>
   <div class="admin-detail-content">
     <Header title="管理员详情" />
-    <div class="input-box">
-      <van-field
-        label="管理员姓名"
-        :disabled="disabled"
-        v-model="form.userName"
-        placeholder="请输入管理员姓名"
-        input-align="right"
-      />
-      <van-field
-        label="手机号码"
-        :disabled="disabled"
-        v-model="form.phone"
-        placeholder="请输入手机号码"
-        input-align="right"
-      />
-      <van-field
-        label="固定电话"
-        :disabled="disabled"
-        v-model="form.telephone"
-        placeholder="请输入固定电话"
-        input-align="right"
-      />
-      <van-field
-        label="微信"
-        :disabled="disabled"
-        v-model="form.weChat"
-        placeholder="请输入微信"
-        input-align="right"
-      />
-      <van-field
-        label="邮箱"
-        :disabled="disabled"
-        v-model="form.email"
-        placeholder="请输入邮箱"
-        input-align="right"
-      />
-    </div>
-    <div class="admin-detail-button" v-if="!disabled">
-      <van-button type="default" plain @click="onCancel">取消</van-button>
-      <van-button type="default" @click="onSubmit">提交</van-button>
-    </div>
-    <div class="admin-detail-button cancel" v-if="disabled">
-      <van-button type="default" @click="onCancel">返回</van-button>
-    </div>
+    <van-form ref='form'>
+      <div class="input-box">
+        <van-field
+          label="管理员姓名"
+          :disabled="disabled"
+          v-model="form.userName"
+          placeholder="请输入管理员姓名"
+          input-align="right"
+        />
+        <van-field
+          label="手机号码"
+          :disabled="disabled"
+          v-model="form.phone"
+          placeholder="请输入手机号码"
+          input-align="right"
+          :rules="[
+              { required: true, message: '请填写您的手机号码！' },
+              { pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/, message: '手机号码格式错误！'}
+            ]"
+        />
+        <van-field
+          label="固定电话"
+          :disabled="disabled"
+          v-model="form.telephone"
+          placeholder="请输入固定电话"
+          input-align="right"
+          :rules="[
+              { required: true, message: '请填写您的固定电话！' },
+              { pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '固定电话格式错误！'}
+            ]"
+        />
+        <van-field
+          label="微信"
+          :disabled="disabled"
+          v-model="form.weChat"
+          placeholder="请输入微信"
+          input-align="right"
+          :rules="[
+              { required: true, message: '请填写您的微信号！' },
+              { pattern: /^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/, message: '微信号格式错误！'}
+            ]"
+          
+        />
+        <van-field
+          label="邮箱"
+          :disabled="disabled"
+          v-model="form.email"
+          placeholder="请输入邮箱"
+          input-align="right"
+          :rules="[
+              { required: true, message: '请填写您的邮箱！' },
+              { pattern: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/, message: '邮箱格式错误！'}
+            ]"
+        />
+      </div>
+      <div class="admin-detail-button" v-if="!disabled">
+        <van-button type="default" plain @click="onCancel">取消</van-button>
+        <van-button type="default" @click="onSubmit">提交</van-button>
+      </div>
+      <div class="admin-detail-button cancel" v-if="disabled">
+        <van-button type="default" @click="onCancel">返回</van-button>
+      </div>
+    </van-form>
   </div>
 </template>
 

src/views/user/components/commitTab.vue

@@ -55,7 +55,7 @@
           v-model="form.num"
           placeholder="请输入观影人数"
           input-align="right"
-          :rules="[{ pattern: /\d/, message: '请输入正确内容' }]"
+          :rules="[{ pattern: /^[1-9]\d*$/, message: '请输入正确内容' }]"
         />
         <van-field
           label="管理员账号"