<template>
<el-form :model="loginForm" :rules="formRules" ref="loginFormRef" label-position="right" label-width="60px" status-icon>
<el-form-item label="账户" prop="username">
<el-input v-model="loginForm.username" placeholder="请输入手机号" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="loginForm.password" placeholder="请输入密码"/>
</el-form-item>
<el-form-item label-width="22px" prop="agree">
<el-checkbox size="large" v-model="loginForm.agree">
我已同意隐私条款和服务条款
</el-checkbox>
</el-form-item>
<el-button size="large" class="subBtn" @click="login(loginFormRef)">点击登录</el-button>
</el-form>
</template>
<script setup>
// 表单对象
import { reactive, ref } from "vue";
import { ElMessage } from 'element-plus'
const loginForm = reactive({
username: '',
password: '',
agree: true
});
// 规则对象
/**
* 自定义校验函数 - 参数介绍
* @param { any } rule 当前对应的规则
* @param { any } value 对应文本框的值
* @param { any } callback 回调函数,不管是否通过校验,都必须执行
*/
const validatorUsername = (rule, value, callback) => {
if (!/^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/.test(value)) return callback(new Error("请输入正确格式的手机号!"));
callback();
};
const validatorPwd = (rule, value, callback) => {
// 检验密码强度
if (/\d/.test(value) && /[a-z]/.test(value) && /[A-Z]/.test(value)) return callback();
callback( new Error("密码强度较弱,请输入带有 大写字母、小写字母、数字三种字符组合的密码!"));
};
const formRules = {
username: [
// required - 是否必填
// message - 校验不通过的提示信息
// trigger - 校验的触发方式【blur - 失去焦点触发;change - v-model绑定的值改变触发】
{ required: true, message: '用户名不能为空', trigger: 'blur' },
// validator - 自定义校验规则
{ validator: validatorUsername, trigger: 'blur' }
],
password: [
{ required: true, message: '密码不能为空', trigger: 'blur' },
// min - 最小长度
// max - 最大长度
{ min: 6, max: 14, message: '密码长度为 6~14 个字符', trigger: 'blur' },
{ validator: validatorPwd, triger: 'blur' }
],
agree: [
// 自定义校验规则
{ validator: (rule, value, callback) => {
if (!value)
return callback(new Error('请勾选同意协议!'));
callback();
},
triger: 'change'
}
]
};
// TODO 表单整体校验 + 登录
const loginFormRef = ref(null);
const login = () => {
loginFormRef.value.validate((valid) => {
if (valid) {
ElMessage({message: '登录成功',type: 'success'})
} else {
ElMessage({message: '登录失败',type: 'error'})
}
});
};
</script>
在线验证 => 网站
(网站进去有点慢)
用上面的代码覆盖App.vue