表单验证封装，一招学会，永远受用

Posted 2020-11-19 jtxn

　　身为web开发人员，在开发产品的时候，基本都离不开一大堆的表单前端验证，有比较常见的登录注册的前端验证，还有一些提交信息的表单验证，在判断到书写的格式不正确的时候，告诉用户哪里书写格式填写错误，并且在整个表单只有有一处错误的时候，让提交按钮禁止点击，一方面让整个产品有更好的体验，另一方面也是整个产品开发更加的严谨，近期我就总结了一套表单验证的javascript，特来给大家分享一下。附上github地址：https://github.com/jiutianxuannan/validator

 1 class Checker {
 2     constructor(regular = {}, nameMap = {}) {
 3         this.regular = regular
 4         this.nameMap = nameMap
 5     }
 6 
 7     async check(data) {
 8         for (var key in data) {
 9             await this.validate(data, key)
10         }
11     }
12     async validate(data, key) {
13         let validateRule = this.regular[key]
14         for (const item of validateRule) {
15             let validator = Checker.validators[item]
16             if (validator) {
17                 let value = data[key]
18                 let valid = validator.validateFn(value)
19                 if (!valid) {
20                     let errorPromptInfo = validator.errorPromptInfo.replace(‘$‘, this.nameMap[key])
21                     throw new Error(errorPromptInfo)
22                 }
23             }
24         }
25     }
26     static setValidator(key, validateFn, errorPromptInfo) {
27         Checker.validators[key] = {
28             validateFn,
29             errorPromptInfo
30         }
31     }
32 }
33 Checker.validators = {}
34 export default Checker

使用了一点es6的语法，对于es6不熟的同学可以去看一些文章教程，每个人都是这么过来的，这里不重点介绍，这个checker类有一个重要的方法，就是setValidator方法，从传入的参数上可以看到传入的key，验证方法validateFn，错误提示信息errorPromptinfo，就是创建一系列的验证规则，保存在一个大对象里validators中，具体创建见下面的例子

1 import Checker from ‘./checker.js‘
2 Checker.setValidator(‘require‘, value => value !== undefined, ‘$必须有值‘)
3 Checker.setValidator(‘length‘, value => value && value.length, ‘$不能为空‘)
4 Checker.setValidator(‘phone‘, value => /^1[34578]d{9}$/.test(value), ‘手机号码不正确‘)

在validator这个大对象中就有每个小对象，每个小对象就是对应一条验证完整信息，比如手机号,输入的Key是phone，验证规则就是value => /^1[34578]d{9}$/.test(value)这个函数，用填入的手机号的值去执行这个验证方法，如果返回的是false,就提示该对象的错误信息。那具体每个页面的使用见下面的代码。

 1 <template>
 2   <div class="hello">
 3     <form action="">
 4         <div>
 5                 邮箱：<input type="text" v-model="form.email" @input="email => change({email: form.email})">
 6                 <div v-if="errorMsg.email" class="error">{{errorMsg.email}}</div>
 7         </div>
 8         <div>
 9                 手机号： <input type="text" v-model="form.phone" @input="phone => change({phone: form.phone})">
10                 <div v-if="errorMsg.phone" class="error">{{errorMsg.phone}}</div>
11         </div>
12         <button :disabled="!canSumbit">提交</button>
13     </form>
14   </div>
15 </template>
16 
17 <script>
18     import Checker from ‘@/utils/checker/index‘
19     const checker = new Checker({
20         email: [‘require‘, ‘email‘],
21         phone: [‘require‘, ‘phone‘]
22     }, {
23         email: ‘邮箱‘,
24         phone: ‘手机号‘
25     })
26     export default {
27         data() {
28             return {
29                 form: {
30                     email: ‘‘,
31                     phone: ‘‘
32                 },
33                 errorMsg: {
34                     email: ‘‘,
35                     phone: ‘‘
36                 }
37             }
38         },
39         computed: {
40             canSumbit() {
41                 return this.form.email && this.form.phone && !this.errorMsg.email && !this.errorMsg.phone
42             }
43         },
44         methods: {
45             async change(data) {
46                 try {
47                     await checker.check(data)
48                     for (var key in data) {
49                         this.$set(this.errorMsg, key, ‘‘)
50                     }
51                 } catch (error) {
52                     for (var key in data) {
53                         this.$set(this.errorMsg, key, error.message)
54                     }
55                 }
56             }
57         }
58     }
59 </script>
60 
61 <style scoped>
62     .error {
63         color: #f00;
64     }
65 </style>

由于方便顺手使用了vue，在页面上首先import这个checker，然后造一个对象，传入两个参数对象，一个是每个表单的要求，对应checker中的大对象validator中的验证规则，另一个是对象是作为报错提示相关的，监听表单的输入，将每一个输入对象传入checker中的check方法进行验证，check会就会去调用validator对应的验证对象去做验证，有错误，就将错误信息抛出，页面进行接收，提示用户，将错误信息写入页面错误对象，一旦监听错误对象有值，意味页面还有错误，禁止提交表单

　　整个验证的封装不算复杂，能理解透的话，接下来的开发工作就是复制粘贴，极大加快工作效率，完整代码请看我的github地址：https://github.com/jiutianxuannan/validator，希望可以顺手给个star表示鼓励，以后一定开源更多的封装给大家分享。