Compare commits
No commits in common. "d198f7f8670384e43f4e80360323b16b60e389ca" and "8b57d5501352ecae38c3db232e785ab8741a25f7" have entirely different histories.
d198f7f867
...
8b57d55013
@ -1,94 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import "@/components/account/sign-in.css"
|
||||
import {reactive, ref} from 'vue'
|
||||
|
||||
const emit = defineEmits(['option'])
|
||||
const handleBack = () => {
|
||||
emit('option')
|
||||
}
|
||||
|
||||
import type {FormInstance, FormRules} from 'element-plus'
|
||||
import {Back} from "@element-plus/icons-vue";
|
||||
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
const validateEmail = (rule: any, value: string, callback: any) => {
|
||||
if (!value) {
|
||||
callback(new Error('请输入邮箱地址'))
|
||||
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
|
||||
callback(new Error('请输入有效的邮箱地址'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
const validatePass = (rule: any, value: any, callback: any) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入密码'))
|
||||
} else {
|
||||
if (ruleForm.checkPass !== '') {
|
||||
if (!ruleFormRef.value) return
|
||||
ruleFormRef.value.validateField('checkPass')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
const ruleForm = reactive({
|
||||
email: '',
|
||||
pass: '',
|
||||
})
|
||||
|
||||
const rules = reactive<FormRules<typeof ruleForm>>({
|
||||
email: [{validator:validateEmail,trigger:'blur'}],
|
||||
pass: [{validator: validatePass, trigger: 'blur'}],
|
||||
})
|
||||
|
||||
const submitForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
console.log('submit!')
|
||||
} else {
|
||||
console.log('error submit!')
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
style="max-width: 600px"
|
||||
:model="ruleForm"
|
||||
status-icon
|
||||
:rules="rules"
|
||||
label-width="auto"
|
||||
class="demo-ruleForm"
|
||||
>
|
||||
<el-form-item style="width:100%;">
|
||||
<!-- 返回-->
|
||||
<el-button :shouldAddSpace="true" class="ButtonState-left ButtonState" round @click="handleBack">
|
||||
<el-icon>
|
||||
<Back/>
|
||||
</el-icon>
|
||||
返回
|
||||
</el-button>
|
||||
<el-text>登录</el-text>
|
||||
</el-form-item>
|
||||
<el-form-item label="电子邮箱(Email)" prop="email">
|
||||
<el-input v-model="ruleForm.email" type="email" autocomplete="off"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码(Password)" prop="pass">
|
||||
<el-input v-model="ruleForm.pass" type="password" autocomplete="off"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width:100%;">
|
||||
<!-- 忘记密码-->
|
||||
<el-button key="ResetPassword" type="info" text style="height: 20px; margin: 0;padding: 0;">忘记密码?</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm(ruleFormRef)" style="height: 70px;">提交</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
in
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
@ -85,7 +85,7 @@ const submitForm = (formEl: FormInstance | undefined) => {
|
||||
</el-icon>
|
||||
返回
|
||||
</el-button>
|
||||
<el-text>注册</el-text>
|
||||
<el-text>登录</el-text>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名(UserID)" prop="userid">
|
||||
<el-input v-model="ruleForm.text" type="text" autocomplete="off"/>
|
||||
@ -99,6 +99,10 @@ const submitForm = (formEl: FormInstance | undefined) => {
|
||||
<el-form-item label="二次确认密码(CheckPass)" prop="checkPass">
|
||||
<el-input v-model="ruleForm.checkPass" type="password" autocomplete="off"/>
|
||||
</el-form-item>
|
||||
<el-form-item style="width:100%;">
|
||||
<!-- 忘记密码-->
|
||||
<el-button key="ResetPassword" type="info" text style="height: 20px; margin: 0;padding: 0;">忘记密码?</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm(ruleFormRef)" style="height: 70px;">提交</el-button>
|
||||
</el-form-item>
|
||||
|
Loading…
x
Reference in New Issue
Block a user