Compare commits

..

No commits in common. "d198f7f8670384e43f4e80360323b16b60e389ca" and "8b57d5501352ecae38c3db232e785ab8741a25f7" have entirely different histories.

2 changed files with 6 additions and 87 deletions

View File

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

View File

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