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表示鼓励,以后一定开源更多的封装给大家分享。

  

分类:

技术点:

相关文章: