uniapp手机号表单校验

<view class="main">
			<u-action-sheet :list="sexlist" v-model="sexShow" @click="actionSheetCallback"></u-action-sheet>
			<u-form :model="form" class="common-form" ref="uForm" :error-type="['border-bottom', 'border', 'toast']"
				label-width="180">
				<view class="w-title">基础信息</view>

				<view class="form-item">
					<u-form-item required label="姓名" prop="name">
						<u-input v-model="form.name" placeholder="请输入姓名" />
					</u-form-item>
					<u-form-item label="性别" prop="sex">
						<view class="full-w">
							<u-input placeholder="请选择性别" v-model="form.sexlabel" type="select"
								@click="sexShow = true" />
						</view>
					</u-form-item>
					<u-form-item required label="手机号码" prop="phone">
						<u-input v-model="form.phone" placeholder="请输入联系电话" type="number" maxlength="11" />
					</u-form-item>
					<u-form-item label="职务" prop="job">
						<u-input v-model="form.job" maxlength="20" placeholder="请输入职务" />
					</u-form-item>
				</view>
				<view class="w-title">备注</view>
				<view class="form-item">
					<u-form-item label="备注" label-position="top" :border-bottom="false" prop="remark">
						<view class="full-w">
							<u-input maxlength="50" v-model="form.remark" class="common-textarea" type="textarea"
								:border="false" :height="300" />
						</view>
					</u-form-item>
				</view>
			</u-form>
		</view>

		<view class="common-footer">
			<view class="text-c mg-b-15 tips">
				<u-checkbox icon-size="24" size="28" label-size="28" v-model="form.isDefault">设为默认联系人</u-checkbox>
			</view>
			<u-button @click="onSubmit" :loading="btnLoading" v-bind="$baseProps.button" size="default" class="full-w">
				确定</u-button>
		</view>
onSubmit() {
      this.$refs.uForm.validate(async (valid) => {
        if (valid) {
          this.btnLoading = true;

          try {
            let check = await ApiContactCheck({
              name: this.form.name,
              phone: this.form.phone,
              id: this.form.enterpriseId,
              contactsId: this.form.id || "",
            });
			if (!/^1[3456789]\d{9}$/.test(this.form.phone)) {
			  throw new Error("请输入正确的手机号");
			}
            if (!check.data.data) {
              throw new Error("姓名或手机号重复");
            }
			
            const Api = this.form.id ? ApiUpdateContacts : ApiAddContacts;
            Api({
              ...this.form,
              isDefault: this.form.isDefault ? "1" : "0",
            })
              .then((res) => {
                uni.navigateBack()
                // this.$flyrise.toast(res.data.msg)
              })
              .finally((_) => {
                this.btnLoading = false;
              });
          } catch (error) {
            this.btnLoading = false;
            this.$refs.uTips.show({
              title: error,
              type: "error",
            });
          }
        }
      });
    },

请求数据报405

debugger定位到对应函数

函数对应到固定接口

看请求预览

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1SZ2I7SS-1658761647499)(img/image-20220725161401466.png)]

message: “Request method ‘GET’ not supported”

不能用get,要用post,改成post就可以了

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐