标签：required 校验 输入框 trigger 聊一聊 blur message true
前言
表单控件，可以说是在前端所有控件中的绝对的基石之一，几乎任何网站都逃脱不了增、删、改、查这个四个基础接口，而为了实现这四个接口对应的功能，在前端几乎必不可少的就是需要输入框来做一些数据的输入和选择 ，比如新增用户时的用户名、密码、地址等等，而为了验证输入信息的有效性，自然就有了对输入信息的校验；
有的小伙伴可能会说，信息的校验不应该是后台在做吗？确实是，不可否认的是后台确实需要做信息的校验，但是如果验证仅仅是在后端做，那么是不是在体验上会有很大的问题，比如：用户名，用户名仅允许数字加字母，如果仅仅是这种验证就需要发送到后台去验证一下，那也太不科学了，而且万一网络不好，或者一些其他原因接口返回的比较慢，那用户体验就会非常差，因此，不可避免的前台也需要做校验， 你想，如果用户输入的内容不合法，在下一秒就可以直接得到错误反馈，那么是不是在体验上就得到了大幅的提升…
先看一下基础用法，也是现在非常绝大多数基于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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。