<div class="registerWarp">
<el-form
label-position="top"
label-width="100px"
:model="form"
ref="ruleFormRef"
:rules="rulesForm"
hide-required-asterisk
class="register-form"
>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="电子邮箱" />
</el-form-item>
<el-form-item label="密码" prop="pwd">
<el-input
v-model="form.pwd"
type="password"
show-password
placeholder="登录密码"
/>
</el-form-item>
<el-form-item>
<template #label>
<div class="item-label">
<span>填写邀请ID（选填）</span>
<img
:class="{ active: isIdShow }"
@click="isIdShow = !isIdShow"
src="@/assets/images/register/right-jian.svg"
/>
</div>
</template>
<el-input
v-show="isIdShow"
v-model="form.idkey"
placeholder="填写邀请用户ID"
/>
</el-form-item>
<el-form-item>
<div class="form-bottom">
<div class="promise">
点击注册即表示同意<span>服务协议</span>和<span>隐私条款</span>
</div>
<div class="submit-btn">注册</div>
<div class="switch-login">已有账户？<span>去登录</span></div>
</div>
</el-form-item>
</el-form>
</div><script setup>
import { ref, reactive } from 'vue';
const isIdShow = ref(false);
const ruleFormRef = ref(null);
const form = reactive({
email: '',
pwd: '',
idkey: ''
});
const validatePwd = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入密码'));
}
callback();
};
const rulesForm = reactive({
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '邮箱输入格式错误', trigger: 'blur' }
],
pwd: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 24, message: '密码长度为6-24个字符', trigger: 'blur' },
{
pattern:
/^(?=.*[A-Z])(?=.*\d)(?=.*[~`!@#$%^&*()_\-\+={}0|;;<>.?/])[A-Za-z\d~`!@#$%^&*()_\-\+={}0|;;<>.?/]*$/,
message: '密码必须包含至少一个大写字母、一个数字、一个特殊字符',
trigger: 'blur'
}
//自定义校验规则
// {required: true, message: '请输入密码', trigger: 'blur',validator: validatePwd}
]
});
</script>我们使用
el-form组件创建了一个表单，其中的密码输入框使用了el-input组件，并设置了type属性为"password"。然后，在
formRules中定义了验证规则，包括required: true表示必填项，min: 6, max: 24表示密码长度为6-24个字符，pattern使用正则表达式来校验密码是否包含至少一个大写字母、一个数字、一个特殊字符。最后，在提交表单时，通过调用
this.$refs.form.validate方法进行表单校验，如果校验通过，则执行提交逻辑；如果校验不通过，则会自动显示相应的错误提示信息。
<script setup>
import { ref, reactive } from 'vue';
import NormalHeader from '@/components/NormalHeader/index.vue';
const isIdShow = ref(false);
const ruleFormRef = ref(null);
const form = reactive({
email: '',
pwd: '',
idkey: ''
});
const validateUppercase = (rule, value, callback) => {
if (!/[A-Z]/.test(value)) {
callback(new Error('密码必须包含至少一个大写字母'));
} else {
callback();
}
};
const validateNumber = (rule, value, callback) => {
if (!/\d/.test(value)) {
callback(new Error('密码必须包含至少一个数字'));
} else {
callback();
}
};
const validateSpecialCharacter = (rule, value, callback) => {
if (!/[~`!@#$%^&*()_\-+={}0|;;<>.?/]/.test(value)) {
callback(new Error('密码必须包含至少一个特殊字符'));
} else {
callback();
}
};
const rulesForm = reactive({
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '邮箱输入格式错误', trigger: 'blur' }
],
pwd: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 24, message: '密码长度为6-24个字符', trigger: 'blur' },
{ validator: validateUppercase, trigger: 'blur' },
{ validator: validateNumber, trigger: 'blur' },
{ validator: validateSpecialCharacter, trigger: 'blur' }
// {
// pattern:
// /^(?=.*[A-Z])(?=.*\d)(?=.*[~`!@#$%^&*()_\-\+={}0|;;<>.?/])[A-Za-z\d~`!@#$%^&*()_\-\+={}0|;;<>.?/]*$/,
// message: '密码必须包含至少一个大写字母、一个数字、一个特殊字符',
// trigger: 'blur'
// }
]
});
</script>在上述示例中，我们将每个密码条件分别定义为单独的校验规则。使用
validator属性来指定自定义的校验方法，其中validateUppercase方法用于校验是否包含至少一个大写字母，validateNumber方法用于校验是否包含至少一个数字，validateSpecialCharacter方法用于校验是否包含至少一个特殊字符。在校验方法中，如果条件不满足，我们调用
callback函数传递一个错误对象，否则调用callback函数传递空参数表示校验通过。最后，在提交表单时，通过调用
this.$refs.form.validate方法进行表单校验，依次触发每个校验规则。
