身为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表示鼓励，以后一定开源更多的封装给大家分享。
原文地址：https://www.cnblogs.com/jtxn/p/9201729.html