Miniprograma de verificación de formularios, método de uso correcto y guía de errores
I. Introducción
El uso de formularios en subprogramas debería ser una función muy común y necesaria, debido a que el sistema usa uni-app, en este momento se usarán uniformes, pero se encuentran muchos problemas en el proceso de uso.
Aquí hay 3 requisitos:
- Verificación instantánea (valor de verificación inmediata cuando el cuadro de entrada está desenfocado)
- Se requieren reglas de validación personalizadas
- Se requiere verificación asincrónica
Si se cumplen estos tres requisitos, se puede realizar la mayor parte de la verificación del formulario, pero no basta con utilizar el caso oficial directamente. Después de superar muchos obstáculos, la solución final es la siguiente.
2. Visualización de resultados
Todas las siguientes pantallas cumplen con los tres requisitos anteriores y el siguiente código de muestra puede referirse directamente al sexto punto.
3. Verificación instantánea de uniformes
Para realizar la verificación instantánea, es necesario agregar uniformes validate-trigger="bind"y al mismo tiempo agregar entradas. @blur="binddata('字段名', $event.detail.value)"
Ejemplo:
<uni-forms ref="form" :modelValue="ruleForm" validate-trigger="bind">
<uni-forms-item label="账号" name="account">
<input v-model.trim="ruleForm.account"
@blur="binddata('account', $event.detail.value)"
placeholder="请输入您的登录账号" />
</uni-forms-item>
</uni-forms>
4. Reglas de verificación personalizadas uniformes
Cuando se requieren reglas de validación personalizadas, 去掉uni-forms的:rules，同时onReady里加this.$refs.form.setRules(this.rules)donde validarFunción: this.checkEmail es un método de validación personalizado.
Ejemplo:
<template>
<uni-forms ref="form" :modelValue="ruleForm" validate-trigger="bind">
......
</uni-forms>
</template>
<script>
export default {
data() {
return {
// 校验规则
rules: {
email: {
rules: [
{
validateFunction: this.checkEmail,
},
],
},
},
};
},
onReady() {
// 需要在onReady中设置规则
this.$refs.form.setRules(this.rules);
},
methods: {
/**
* 表单验证邮箱
*/
checkEmail(rule, value, allData, callback) {
if (value !== "" && !verifyEmail(value)) {
return callback("邮箱不正确");
}
callback();
},
},
};
</script>
Cinco, verificación asincrónica uniforme
Por lo general, utilice un método asincrónico para verificar si la cuenta está duplicada, etc., pasos:
- Primero, necesitas personalizar el método de validación.
validateFunction: this.checkAccount - Luego realice comprobaciones periódicas de las reglas.
- Luego use el método asincrónico para verificar la unicidad de la cuenta.
Debe usar Promise. Si se pasa la verificación, úsela. Sireturn resolve()
la verificación falla, úsela.return reject(new Error('错误提示信息'))
Ejemplo (parte del código principal):
export default {
data() {
return {
// 校验规则
rules: {
account: {
rules: [
{
required: true,
errorMessage: '请输入您的账号',
},
{
validateFunction: this.checkAccount,
},
],
},
},
};
},
methods: {
// 表单验证账号
checkAccount(rule, value) {
return new Promise((resolve, reject) => {
// 先进行规则校验
if (value === '' || !verifyAccount(value)) {
return reject(new Error('只能输入4-30位英文、数字、下划线'))
}
// 再进行异步校验，checkUser为本系统api异步方法，结合你系统使用你自己的方法
apiCheckAccount({
account: value })
.then((data) => {
if (data.exist) {
return reject(new Error('账号已存在'))
}
resolve()
})
.catch((err) => {
return reject(new Error(err.message))
})
})
},
},
6. Código fuente de muestra completo
<template>
<view class="register">
<view class="title">最实用表单校验</view>
<uni-forms ref="form" :modelValue="ruleForm" validate-trigger="bind" label-width="40">
<uni-forms-item label="账号" name="account">
<input v-model.trim="ruleForm.account" @blur="binddata('account', $event.detail.value)" placeholder="请输入您的登录账号" />
</uni-forms-item>
<uni-forms-item label="姓名" name="name">
<input v-model.trim="ruleForm.name" @blur="binddata('name', $event.detail.value)" placeholder="请输入您的姓名" />
</uni-forms-item>
<uni-forms-item class="form-item-center">
<button type="primary" @click="submit()">注册</button>
</uni-forms-item>
</uni-forms>
</view>
</template>
<script>
import {
apiCheckAccount } from '@/api'
import {
verifyAccount, verifyName } from '@/utils'
export default {
data() {
return {
// 表单数据
ruleForm: {
account: '', // 账号
name: '', // 姓名
},
rules: {
},
}
},
onReady() {
this.setRules()
// 需要在onReady中设置规则
this.$refs.form.setRules(this.rules)
},
methods: {
// 提交表单
submit() {
this.$refs.form
.validate()
.then(() => {
uni.showToast({
title: '注册成功！',
duration: 2000,
icon: 'success',
})
})
.catch((err) => {
console.log('表单校验失败：', err)
})
},
// 设置校验规则
setRules() {
this.rules = {
account: {
rules: [
{
required: true,
errorMessage: '请输入您的账号',
},
{
validateFunction: this.checkAccount,
},
],
},
name: {
rules: [
{
required: true,
errorMessage: '请输入您的姓名',
},
{
validateFunction: this.checkName,
},
],
},
}
},
// 验证账号
checkAccount(rule, value) {
return new Promise((resolve, reject) => {
// 先进行规则校验
if (value === '' || !verifyAccount(value)) {
return reject(new Error('只能输入4-30位英文、数字、下划线'))
}
// 再进行异步校验，checkUser为本系统api异步方法，结合你系统使用你自己的方法
apiCheckAccount({
account: value })
.then((data) => {
if (data.exist) {
return reject(new Error('账号已存在'))
}
resolve()
})
.catch((err) => {
return reject(new Error(err.message))
})
})
},
// 验证姓名
checkName(rule, value, allData, callback) {
if (!verifyName(value)) {
return callback('只能输入1-30位中英文和数字')
}
callback()
},
},
}
</script>
7. Finalmente, dale el visto bueno
Si te ayuda, dale me gusta y vete :)