<template>
<view :class="classes.root">
<uni-forms ref="formRef" :modelValue="formData" :rules="formRules" validateTrigger="blur">
<uni-forms-item name="mobile">
<uni-easyinput v-model="formData.mobile" type="number" placeholder="请输入手机号" maxlength="11" />
</uni-forms-item>
<uni-forms-item name="sms_vcode">
<uni-easyinput v-model="formData.sms_vcode" type="number" placeholder="请输入验证码" maxlength="6">
<template #right>
<view :class="classes.vcode" @click="sendVcode">{{ vcodeText }}</view>
</template>
</uni-easyinput>
</uni-forms-item>
</uni-forms>
<view :class="classes.footer">
<button :class="classes.button" @click="doSubmit">立即登录</button>
</view>
</view>
</template>
<script setup>
import { createNamespace } from '@/utils/create.js';
import { setStorageSync, getStorageSync } from '@/utils/storage.js';
import { goBack } from '@/composables/useLoginJump.js';
import uploadData from '@/composables/useUploadInfo.js';
import { sendSms, smsLogin } from '@/apis/login';
import { loginCodeSubmitLog } from '@/datareport/loginLog.js';
const { bem } = createNamespace('child-login-form');
const classes = reactive({
root: computed(() => [bem()]),
vcode: computed(() => [bem('vcode', { disabled: isCountDown.value })]),
footer: computed(() => [bem('footer')]),
button: computed(() => [bem('button')])
});
const formData = reactive({
mobile: null,
sms_vcode: null
});
const formRules = reactive({
mobile: {
rules: [
{
required: true,
errorMessage: '请输入手机号'
},
{
validateFunction: function (rule, value, data, callback) {
if (0 < value.length && value.length < 11) {
callback('请输入正确的手机号');
}
return true;
}
}
]
},
sms_vcode: {
rules: [
{
required: true,
errorMessage: '请输入验证码'
},
{
validateFunction: function (rule, value, data, callback) {
if (0 < value.length && value.length < 6) {
callback('请输入正确的验证码');
}
return true;
}
}
]
}
});
const isCountDown = ref(false);
const counter = ref(59);
const btnText = ref('');
const timer = ref(null);
const startTimer = () => {
let _counter = counter.value;
let _timer;
isCountDown.value = true;
btnText.value = _counter;
_timer = setInterval(() => {
_counter--;
btnText.value = _counter;
if (_counter == 0) {
isCountDown.value = false;
clearInterval(_timer);
}
}, 1000);
timer.value = _timer;
};
const vcodeText = computed(() => {
return isCountDown.value ? `${btnText.value}s` : '获取验证码';
});
const sendVcode = () => {
// 倒计时中不能点击
if (isCountDown.value) return;
// 校验手机号
formRef.value
.validateField(['mobile'])
.then((res) => {
let data = {
mobile: formData.mobile
};
console.log('===获取验证码校验结果===', res);
// sendSms(data)
// .then((res) => {
// // 发送短信验证码,开始倒计时
// startTimer();
// })
// .catch((err) => {});
})
.catch((err) => {});
};
const formRef = ref('formRef');
const doSubmit = () => {
formRef.value
.validate()
.then((res) => {
// 登录
let extraData = JSON.parse(getStorageSync('allParams'));
let data = {
...formData,
...extraData
};
smsLogin(data)
.then((res) => {
// 返回上上页
res = res.data;
loginCodeSubmitLog();
uploadData(() => {
setStorageSync('isLogin', true);
setStorageSync('customer', res.customer);
setStorageSync('openid', res.openid);
setStorageSync('uid', res.uid);
goBack(2);
});
})
.catch((err) => {});
})
.catch((err) => {
console.log('err', err);
});
};
</script>
- 发布:2025-01-04 10:24
- 更新:2025-01-04 10:24
- 阅读:23
产品分类: uniapp/小程序/字节跳动
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 14.2.1 (23C71)
HBuilderX类型: 正式
HBuilderX版本号: 4.44
第三方开发者工具版本号: 4.3.3
基础库版本号: 3.49.0.7
项目创建方式: HBuilderX
示例代码:
操作步骤:
不填写手机号,直接点击获取验证码
不填写手机号,直接点击获取验证码
预期结果:
校验不通过,不能发送短信
校验不通过,不能发送短信
实际结果:
校验通过,触发了发短信接口
校验通过,触发了发短信接口
bug描述:
表单校验失效,不填写内容时,开发者工具、真机,返回校验通过。
uni-forms版本:1.4.13