feat: 新增表单验证

This commit is contained in:
JiangQiming 2023-01-10 10:27:40 +08:00
parent 0f11e75bd4
commit 0434d12416
1 changed files with 76 additions and 6 deletions

View File

@ -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;