feat: 新增表单验证
This commit is contained in:
parent
0f11e75bd4
commit
0434d12416
|
@ -53,29 +53,46 @@
|
|||
你已通过微信授权,完善以下登录信息即可以完成绑定
|
||||
</div>
|
||||
<div class="login-form">
|
||||
<a-form layout="vertical" :model="formData">
|
||||
<a-form-item label="账户">
|
||||
<a-form layout="vertical">
|
||||
<a-form-item
|
||||
label="账户"
|
||||
v-bind="validateInfos.username"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="formData.username"
|
||||
placeholder="请输入账户"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="密码">
|
||||
<a-form-item
|
||||
label="密码"
|
||||
v-bind="validateInfos.password"
|
||||
>
|
||||
<a-input-password
|
||||
v-model:value="formData.password"
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="验证码">
|
||||
<a-form-item
|
||||
label="验证码"
|
||||
v-bind="validateInfos.captcha"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="formData.captcha"
|
||||
placeholder="请输入验证码"
|
||||
>
|
||||
<template #addonAfter>图形验证码</template>
|
||||
<template #addonAfter>
|
||||
<span style="cursor: pointer">
|
||||
图形验证码
|
||||
</span>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button type="primary" style="width: 100%">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="handleSubmit"
|
||||
style="width: 100%"
|
||||
>
|
||||
登录并绑定账户
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
|
@ -89,6 +106,9 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { getImage } from '@/utils/comm';
|
||||
import { Form } from 'ant-design-vue';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
|
||||
interface formData {
|
||||
username: string;
|
||||
|
@ -100,9 +120,59 @@ const formData = ref<formData>({
|
|||
password: '',
|
||||
captcha: '',
|
||||
});
|
||||
const formRules = ref({
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入账户',
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入密码',
|
||||
},
|
||||
],
|
||||
captcha: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入验证码',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const { resetFields, validate, validateInfos } = useForm(
|
||||
formData.value,
|
||||
formRules.value,
|
||||
);
|
||||
|
||||
/**
|
||||
* 登录并绑定账户
|
||||
*/
|
||||
const handleSubmit = () => {
|
||||
validate()
|
||||
.then(() => {
|
||||
console.log('toRaw:', toRaw(formData.value));
|
||||
console.log('formData.value:', formData.value);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('error', err);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.page-container:deep {
|
||||
.ant-form-item-label
|
||||
> label.ant-form-item-required:not(
|
||||
.ant-form-item-required-mark-optional
|
||||
)::before {
|
||||
display: none;
|
||||
}
|
||||
.ant-form-item-label > label {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.page-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
|
Loading…
Reference in New Issue