其他分享
首页 > 其他分享> > 聊一聊实际项目中输入框的校验的几种优化方案

聊一聊实际项目中输入框的校验的几种优化方案

作者:互联网

前言


表单控件,可以说是在前端所有控件中的绝对的基石之一,几乎任何网站都逃脱不了增、删、改、查这个四个基础接口,而为了实现这四个接口对应的功能,在前端几乎必不可少的就是需要输入框来做一些数据的输入和选择 ,比如新增用户时的用户名、密码、地址等等,而为了验证输入信息的有效性,自然就有了对输入信息的校验;

有的小伙伴可能会说,信息的校验不应该是后台在做吗?确实是,不可否认的是后台确实需要做信息的校验,但是如果验证仅仅是在后端做,那么是不是在体验上会有很大的问题,比如:用户名,用户名仅允许数字加字母,如果仅仅是这种验证就需要发送到后台去验证一下,那也太不科学了,而且万一网络不好,或者一些其他原因接口返回的比较慢,那用户体验就会非常差,因此,不可避免的前台也需要做校验, 你想,如果用户输入的内容不合法,在下一秒就可以直接得到错误反馈,那么是不是在体验上就得到了大幅的提升…

先看一下基础用法,也是现在非常绝大多数基于UI框架采用的方式

基础用法
我们项目中的UI框架基本都是使用的IView,其实包括ElemenUI在内的这两者的表单验证都是使用的async-validator,先看一下IView官网的例子,

<template>
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="Name" prop="name">
            <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
        </FormItem>
        <FormItem label="E-mail" prop="mail">
            <Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
        </FormItem>
    </Form>
</template>
<script>
    export default {
        data () {
            return {
                formValidate: {
                    name: '',
                    mail: '',
                },
                ruleValidate: {
                    name: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ],
                    mail: [
                        { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
                        { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
                    ]
                }
            }
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
这是官网的例子,裁剪了一部分代码,原版代码太多了,在这次查看的项目中同样发现了大量这种较为基础的用法,这种用法对对于需要在一个界面上放十几个输入框的设计,会存在大量重复rules代码,并且重复的量还特别太夸张,比如,我增见到过一个弹窗,光是输入框就将近15个,写了光是这个ruleValidate就写了100多行…直呼牛皮…

可能有很多小伙伴发现,这种写法中除了message提示的信息海口椰城医院,其它配置都是完全一致的,从共性抽离的角度来讲,那不是完全可以抽离?

优化
方式一:抽离公共函数
既然是优化,那么首先需要确认的就是可优化点,正如上面所说,经过分析发现,大量输入框的校验只有一种,必输项,换个说法就是这个输入框必须输入,除此之外没有别的限制,但是仅仅这一个需求,最后可能演变的代码就变成了这样:

 ruleValidate: {
    name: [
        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
    ],
    mail: [
        { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' }
    ],
    city: [
        { required: true, message: 'Please select the city', trigger: 'blur' }
    ],
    gender: [
        { required: true, message: 'Please select gender', trigger: 'blur' }
    ],
    desc: [
        { required: true, message: 'Please enter a personal introduction', trigger: 'blur' }
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
其实完全没有必要,不同数组之间最大的区别也就是提示的文字不同,我们完全可以抽离一个公共函数来做统一处理,比如,我们期望改完后关于验证是这么写的:

 ruleValidate: {
    name: Validate("The name cannot be empty"),
    mail: Validate("Mailbox cannot be empty"),
    city: Validate("Please select the city"),
    gender: Validate("Please select gender"),
    desc: Validate("Please enter a personal introduction")
}
1
2
3
4
5
6
7
这不比每一次校验输入一个数组,每一次都要写一遍来的轻松,而且实现也并不复杂,最简单的如下:

function Validate(msg)(
    return [
       { required: true, message: msg, trigger: 'blur' }
  ]
)
1
2
3
4
5
有的小伙伴可能会说,这不行啊这使用场景太局限了,就只能验证必输项,太鸡肋…到这里仅仅是抛砖引玉,只是提供了个思路,在实用性上还是有很大缺陷的,如果有小伙伴希望能具体细聊一下,那我们就简单说下,一般常规的验证规则大致可以分为以下几种:

仅必输项,无其他验证规则;
仅允许英文字母;
仅允许数字;
仅允许英文字母和数字;
那我们就预设几个参数,分别对应:提示信息,是否必输,验证方式,大致运行流程如下:

流程图


效果
经过转换后,效果依旧是原来的效果,并没有影响其正常使用,错误提示依然是借助于IView或者ElementUI的错误提示实现


期望结果
期望输入

handleParams({messgage:"用户名不能为空"},"code")
1
期望输出

[
  {
      required: true,
    message: "用户名不能为空",
    trigger: "blur",
  },
  {
    // validate:根据参数实现的自定义校验
      validator: validate(isCode, "请输入数字或字母"),
    trigger: "blur",
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
实现
第一步就是对参数的初始化,在这一步中,我们需要对参数进行简略的处理,并且定义一个默认参数,大致如下代码;
// 将参数转成数组,方便处理 
const args = [].slice.call(arguments);

 // 默认配置
const DEFAULT_MESSAGE = {
    required: true,
    message: "该输入项为必填项",
    trigger: "blur",
};
————————————————
版权声明:本文为CSDN博主「Oliver尹」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/zy21131437/article/details/122552686

标签:required,校验,输入框,trigger,聊一聊,blur,message,true
来源: https://blog.csdn.net/xiaosongxiaozi/article/details/122573556