{"id":13536251,"url":"https://github.com/phphe/vue-data-validator","last_synced_at":"2025-04-30T08:32:05.975Z","repository":{"id":57395519,"uuid":"70300460","full_name":"phphe/vue-data-validator","owner":"phphe","description":"A validator plugin for Vue.js 2.0. With laravel-style rules.","archived":false,"fork":false,"pushed_at":"2019-04-08T09:41:47.000Z","size":354,"stargazers_count":6,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-03T01:32:46.479Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/phphe.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-10-08T03:20:02.000Z","updated_at":"2019-04-08T09:41:48.000Z","dependencies_parsed_at":"2022-09-05T05:50:56.490Z","dependency_job_id":null,"html_url":"https://github.com/phphe/vue-data-validator","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phphe%2Fvue-data-validator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phphe%2Fvue-data-validator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phphe%2Fvue-data-validator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phphe%2Fvue-data-validator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phphe","download_url":"https://codeload.github.com/phphe/vue-data-validator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224091953,"owners_count":17254152,"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":[],"created_at":"2024-08-01T09:00:36.436Z","updated_at":"2024-11-12T02:16:39.602Z","avatar_url":"https://github.com/phphe.png","language":"JavaScript","readme":"# Note: use [vue-final-validate](https://phphe.github.io/vue-final-validate/)\n\n# Note: This doc is for 1, not  current version\n# 注意: 以下文档是针对版本1的, 不适用于当前版本\n# vue-data-validator\n[中文文档](#ChineseDoc)  \n[中文：验证相关流程](#Chinese-validation-process)\n\nA validator for Vue.js 2.0. It bases on data instead of html. With common rules.  \nVue.js 2.0的数据验证插件，规则不写在模板里而是代码里。语法是仿laravel的。包含常用规则。我的第一个vue插件，请大方赞。已经添加中文错误消息，请查看[中文文档](#ChineseDoc)。\n# dependencies\nsome features depend on babel-polyfill\n# Installation\n```sh\n$ npm install vue-data-validator\n\n// install plugin\nconst VueDataValidator = require('vue-data-validator')\nVue.use(VueDataValidator.validator, VueDataValidator.options)\n// or\nconst VueDataValidator = require('you-path/vue-data-validator/dist/validator.common.js')\nVue.use(VueDataValidator, yourOptions)\n\n```\n# Usage\n```\n// example\n\u003ctemplate lang=\"pug\"\u003e\n    form.form(@submit.prevent=\"submit\")\n      .form-group.has-feedback(:class!=\"{'has-success': fields.email.dirty \u0026\u0026 fields.email.valid, 'has-error': fields.email.dirty \u0026\u0026 !fields.email.valid }\")\n        input.form-control(type=\"text\", placeholder=\"Email\", name=\"email\", v-model=\"fields.email.value\")\n        .form-control-feedback: .fa.fa-envelope\n        div(v-if!=\"fields.email.dirty \u0026\u0026 !fields.email.valid\")\n          .help-block(v-for=\"error in fields.email.errors\") {{error.message}}\n\n      .form-group.has-feedback(:class!=\"{'has-success': fields.password.dirty \u0026\u0026 fields.password.valid, 'has-error': fields.password.dirty \u0026\u0026 !fields.password.valid }\")\n        input.form-control(type=\"password\", placeholder=\"Password\", name=\"password\", v-model=\"fields.password.value\")\n        .form-control-feedback: .fa.fa-lock\n        div(v-if!=\"fields.password.dirty \u0026\u0026 !fields.password.valid\")\n          .help-block(v-for=\"error in fields.password.errors\") {{error.message}}\n\n      .form-group\n        button.btn.btn-primary(type=\"submit\", :disabled=\"!validation.valid || validation.validating\") Sign in\n\u003c/template\u003e\n\n\u003cscript\u003e\nmodule.exports = {\n  data: function() {\n    return {\n      validation: '',\n      fields: {\n        email: {\n          rules: 'required|email|minLength:3'\n        },\n        password: {\n          rules: 'required'\n        }\n      }\n    };\n  },\n  methods: {\n    submit: function() {\n      this.validation.check().then(function (values) {\n        // submit\n      }).catch(function () {\n        // invalid\n      })\n    }\n  },\n  created: function() {\n    this.$validate('validation', this.fields);\n  }\n};\n\n\u003c/script\u003e\n```\n# API\n### Vue.Validator [Object]\nIt contains options. You can add rules or message to Vue.Validator.options.\n### Vue.prototype.$validate [Function]\nparams: name(contain fields states and functions), fields\n# API for validation states\n### valid [Boolean]\n### dirty [Boolean]\n### fields [Object]\n### validating [Boolean]\n### name [String]\n### setDirty [Function]\nset state 'dirty' of all fields and validation object to specified.\n### clear [Function]\nset 'dirty, reuqired' of all fields to false. unwatch all watchers.\n### check [Function]\ncheck is all valid, return a promise.\n```\nthis.validation.check().then(function (values) {\n  // submit\n}).catch(function () {\n  // invalid\n})\n```\n### getValues [Function]\nreturn a object contains all values\n# API for field\n### name [String]\nsame to the key\n### display [String]\nshow in error message\n### nameInMessage [String]\nshow in error message instead of 'display' if exists\n### rules [String]\nformat: 'ruleName:param1,param2|ruleName2|...'  \nexample: 'required|email|minLength:3'  \nyou can put parm in ruleParams\n### ruleParams [Object]\neg:\n```\nruleParams: {\n    minLength: 3,\n    between: [3,9]\n}\n```\n### customRules [Object]\ncustom rules for this field\neg:\n```\ncustomRules: {\n    minLength: Function or Object,\n    between: Function or Object,\n}\n```\n### messages [Object]\ncustom messages for this field,\neg:\n```\nmessages: {\n    minLength: 'custom message',\n    between: 'custom message',\n}\n```\n## field states\n### valid [Boolean]\n### dirty [Boolean]\n### required [Boolean]\nit is not necessary to assign.\n### errors [Object]\nerrors: {\n required: {\n    name: 'required',\n    message: 'error message'\n }\n}\n# API for options\noptions: {\n  rules: {\n    required: Function or Object,\n  }\n  messages: {\n    required: 'The :name must be accepted.'\n  }\n}\n# API for rule\nYou can check './src/vue-data-validator-options.js'.\n### handler [Function]\nvalidate a value  \nparams: value, params, field, fields\nreturn Boolean or Promise\n### required [Boolean/Function] Optional\nit determines if a field is required\nit can be Boolean\nalso function\nreturn Boolean or Promise\nif it return a Promise, the result should pass to resolve\nImportant, you should put these rules which maybe has 'required' at the front.\neg:\n```\nemail: {\n      ...\n      rules: 'required|email|minLength:3'\n    },\n```\n### sensitive [Boolean] [default: false]\nwhen a field's value changed, it will be validated. And other fields which with a sensitive rule will be also validated. It is suit for 'requiredWith, requiredIf' rule.\n# API for message\n ```\n messages: {\n    required: 'The :name must be accepted.'\n }\n ```\nmessage is a string, :name will be replaced to field nameInMessage/display/name, :param[0] will be replaced to first param, :param[n] will be replaced to n param\n\n\u003ca name=\"ChineseDoc\"\u003e\u003c/a\u003e\n#中文文档\nVue.js 2.0的数据验证插件，规则不写在模板里而是代码里。语法是仿laravel的。包含常用规则。我的第一个vue插件，请大方赞。\n# 依赖\n最好引入 babel-polyfill\n# 安装\n```sh\n$ npm install vue-data-validator\n\n// 普通安装\nconst VueDataValidator = require('vue-data-validator')\nVue.use(VueDataValidator.validator, VueDataValidator.options)\n// 使用中文错误消息\nconst VueDataValidator = require('you-path/vue-data-validator/dist/validator.common.js')\nconst options = require('you-path/vue-data-validator/dist/options-cn.common.js')\nVue.use(VueDataValidator, options)\n// 自定义安装，如果你要导入其它的规则和消息模板的话\nconst VueDataValidator = require('you-path/vue-data-validator/dist/validator.common.js')\nVue.use(VueDataValidator, yourOptions)\n\n```\n# Usage\n```\n// example\n\u003ctemplate lang=\"pug\"\u003e\n    form.form(@submit.prevent=\"submit\")\n      .form-group.has-feedback(:class!=\"{'has-success': fields.email.dirty \u0026\u0026 fields.email.valid, 'has-error': fields.email.dirty \u0026\u0026 !fields.email.valid }\")\n        input.form-control(type=\"text\", placeholder=\"Email\", name=\"email\", v-model=\"fields.email.value\")\n        .form-control-feedback: .fa.fa-envelope\n        div(v-if!=\"fields.email.dirty \u0026\u0026 !fields.email.valid\")\n          .help-block(v-for=\"error in fields.email.errors\") {{error.message}}\n\n      .form-group.has-feedback(:class!=\"{'has-success': fields.password.dirty \u0026\u0026 fields.password.valid, 'has-error': fields.password.dirty \u0026\u0026 !fields.password.valid }\")\n        input.form-control(type=\"password\", placeholder=\"Password\", name=\"password\", v-model=\"fields.password.value\")\n        .form-control-feedback: .fa.fa-lock\n        div(v-if!=\"fields.password.dirty \u0026\u0026 !fields.password.valid\")\n          .help-block(v-for=\"error in fields.password.errors\") {{error.message}}\n\n      .form-group\n        button.btn.btn-primary(type=\"submit\", :disabled=\"!validation.valid || validation.validating\") Sign in\n\u003c/template\u003e\n\n\u003cscript\u003e\nmodule.exports = {\n  data: function() {\n    return {\n      validation: '',\n      fields: {\n        email: {\n          rules: 'required|email|minLength:3'\n        },\n        password: {\n          rules: 'required'\n        }\n      }\n    };\n  },\n  methods: {\n    submit: function() {\n      this.validation.check().then(function (values) {\n        // submit\n      }).catch(function () {\n        // invalid\n      })\n    }\n  },\n  created: function() {\n    this.$validate('validation', this.fields);\n  }\n};\n\n\u003c/script\u003e\n```\n# API\n### Vue.Validator [Object]\n包含全局设置。可以直接添加规则个错误消息模板到 Vue.Validator.options.\n### Vue.prototype.$validate [Function]\n参数: name(验证对象在vue实例上的名字，验证对象包含验证的几个字段的综合状态，和一些方法), fields(验证字段集：对象类型)\n# API 验证对象\n### valid [Boolean]\n### dirty [Boolean]\n### fields [Object]\n### validating [Boolean]\n验证中，用于异步验证\n### name [String]\n### setDirty [Function]\n设置所有字段和验证对象的dirty为指定值\n### clear [Function]\n清除所有验证状态，watcher，设置dirty-\u003efalse, required-\u003efalse.\n### check [Function]\n检查所有是否通过，返回一个promise对象（如果当前正在验证中，也算不通过）\n```\nthis.validation.check().then(function (values) {\n  // submit\n}).catch(function () {\n  // invalid\n})\n```\n### getValues [Function]\n返回一个对象包含所有值\n# API for field\n### name [String]\n必需与字段在fields中的key相同\n### display [String]\n在错误消息中显示\n### nameInMessage [String]\n如果设置了，就在错误消息中显示。优先级高于display\n### rules [String]\n格式: 'ruleName:param1,param2|ruleName2|...'  \nexample: 'required|email|minLength:3'  \n一些特殊情况（参数包含特殊字符，参数不是字符串），也可以把参数放到 ruleParams 中\n### ruleParams [Object]\neg:\n```\nruleParams: {\n    minLength: 3,\n    between: [3,9]\n}\n```\n### customRules [Object]\n给当前字段自定义规则\neg:\n```\ncustomRules: {\n    minLength: Function or Object,\n    between: Function or Object,\n}\n```\n### messages [Object]\n给当前字段自定义错误消息模板\neg:\n```\nmessages: {\n    minLength: 'custom message',\n    between: 'custom message',\n}\n```\n## field states\n### valid [Boolean]\n### dirty [Boolean]\n### required [Boolean]\n此状态一般无需手动指定，特殊规则（required, requiredWith...）讲影响它的值\n### errors [Object]\nerrors: {\n required: {\n    name: 'required',\n    message: 'error message'\n }\n}\n# API 设置\noptions: {\n  rules: {\n    required: Function or Object,\n  }\n  messages: {\n    required: 'The :name must be accepted.'\n  }\n}\n# API 规则\n可以浏览 './src/vue-data-validator-options.js'.很简单的\n### handler [Function]\n验证方法  \n参数: value, params, field, fields  \n返回布尔（立即完成）或promise（异步验证）\n### required [Boolean/Function] 可选\n特殊规则才有必要拥有此项，它决定一个字段是否必需\n可以为布尔值或方法\n当它是方法时，返回一个布尔或promise\n如果返回promise，则需把结果传给resolve，结果为布尔，则影响字段的“required”,为null，则不影响\n重要的是，改变’必需属性‘将影响后面规则的验证，所以 required 规则或类似规则应总是写在前面。\neg:\n```\nemail: {\n      ...\n      rules: 'required|email|minLength:3'\n    },\n```\n### sensitive [Boolean] [default: false]\n意为“敏感的”。当一个字段的值改变，此字段将被检查。其它的包含敏感规则的字段也将被检查。所以适合'requiredWith, requiredIf'这种导致字段与其它字段有关联的规则使用。\n# API for 错误信息模板\n ```\n messages: {\n    required: 'The :name must be accepted.'\n }\n ```\n 模板是字符串，包含占位符。:name 表示字段的名（nameInMessage \u003e display \u003e name）。：param[n] 代表第n个参数。\n \u003ca name=\"Chinese-validation-process\"\u003e\u003c/a\u003e\n\n# 验证相关流程\n### \\$validate函数的执行过程\n多个字段的验证结果将存储在一个组件的第一层子属性上，所以需要预定义验证对象，然后在使用$validate时需要验证对象的名字。this.$validate('验证对象名（一层）', 字段集对象)  \n然后将根据名字寻找老的验证对象，如果存在，则清除\n然后生成验证对象，补全字段属性，把字段规则解析为对象并存储，找出并存储敏感字段。附加验证对象到组件实例，并开始观察字段值的改变。  \n当一个字段值改变时，此字段将会被验证。其它非敏感字段不会被验证。敏感字段：含有敏感规则。  \n### 验证流程\n为了异步验证机制，验证采用的线性验证。验证一个字段时，按顺序验证每个规则，一个规则验证完才会验证下一个。首先查看规则是否有required属性，然后按情况可能更改字段的required属性。然后如果字段非必需且为空，则不验证，跳到下一个规则。验证时字段和验证对象的的validating将是true，每次验证将会有id标明该验证，所以异步验证时，之前的验证结果将不会生效。\n","funding_links":[],"categories":["实用库","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Awesome Vue.js"],"sub_categories":["Libraries \u0026 Plugins"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphphe%2Fvue-data-validator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphphe%2Fvue-data-validator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphphe%2Fvue-data-validator/lists"}