WxValidate.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418
  1. /**
  2. * 表单验证
  3. *
  4. * @param {Object} rules 验证字段的规则
  5. * @param {Object} messages 验证字段的提示信息
  6. *
  7. */
  8. class WxValidate {
  9. constructor(rules = {}, messages = {}) {
  10. Object.assign(this, {
  11. data: {},
  12. rules,
  13. messages,
  14. })
  15. this.__init()
  16. }
  17. /**
  18. * __init
  19. */
  20. __init() {
  21. this.__initMethods()
  22. this.__initDefaults()
  23. this.__initData()
  24. }
  25. /**
  26. * 初始化数据
  27. */
  28. __initData() {
  29. this.form = {}
  30. this.errorList = []
  31. }
  32. /**
  33. * 初始化默认提示信息
  34. */
  35. __initDefaults() {
  36. this.defaults = {
  37. messages: {
  38. required: '这是必填字段。',
  39. email: '请输入有效的电子邮件地址。',
  40. tel: '请输入11位的手机号码。',
  41. url: '请输入有效的网址。',
  42. date: '请输入有效的日期。',
  43. dateISO: '请输入有效的日期(ISO),例如:2009-06-23,1998/01/22。',
  44. number: '请输入有效的数字。',
  45. digits: '只能输入数字。',
  46. idcard: '请输入18位的有效身份证。',
  47. equalTo: this.formatTpl('输入值必须和 {0} 相同。'),
  48. contains: this.formatTpl('输入值必须包含 {0}。'),
  49. minlength: this.formatTpl('最少要输入 {0} 个字符。'),
  50. maxlength: this.formatTpl('最多可以输入 {0} 个字符。'),
  51. rangelength: this.formatTpl('请输入长度在 {0} 到 {1} 之间的字符。'),
  52. min: this.formatTpl('请输入不小于 {0} 的数值。'),
  53. max: this.formatTpl('请输入不大于 {0} 的数值。'),
  54. range: this.formatTpl('请输入范围在 {0} 到 {1} 之间的数值。'),
  55. }
  56. }
  57. }
  58. /**
  59. * 初始化默认验证方法
  60. */
  61. __initMethods() {
  62. const that = this
  63. that.methods = {
  64. /**
  65. * 验证必填元素
  66. */
  67. required(value, param) {
  68. if (!that.depend(param)) {
  69. return 'dependency-mismatch'
  70. } else if (typeof value === 'number') {
  71. value = value.toString()
  72. } else if (typeof value === 'boolean') {
  73. return !0
  74. }
  75. return value.length > 0
  76. },
  77. /**
  78. * 验证电子邮箱格式
  79. */
  80. email(value) {
  81. return that.optional(value) || /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value)
  82. },
  83. /**
  84. * 验证手机格式
  85. */
  86. tel(value) {
  87. return that.optional(value) || /^1[34578]\d{9}$/.test(value)
  88. },
  89. /**
  90. * 验证URL格式
  91. */
  92. url(value) {
  93. return that.optional(value) || /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(value)
  94. },
  95. /**
  96. * 验证日期格式
  97. */
  98. date(value) {
  99. return that.optional(value) || !/Invalid|NaN/.test(new Date(value).toString())
  100. },
  101. /**
  102. * 验证ISO类型的日期格式
  103. */
  104. dateISO(value) {
  105. return that.optional(value) || /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test(value)
  106. },
  107. /**
  108. * 验证十进制数字
  109. */
  110. number(value) {
  111. return that.optional(value) || /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value)
  112. },
  113. /**
  114. * 验证整数
  115. */
  116. digits(value) {
  117. return that.optional(value) || /^\d+$/.test(value)
  118. },
  119. /**
  120. * 验证身份证号码
  121. */
  122. idcard(value) {
  123. return that.optional(value) || /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value)
  124. },
  125. /**
  126. * 验证两个输入框的内容是否相同
  127. */
  128. equalTo(value, param) {
  129. return that.optional(value) || value === that.data[param]
  130. },
  131. /**
  132. * 验证是否包含某个值
  133. */
  134. contains(value, param) {
  135. return that.optional(value) || value.indexOf(param) >= 0
  136. },
  137. /**
  138. * 验证最小长度
  139. */
  140. minlength(value, param) {
  141. return that.optional(value) || value.length >= param
  142. },
  143. /**
  144. * 验证最大长度
  145. */
  146. maxlength(value, param) {
  147. return that.optional(value) || value.length <= param
  148. },
  149. /**
  150. * 验证一个长度范围[min, max]
  151. */
  152. rangelength(value, param) {
  153. return that.optional(value) || (value.length >= param[0] && value.length <= param[1])
  154. },
  155. /**
  156. * 验证最小值
  157. */
  158. min(value, param) {
  159. return that.optional(value) || value >= param
  160. },
  161. /**
  162. * 验证最大值
  163. */
  164. max(value, param) {
  165. return that.optional(value) || value <= param
  166. },
  167. /**
  168. * 验证一个值范围[min, max]
  169. */
  170. range(value, param) {
  171. return that.optional(value) || (value >= param[0] && value <= param[1])
  172. },
  173. }
  174. }
  175. /**
  176. * 添加自定义验证方法
  177. * @param {String} name 方法名
  178. * @param {Function} method 函数体,接收两个参数(value, param),value表示元素的值,param表示参数
  179. * @param {String} message 提示信息
  180. */
  181. addMethod(name, method, message) {
  182. this.methods[name] = method
  183. this.defaults.messages[name] = message !== undefined ? message : this.defaults.messages[name]
  184. }
  185. /**
  186. * 判断验证方法是否存在
  187. */
  188. isValidMethod(value) {
  189. let methods = []
  190. for (let method in this.methods) {
  191. if (method && typeof this.methods[method] === 'function') {
  192. methods.push(method)
  193. }
  194. }
  195. return methods.indexOf(value) !== -1
  196. }
  197. /**
  198. * 格式化提示信息模板
  199. */
  200. formatTpl(source, params) {
  201. const that = this
  202. if (arguments.length === 1) {
  203. return function () {
  204. let args = Array.from(arguments)
  205. args.unshift(source)
  206. return that.formatTpl.apply(this, args)
  207. }
  208. }
  209. if (params === undefined) {
  210. return source
  211. }
  212. if (arguments.length > 2 && params.constructor !== Array) {
  213. params = Array.from(arguments).slice(1)
  214. }
  215. if (params.constructor !== Array) {
  216. params = [params]
  217. }
  218. params.forEach(function (n, i) {
  219. source = source.replace(new RegExp("\\{" + i + "\\}", "g"), function () {
  220. return n
  221. })
  222. })
  223. return source
  224. }
  225. /**
  226. * 判断规则依赖是否存在
  227. */
  228. depend(param) {
  229. switch (typeof param) {
  230. case 'boolean':
  231. param = param
  232. break
  233. case 'string':
  234. param = !!param.length
  235. break
  236. case 'function':
  237. param = param()
  238. default:
  239. param = !0
  240. }
  241. return param
  242. }
  243. /**
  244. * 判断输入值是否为空
  245. */
  246. optional(value) {
  247. return !this.methods.required(value) && 'dependency-mismatch'
  248. }
  249. /**
  250. * 获取自定义字段的提示信息
  251. * @param {String} param 字段名
  252. * @param {Object} rule 规则
  253. */
  254. customMessage(param, rule) {
  255. const params = this.messages[param]
  256. const isObject = typeof params === 'object'
  257. if (params && isObject) return params[rule.method]
  258. }
  259. /**
  260. * 获取某个指定字段的提示信息
  261. * @param {String} param 字段名
  262. * @param {Object} rule 规则
  263. */
  264. defaultMessage(param, rule) {
  265. let message = this.customMessage(param, rule) || this.defaults.messages[rule.method]
  266. let type = typeof message
  267. if (type === 'undefined') {
  268. message = `Warning: No message defined for ${rule.method}.`
  269. } else if (type === 'function') {
  270. message = message.call(this, rule.parameters)
  271. }
  272. return message
  273. }
  274. /**
  275. * 缓存错误信息
  276. * @param {String} param 字段名
  277. * @param {Object} rule 规则
  278. * @param {String} value 元素的值
  279. */
  280. formatTplAndAdd(param, rule, value) {
  281. let msg = this.defaultMessage(param, rule)
  282. this.errorList.push({
  283. param: param,
  284. msg: msg,
  285. value: value,
  286. })
  287. }
  288. /**
  289. * 验证某个指定字段的规则
  290. * @param {String} param 字段名
  291. * @param {Object} rules 规则
  292. * @param {Object} data 需要验证的数据对象
  293. */
  294. checkParam(param, rules, data) {
  295. // 缓存数据对象
  296. this.data = data
  297. // 缓存字段对应的值
  298. const value = data[param] !== null && data[param] !== undefined ? data[param] : ''
  299. // 遍历某个指定字段的所有规则,依次验证规则,否则缓存错误信息
  300. for (let method in rules) {
  301. // 判断验证方法是否存在
  302. if (this.isValidMethod(method)) {
  303. // 缓存规则的属性及值
  304. const rule = {
  305. method: method,
  306. parameters: rules[method]
  307. }
  308. // 调用验证方法
  309. const result = this.methods[method](value, rule.parameters)
  310. // 若result返回值为dependency-mismatch,则说明该字段的值为空或非必填字段
  311. if (result === 'dependency-mismatch') {
  312. continue
  313. }
  314. this.setValue(param, method, result, value)
  315. // 判断是否通过验证,否则缓存错误信息,跳出循环
  316. if (!result) {
  317. this.formatTplAndAdd(param, rule, value)
  318. break
  319. }
  320. }
  321. }
  322. }
  323. /**
  324. * 设置字段的默认验证值
  325. * @param {String} param 字段名
  326. */
  327. setView(param) {
  328. this.form[param] = {
  329. $name: param,
  330. $valid: true,
  331. $invalid: false,
  332. $error: {},
  333. $success: {},
  334. $viewValue: ``,
  335. }
  336. }
  337. /**
  338. * 设置字段的验证值
  339. * @param {String} param 字段名
  340. * @param {String} method 字段的方法
  341. * @param {Boolean} result 是否通过验证
  342. * @param {String} value 字段的值
  343. */
  344. setValue(param, method, result, value) {
  345. const params = this.form[param]
  346. params.$valid = result
  347. params.$invalid = !result
  348. params.$error[method] = !result
  349. params.$success[method] = result
  350. params.$viewValue = value
  351. }
  352. /**
  353. * 验证所有字段的规则,返回验证是否通过
  354. * @param {Object} data 需要验证数据对象
  355. */
  356. checkForm(data) {
  357. this.__initData()
  358. for (let param in this.rules) {
  359. this.setView(param)
  360. this.checkParam(param, this.rules[param], data)
  361. }
  362. return this.valid()
  363. }
  364. /**
  365. * 返回验证是否通过
  366. */
  367. valid() {
  368. return this.size() === 0
  369. }
  370. /**
  371. * 返回错误信息的个数
  372. */
  373. size() {
  374. return this.errorList.length
  375. }
  376. /**
  377. * 返回所有错误信息
  378. */
  379. validationErrors() {
  380. return this.errorList
  381. }
  382. }
  383. export default WxValidate