Directorio de artículos
1. Requisitos de validación de formularios
1.1 Verificación del activador de la acción
El más comúnmente utilizado es marcar un solo cuadro de entrada cuando el cursor sale del cuadro de entrada, de la siguiente manera:
1.2 Haga clic en el botón para verificar
Otra es verificar todo el formulario cuando se hace clic en el botón, por ejemplo, al iniciar sesión, verificar si todo el contenido de entrada del formulario es legal. Cuando sea ilegal, muestre información de solicitud de Toast.
2. Date cuenta
usandoInterfaz de usuario frontal, otros marcos comoElemento-plusTambién es una verdad:
2.1 Realizar verificación de casilla de entrada única
Necesita agregar al cuadro de entrada:
- Agregue uno
rules, el contenido dentro es una lista de reglas, hay dos tipos principales, uno es通过正则校验y el otro es通过自定义验证器校验 - Agregue
nameun atributo, el valor es el nombre del objeto de verificación correspondiente
descripción de las reglas:
- patrón: verifique por expresión regular, si la expresión regular no puede coincidir, significa que la verificación falla
- mensaje: copia de solicitud de error, que se puede configurar como una función para devolver contenido de copia dinámica
- validador: validar a través de una función, que puede devolver una promesa para la validación asíncrona
- desencadenar: establezca el tiempo de activación de esta regla. La prioridad es mayor que el atributo de activación de validación establecido por el componente Formulario. Los valores opcionales son onChange, onBlur y onSubmit. El valor predeterminado es
onBlur, es decir, se activa cuando el cursor se va.
<van-form ref="loginFormRef">
<van-cell-group inset>
<!-- 通过 pattern 进行正则校验 -->
<van-field v-model="formData.email" label="邮箱" name="emailPattern" placeholder="请输入邮箱"
:rules="[{ pattern: emailPattern, message: '请输入正确邮箱' }]" />
<!-- 通过 validator 进行函数校验 -->
<van-field v-model="formData.password" label="密码" name="passwordValidator" placeholder="请输入密码" type="password"
:rules="[{ validator: passwordValidator, message: '密码应为字母，数字，特殊符号，两种及以上组合，8-16位字符串' }]" />
</van-cell-group>
</van-form>
<script setup>
// 校验函数返回 true 表示校验通过，false 表示不通过
const emailPattern = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
const passwordValidator = (val) => /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*()_.]+)$)^[\w~!@#$%^&*()_.]{6,20}$/.test(val);
</script>
2.2 Verificación general al hacer clic en el botón
FormAgregar a la etiqueta ref, scriptdefinir el objeto en, agregar al botón @clicky activar la función cuando se hace clic
En la función, use ref中的对象.value?validate()la validación.
validate()Sin parámetros en la validación por defecto de todo el formulario
<van-form ref="loginFormRef">
<van-button round block type="primary" @click="handleLogin">登录 </van-button>
</van-form>
<script setup>
const loginFormRef = ref();
function handleLogin() {
loginFormRef.value?.validate(['emailPattern', 'passwordValidator']).then(() => {
// 验证通过
}).catch((err) => {
//验证失败
showFailToast('请正确填写信息');
})
}
</script>
3. Código completo
<template >
<div class="page_wrap">
<div class="form_wrap">
<van-row>
<van-col span="24" style="font-size: 30px;text-align: center;margin: 0 0 30px 0;">{
{ pageName }}</van-col>
</van-row>
<hr style="margin-top: -20px;">
<van-row style="padding: 20px 15px;margin-top: -10px;" justify="space-between">
<van-col span="11"><van-button plain type="primary" style="width:95%"
@click="changePageName('求职人员登录')">求职人员登录</van-button></van-col>
<van-col span="11"><van-button plain type="primary" style="width:95%"
@click="changePageName('招聘人员登录')">招聘人员登录</van-button></van-col>
</van-row>
<van-form ref="loginFormRef">
<van-cell-group inset>
<!-- 通过 pattern 进行正则校验 -->
<van-field v-model="formData.email" label="邮箱" name="emailPattern" placeholder="请输入邮箱"
:rules="[{ pattern: emailPattern, message: '请输入正确邮箱' }]" />
<!-- 通过 validator 进行函数校验 -->
<van-field v-model="formData.password" label="密码" name="passwordValidator" placeholder="请输入密码"
autocomplete="false" type="password"
:rules="[{ validator: passwordValidator, message: '密码应为字母，数字，特殊符号，两种及以上组合，8-16位字符串' }]" />
</van-cell-group>
<van-row style="padding: 20px 15px;margin-top: 10px;">
<van-col span="24">
<p class="forgetPassword" align="right" style="cursor: pointer;"
@click="router.push('/resetpassword')">忘记密码？</p>
</van-col>
</van-row>
<div style="margin-top: -30px;padding:0 15px; 0 15px">
<van-button round block type="primary" @click="handleLogin">登录 </van-button>
<van-button round block plain style="margin-top: 10px;" @click="router.push('/register')">注册</van-button>
</div>
</van-form>
</div>
</div>
</template>
<script setup>
import {
ref, reactive } from 'vue';
import {
showFailToast, showLoadingToast } from 'vant';
import router from '@/router';
import {
login } from '@/utils/request';
import store from '@/store';
const loginFormRef = ref();
const pageName = ref('求职人员登录');
const formData = reactive({
email: '',
password: '',
roleName: '求职者'
})
// 校验函数返回 true 表示校验通过，false 表示不通过
const emailPattern = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
const passwordValidator = (val) => /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*()_.]+)$)^[\w~!@#$%^&*()_.]{6,20}$/.test(val);
function changePageName(name) {
pageName.value = name
if ('求职人员登录' == name) {
formData.roleName = '求职者'
} else {
formData.roleName = '招聘者'
}
}
function handleLogin() {
loginFormRef.value?.validate(['emailPattern', 'passwordValidator']).then(() => {
// 验证通过
login(formData).then(res => {
if (res.data.code == 200) {
// 响应成功
} else {
// 响应失败
showFailToast(res.data.message || '服务器出错')
}
})
}).catch((err) => {
//验证失败
showFailToast('请正确填写信息');
})
}
</script>