Vue 表单验证插件的写作过程

• Z时代
• 2024-01-10
• 分类：综合

前段时间，老大搭好了Vue的开发环境，于是我们愉快地从JQ来到了Vue。这中间做的时候，在表单验证上做的不开心，看到vue的插件章节，感觉自己也能写一个，因此就自己开始写了一个表单验证插件va.js。 当然为什么不找个插件呢？ vue-validator呀。

1. 我想了下，一个是表单验证是个高度定制化的东西，这种网上找到的插件为了兼顾各个公司的需求，所以加了很多功能，这些我们不需要。事实证明，vue-validator有50kb，而我写的va.js只有8kb。

2. 另一个是，vue-validator的api我真的觉得长, 动不动就v-validate:username="['required']"，这么一长串，而我设计的调用大概如——v-va:Money

当然，本文仅是展示下，如何写个满足自己公司需求的vue表单验证插件。下面介绍下思路。

一、表单验证模块的构成

任何表单验证模块都是由 配置——校验——报错——取值 这几部分构成的。

1. 配置： 配置规则 和配置报错，以及优先级

2. 校验： 有在 change 事件校验， 在点击提交按钮的时候校验， 当然也有在input事件取值的

3. 报错： 报错方式一般要分，报错的文字有模板，也有自定义的

4. 取值： 将通过验证的数据返还给开发者调用

下面是我老大针对公司项目给我提出的要求

1. 集中式的管理 校验规则 和 报错模板。

2. 报错时机可选

3. 校验正确后的数据，已经打包成对象，可以直接用

4. 允许各个页面对规则进行覆盖，对报错信息进行自定义修改，以及允许ajax获取数据后，再对规则进行补充

5. 按顺序来校验，在第一个报错的框弹出错误

我就很好奇地问， 为什么要这样子呢？然后老大就跟我一条一条解答：

1. 集中式管理规则，和报错模板的好处，就是规则可以全局通用，一改全改。老大跟我说，光是昵称的正则就改了三次。如果这些正则写在各个页面，o(￣ヘ￣o#)哼，你就要改N个页面了

2. pc和移动的流程不一样，pc很多校验都要在change事件或者input事件就校验并报错了，而移动则一般是要到提交按钮再进行校验。所以写插件的时候要做好两手准备。然后，报错用的ui要可以支持我们现在用的layer插件。当然以后这个报错的ui也可能变，所以你懂滴。

3. 当然原来jq时代，我们的公用表单验证，就能验证完了，把数据都集合到一个对象里。这样ajax的时候，就不用再去取值了。你这个插件耶要达到这个效果

4. 原来jq的那个公用脚本，正则和报错都集中到一个地方去了，在很多地方已经很方便了。但是在一些页面需要改东西的时候还不够灵活。像RealName这个规则，最早是针对某个页面配置的，用的是后端接口上的字段名。另一个支付页，后端接口上的字段名改成了PayUser了，但是正则还是RealName的，原来我们是要复写一下RealName。这个就不太方便也不好看了。另外一个，支付金额，有最大值和最小值的限制，这个需要从后端获取的。你也要考虑这个情况。要做到各个页面上也能有一些灵活的地方可以修改规则，自定义报错等等。

5. 为什么要按顺序校验啊？你忘了上次牛哥让我们输入框，从上到下，按顺序报错。不然用户都不知道哪个地方错了。还有规则也是要按顺序的。哦哦哦。看来这次我放东西的时候，要用下数组了。尽量保持顺序。

我听了之后，大致懂了，原来之前自己写的jq表单验证还有这么多不舒服的点。-_-|||接下来，是看看vue给我的好东西。让我来写

二、Vue 的插件怎么写

我一个vue小白，怎么就开始写vue插件了呢？那是因为想解决方案的时候，翻Vue文档翻到了这里

这些东东，等我写完va.js的时候，感觉尤大写的真的是很清楚了。

其实我是想写个指令来完成表单验证的事的。结果发现可能有2-3个指令，而且要再Vue.prototype上定义些方法，好让各个子实例内部也能拓展规则。于是老大说，这就相当于插件了。这让我很是吃鲸。

va.js主要用的是 Vue指令

Vue 文档真的写得很用心，但是我再补充一点吧

vnode.context 就是Vue的实例

我们做项目的时候，经常一个根组件上挂着N个子组件，子组件上又可能挂着N个子组件。vnode.context获取的实例，是绑定该指令的组件的实例。这个就相当好用了。你可以做很多事情

当然还用了点Vue.prototype

Vue.prototype.$method 就是可以在各个组件上调用的方法。可以在组件内部用 this.$method调用的

## 三、具体实现的思路 ##

核心思路如下图：

• 规则的构造函数

1. //va配置的构造函数

2. function VaConfig(type, typeVal, errMsg, name, tag){

3. this.type = type, this.typeVal = typeVal, this.errMsg = errMsg, this.name = name, this.tag = tag

4. }

1. type: nonvoid(非空), reg(正则), limit(区间), equal(与某个input相等)，unique(不能相同)

2. typeVal: 根据不同type设置不同的值

3. errMsg: 自定义的报错信息

4. name: 用来传ajax的字段，如Password, Username

5. tag：用来报错的名字，如‘银行账号’，‘姓名’

设置了三种规则

1.默认规则： 只要绑定指令，就默认有的校验。 比如非空的校验。 可以额外加修饰符来去除

2.选项规则： 通过Vue指令的修饰符添加的规则。

3.自定义规则： Vue指令属性值上添加的规则。

同一个type的规则只存在一个，也就是说，如果type为reg(正则),那么会互相覆盖。 

覆盖的优先级： 自定义规则 > 选项规则 > 默认规则

思路讲的多了。也不知道怎么讲了，下面大家直接看源码把。

源码

1. /*

2. * 流程： 绑定指令-> 设置配置(vaConfig) -> 校验(check) -> 报错(showErr) 或 自定义报错

3. */

4.  

5. var va = {};

6.  

7. function unique(arr){

8. var hashTable = {}, newArr = [];

9. for(var i = 0;i < arr.length;i++){

10. if(!hashTable[arr[i]]){

11. hashTable[arr[i]] = true;

12. newArr.push(arr[i]);

13. }

14. }

15. return newArr;

16. }

17.  

18. function addClass(dom, _class){

19. var hasClass = !!dom.className.match(new RegExp('(\\s|^)' + _class + '(\\s|$)'))

20. if(!hasClass){

21. dom.className += ' ' + _class

22. }

23. }

24.  

25. //校验函数

26. function check(v, conditions){

27. var res = 0; //0代表OK, 若为数组代表是某个字段的错误

28. //验证函数

29. var cfg = {

30. //非空

31. nonvoid: (v, bool)=>{

32. if(bool){

33. return v.trim() ? 0 : ['nonvoid'];

34. }else{

35. return 0;

36. }

37. },

38. reg:(v, reg)=> reg.test(v) ? 0 : ['reg'], //正则

39. limit:(v, interval)=> (+v >= interval[0] && +v <= interval[1]) ? 0 : ['limit', interval],

40. equal: (v, target)=>{ //和什么相等

41. var _list = document.getElementsByName(target), _target

42. for(var i = 0;i < _list.length;i++){

43. if(_list[i].className.indexOf('va') > -1){

44. _target = _list[i];

45. }

46. }

47. return (_target.value === v) ? 0 : ['equal', _target.getAttribute('tag')]

48. },

49. unique:(v)=>{

50. var _list = document.getElementsByClassName('unique'),

51. valList = [].map.call(_list, item=>item.value)

52. return (unique(valList).length === valList.length) ? 0 : ['unique']

53. }

54. }

55.  

56. for(var i = 0;i < conditions.length;i++){

57. var condi = conditions[i],

58. type = condi.type,

59. typeVal = condi.typeVal

60. res = cfg[type](v, typeVal)

61. // console.log(res, v, type,typeVal)

62. //如果有自定义报错信息， 返回自定义的报错信息

63. console.log(res)

64. if(res){

65. res = condi.errMsg || res

66. break

67. }

68. }

69.  

70. return res;

71. }

72.  

73. function showErr(name, checkResult){

74. var type = checkResult[0],

75. ext = checkResult[1] || []

76.  

77. var ERR_MSG = {

78. nonvoid: `${name}不能为空`,

79. reg: `${name}格式错误`,

80. limit: `${name}必须在${ext[0]}与${ext[1]}之间`,

81. equal: `两次${ext}不相同`,

82. unique: `${name}重复`

83. }

84. //使用layer来报错，如果需要自定义报错方式，要把全文的layer集中起来包一层。

85. layer.msgWarn(ERR_MSG[type])

86. }

87.  

88. /**

89. * [VaConfig va配置的构造函数]

90. * @param {[string]} type [校验类型，如reg, limit等等]

91. * @param {[*]} typeVal [根据校验类型配置的值]

92. * @param {[string]} errMsg [报错信息]

93. * @param {[string]} name [用以ajax的字段名]

94. * @param {[string]} tag [中文名，用以报错]

95. */

96. function VaConfig(type, typeVal, errMsg, name, tag){

97. this.type = type, this.typeVal = typeVal, this.errMsg = errMsg, this.name = name, this.tag = tag

98. }

99. //用来剔除重复的规则，以及规则的覆盖。默认后面的取代前面

100. Array.prototype.uConcat = function(arr){

101. var comb = this.concat(arr)

102. ,unique = {}

103. ,result = []

104.  

105. for(var i = 0;i < comb.length;i++){

106. // console.log(i, comb[i])

107. var type = comb[i].type

108. if(unique[type]){

109. var index = unique[type].index

110. unique[type] = comb[i]

111. unique[type].index = index;

112. }else{

113. unique[type] = comb[i]

114. unique[type].index = i;

115. }

116. }

117.  

118. for(var i= 0;i < 100;i++){

119. for(var item in unique){

120. if(unique[item].index === i){

121. delete unique[item].index

122. result.push(unique[item])

123. }

124. }

125. }

126. return result

127. }

128.  

129. //正则表

130. var regList = {

131. ImgCode: /^[0-9a-zA-Z]{4}$/,

132. SmsCode: /^\d{4}$/,

133. MailCode: /^\d{4}$/,

134. UserName: /^[\w|\d]{4,16}$/,

135. Password: /^[\[email protected]#$%^&*.]{6,16}$/,

136. Mobile: /^1[3|5|8]\d{9}$/,

137. RealName: /^[\u4e00-\u9fa5 ]{2,10}$/,

138. BankNum: /^\d{10,19}$/,

139. Money: /^([1-9]\d*|0)$/,

140. Answer: /^\S+$/,

141. Mail: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/

142. }

143.  

144. va.install = function(Vue, options){

145. Vue.directive('va',{

146. bind:function(el, binding, vnode){

147. var vm = vnode.context

148. ,name = binding.arg === 'EXTEND' ? el.getAttribute('name') : binding.arg

149. ,tag = el.getAttribute('tag')

150. ,baseCfg = [] //默认的校验规则 --不用写，默认存在的规则（如非空）

151. ,optionalConfig = [] //用户选择的配置成套 --与name相关

152. ,customConfig = [] //用户自定义的规则（组件中） --bingding.value

153. ,option = binding.modifiers

154. ,regMsg = el.getAttribute('regMsg') || ''

155.  

156. var eazyNew = (type, typeVal) =>{return new VaConfig(type, typeVal, '', name, tag)}

157. var regNew = (typeVal) =>{return new VaConfig('reg', typeVal, regMsg, name, tag)} //正则的新建

158.  

159. el.className = 'va' + vm._uid

160. el.name = name

161.  

162. vm.vaConfig || (vm.vaConfig = {})

163. var NON_VOID = eazyNew('nonvoid', true)

164.  

165. //默认非空,如果加了canNull的修饰符就允许为空

166. if(!option.canNull){

167. baseCfg.push(NON_VOID)

168. }

169.  

170. //需要立即校验的框

171. if(option.vanow){

172. el.addEventListener('change', function(){

173. vm.vaResult || (vm.vaResult = {})

174. vm.vaVal || (vm.vaVal = {})

175. var value = el.value,

176. conditions = vm.vaConfig[name],

177. para = el.getAttribute('va-para') //传给回调的参数

178.  

179. //如果允许为空的此时为空，不校验

180. if(value === '' && option.canNull){

181. vm.vaVal[name] = value

182. return

183. }

184.  

185. vm.vaResult[name] = check(value, conditions);

186. var _result = vm.vaResult[name]

187. if(_result){

188. //如果返回的是字符串，则为自定义报错； 如果是数组，则使用showErr 报错

189. typeof _result === 'string' ? layer.msgWarn(_result) : showErr(conditions[0].tag, _result)

190. el.value = vm.vaVal[name] = ''

191. return

192. }

193. vm.vaVal[name] = value

194. vm.$vanow(para) //写在实例内部method的回调

195. })

196. }

197.  

198. //不能重复的

199. if(option.unique){

200. optionalConfig.push(eazyNew('unique', name))

201. }

202.  

203. //如果有在正则表里

204. var regOptions = Object.keys(option);

205. for(var i = 0;i < regOptions.length;i++){

206. var regOption = regOptions[i]

207. if(regList[regOptions[i]]){

208. optionalConfig.push(regNew(regList[regOption]))

209. }

210. }

211.  

212. //如果regList里有name对应的，直接就加进optionalConfig

213. if(regList[name]){

214. optionalConfig.push(regNew(regList[name]))

215. }

216.  

217. //用户自定义的规则

218. if(binding.value){

219. customConfig = binding.value.map(item=>{

220. let type = Object.keys(item)[0];

221. if(type === 'reg'){

222. return regNew(item[type])

223. }else{

224. if(type === 'unique'){

225. addClass(el, 'unique')

226. }

227. return eazyNew(type, item[type])

228. }

229. })

230. }

231.  

232. //规则由 默认规则 + 修饰符规则 + 写在属性的自定义规则 + 用户直接加到vm.vaConfig里的规则 合并（后面的同type规则会覆盖前面的）

233. vm.vaConfig[name] || (vm.vaConfig[name] = [])

234. vm.vaConfig[name] = baseCfg.uConcat(optionalConfig).uConcat(customConfig).uConcat(vm.vaConfig[name])

235. },

236. })

237.  

238. Vue.directive('va-check', {

239. bind:function(el, binding, vnode){

240. var vm = vnode.context

241. el.addEventListener('click', function(){

242. var domList = document.getElementsByClassName('va' + vm._uid);

243. vm.vaResult || (vm.vaResult = {})

244. vm.vaVal || (vm.vaVal = {})

245.  

246. for(var i = 0;i < domList.length;i++){

247. var dom = domList[i],

248. name = dom.name,

249. value = dom.value,

250. conditions = vm.vaConfig[name]

251.  

252. var _result = check(value, conditions)

253. //如果返回不为0,则有报错

254. if(_result){

255. //如果返回的是字符串，则为自定义报错； 如果是数组，则使用showErr 报错

256. typeof _result === 'string' ? layer.msgWarn(_result) : showErr(conditions[0].tag, _result)

257. return

258. }

259. vm.vaVal[name] = value

260. }

261. //校验通过的回调

262. vm.$vaSubmit()

263. // layer.msgWarn('全部校验成功')

264. console.log(vm.vaVal)

265. })

266.  

267. }

268. })

269.  

270. Vue.directive('va-test',{

271. bind: function(el, binding, vnode){

272. var vm = vnode.context

273. el.addEventListener('click', function(){

274. vm.vaResult || (vm.vaResult = {})

275. vm.vaVal || (vm.vaVal = {})

276.  

277. var dom = document.getElementsByName(binding.arg)[0],

278. name = dom.name,

279. value = dom.value,

280. conditions = vm.vaConfig[name]

281.  

282. var _result = check(value, conditions)

283. //如果返回不为0，则有报错

284. console.log(_result)

285. if(_result){

286. //如果返回的是字符串，则为自定义报错； 如果是数组，则使用showErr 报错

287. typeof _result === 'string' ? layer.msgWarn(_result) : showErr(conditions[0].tag, _result)

288. return

289. }

290.  

291. vm.vaVal[name] = value

292. var callback = Object.keys(binding.modifiers)[0]

293. vm[callback]()

294. })

295. }

296. })

297.  
298.  

299. /**

300. ** 在实例的monuted周期使用 api设置自定义配置

301. */

302. Vue.prototype.VaConfig = VaConfig

303. }

304.  

305. module.exports = va

现在项目已经用起来了。当然表单验证这种是高度定制化的。纯粹分享个过程和思路。也算我这个vue新手的一次阶段性成果吧。哈哈~

使用实例

第一个框，加了两条指令

1. v-va:Password 这个代表使用配置表中password对应的配置（包括非空和正则，默认规则），同时应用Password作为校验成功获取的 数据对象的key

2. tag为报错显示中此输入框的名字

第二个框，为确认框，也加了两个指令

1.v-va:checkPassword.Password = "[{'equal':'Password'}]"

一般v-va后面的第一个字段为数据对象的key，他和正则对应的名字有可能不同。

这个字段如果和配置表中的配置匹配，那么自然应用配置。

如果不匹配，就要自己在后面用.的方式加配置（选项规则）。像这里的Password。

最后面还有一个 属性值 "[{'equal':'Password'}]"（自定义规则）。

这个地方用了数组，即会按这个数组的配置来进行校验。

同时这个数组有顺序，顺序代表规则的优先级。 

这个配置代表，这个框必须和上面那个Password的框值相等，否则报错。

另外确认框不加入最后的结果数据对象。

2.tag 用来作为报错信息的名字

校验触发按钮 上面有一个指令 v-va-check

1.用来触发校验

2.校验成功后，将数据对象存在实例的vaVal属性下

根据上面的实例

规则的优先级：

1.自定义规则 > 选项规则 > 默认规则 

2.规则中的优先级依照数组顺序

另外，可以看到为了使用者方便，我在我们团队中事先做了一些约定，并可能会用到 v-va、v-va-check、tag等指令，占用了实例的两个属性名vaConfig、vaVal。这些约定和设置可以使使用者使用方便（通过配置控制校验时机， 校验成功后自然生成通过的数据对象，自定义报错信息等等）。但是也减少了这个插件的普适性。

此方案仅提供各位做思路参考。个人认为，表单验证是高度定制化的需求，尽量根据各个业务情况进行取舍。在我的方案中，并不像vue-validator一样做了脏校验。

以上是 Vue 表单验证插件的写作过程 的全部内容， 来源链接： utcz.com/z/375394.html