{"id":20903868,"url":"https://github.com/minjieliu/validate-framework","last_synced_at":"2025-12-27T17:25:41.575Z","repository":{"id":57390207,"uuid":"59951267","full_name":"MinJieLiu/validate-framework","owner":"MinJieLiu","description":"validate-framework：一款轻量、无依赖的 JavaScript 验证组件","archived":false,"fork":false,"pushed_at":"2017-01-01T16:16:46.000Z","size":791,"stargazers_count":54,"open_issues_count":0,"forks_count":15,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-02T16:01:56.646Z","etag":null,"topics":["validate","validate-framework","validation","validator"],"latest_commit_sha":null,"homepage":"http://minjieliu.github.io/validate-framework/example","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MinJieLiu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-29T15:51:54.000Z","updated_at":"2022-08-30T14:18:34.000Z","dependencies_parsed_at":"2022-08-31T00:31:17.097Z","dependency_job_id":null,"html_url":"https://github.com/MinJieLiu/validate-framework","commit_stats":null,"previous_names":["minjieliu/validator.js"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MinJieLiu%2Fvalidate-framework","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MinJieLiu%2Fvalidate-framework/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MinJieLiu%2Fvalidate-framework/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MinJieLiu%2Fvalidate-framework/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MinJieLiu","download_url":"https://codeload.github.com/MinJieLiu/validate-framework/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243294126,"owners_count":20268194,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["validate","validate-framework","validation","validator"],"created_at":"2024-11-18T13:15:15.675Z","updated_at":"2025-12-12T03:43:16.967Z","avatar_url":"https://github.com/MinJieLiu.png","language":"HTML","readme":"#validate-framework\n\n[![npm version](https://badge.fury.io/js/validate-framework.svg)](https://badge.fury.io/js/validate-framework)\n\n一款轻量、无依赖的 JavaScript 验证组件\n\nDemo： [http://minjieliu.github.io/validate-framework/example](http://minjieliu.github.io/validate-framework/example)\n\n## 特性\n\n 1. 轻量、无依赖\n 1. 相同 name 的表单验证\n 1. 动态验证\n 1. 兼容 chrome 、firfox 、IE9 +\n\n## 快速上手\n\n通过 `npm` 安装\n\n    npm install validate-framework --save\n\n\n基本用法：\n\n```html\n\u003cform name=\"basicForm\"\u003e\n  \u003cdiv class=\"form-group\"\u003e\n    \u003clabel for=\"email\"\u003e邮箱：\u003c/label\u003e\n    \u003cinput class=\"form-control\" id=\"email\" name=\"email\" type=\"email\" placeholder=\"请输入邮箱\" /\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"form-group\"\u003e\n    \u003clabel for=\"phone\"\u003e手机：\u003c/label\u003e\n    \u003cinput class=\"form-control\" id=\"phone\" name=\"phone\" type=\"text\" placeholder=\"请输入手机号\" /\u003e\n  \u003c/div\u003e\n  \u003cinput class=\"btn btn-primary\" id=\"submit\" type=\"submit\" value=\"提交\" /\u003e\n\u003c/form\u003e\n```\n\n```js\nimport validateFramework from 'validate-framework';\n\nconst validator = new validateFramework({\n  formName: 'basicForm',\n  fields: {\n    email: {\n      rules: 'required | isEmail | maxLength(32)',\n      messages: \"不能为空 | 请输入合法邮箱 | 不能超过 {{param}} 个字符\"\n    },\n    phone: {\n      rules: 'isPhone',\n      messages: \"手机号： {{value}} 不合法\"\n    }\n  },\n  callback: function (result, error) {\n    // 阻止表单提交\n    validator.preventSubmit();\n    // do something...\n  }\n});\n\n// 验证\nvalidator.validate();\n```\n\n## 说明文档\n\n\u003e new validateFramework(options)\n\n### options\n\n**`options`** （必选）\n\n  * `formName` （必选） 是 `\u003cform\u003e` 中的 `name` 或者 `id` 的值\n  * `fields` （可选） 表单验证域 `rules` 和 `messages` 集合，后续可通过 `.addMethods(methods)` 和 `.removeMethods(...names)` 进行变更\n  * `errorPlacement` （可选） 错误信息位置\n  * `callback` （可选） 表单提交 或 `.validate()` 调用后触发\n  * `classNames` （可选） 验证正确或错误 class\n\n### 参数示例\n\n**`fields`** ：\n\n```js\nfields: {\n  email: {\n    rules: 'required | isEmail | maxLength(32)',\n    messages: \"不能为空 | 请输入合法邮箱 | 不能超过 {{param}} 个字符\"\n  },\n  phone: {\n    rules: 'isPhone',\n    messages: \"手机号： {{value}} 不合法\"\n  }\n}\n```\n\n注： `email` 、`phone` 为表单 `name` 属性\u003cbr /\u003e\n`rules` ：（必选） 一个或多个规则（中间用 ` | ` 分隔）\u003cbr /\u003e\n`messages` ：（可选） 相对应的错误提示（中间用 ` | ` 分隔） `{{value}}` 为表单中的 value 值， `{{param}}` 为 `maxLength(32)` 的参数\n\n**`errorPlacement`** ：\n\n```js\nerrorPlacement: function (errorEl, fieldEl) {\n  // 非 label 、radio 元素\n  if (fieldEl.parentNode !== undefined) {\n    fieldEl.parentNode.appendChild(errorEl);\n  }\n},\n```\n\n注： `errorEl` 为错误信息节点，`fieldEl` 为验证的表单节点\n验证失败后，表单中会添加 `valid-error` ， 错误信息中添加 `valid-error-message` 类名\n\n**`callback`** ：\n\n```js\ncallback: function (result, error) {\n  // 自定义逻辑\n  if (errors) {\n      // do something...\n  }\n}\n```\n\n注： `result` 验证结果\u003cbr /\u003e\n`error` 验证失败的错误集合\n\n\n### 方法\n\n * 除返回值为 Boolean 类型的方法都支持链式调用\n\n**`.validate()` 手动验证**\n\n返回值为 `Boolean`\u003cbr /\u003e\n注： 默认使用 submit 按钮提交进行拦截验证，可手动调用 `.validate()` 调用验证所有定义过的元素\n\n**`.validateByName(name)` 通过 name 验证单个表单域**\n\n返回值为 `Boolean`\u003cbr /\u003e\n\n**`.preventSubmit()` 阻止表单提交**\n\n**`.addMethods(methods)` 自定义验证方法**\n\n如：\n```js\n// checkbox 至少选择两项 方法\nvalidator.addMethods({\n  selectLimit: function (field, param) {\n    // checkbox 至少选择两项\n    var checkedNum = 0;\n    for (var i = 0, elLength = field.el.length; i \u003c elLength; i++) {\n      if (field.el[i].checked) {\n        checkedNum += 1;\n      }\n    }\n    return checkedNum \u003e= param;\n  },\n});\n```\n\n**`.addFields(fields)` 动态添加 fields 方法**\n\n注：通过 `.addFields(fields)` 来动态新增一个或多个表单验证域\n\n```js\nvalidator.addFields({\n  userName: {\n    rules: 'required | isRealName',\n    messages: \"不能为空 | 请输入真实姓名\"\n  }\n});\n```\n\n**`.removeFields(...names)` 移除 fields 方法**\n\n```js\n// 移除单个\nvalidator.removeFields('userName');\n// 移除多个\nvalidator.removeFields('userName', 'email');\n```\n\n## 内置验证方法\n\n如：\n```js\nv.isEmail('example@qq.com');\nv.isPhone('170111222231');\n```\n\n- [x] required(param)  验证必填\n- [x] isAbc(param)  验证字母数字下划线\n- [x] isDate(param)  验证日期\n- [x] isDecimal(param)  验证浮点数\n- [x] isEmail(param)  验证邮箱\n- [x] isInteger(param)  验证整数\n- [x] isIp(param)  验证 ip 地址\n- [x] isNumeric(param)  验证自然数\n- [x] isPhone(param)  验证手机\n- [x] isTel(param)  验证座机\n- [x] isUrl(param)  验证URL\n- [x] maxLength(param, length)  最大长度\n- [x] minLength(param, length)  最小长度\n- [x] greaterThan(param1, param2)  多于某个数\n- [x] lessThan(param1, param2)  少于某个数\n- [x] greaterThanDate(date1, date2)  大于某个日期\n- [x] lessThanDate(date1, date2)  小于某个日期\n\n## LICENSE\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminjieliu%2Fvalidate-framework","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fminjieliu%2Fvalidate-framework","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminjieliu%2Fvalidate-framework/lists"}