├── .gitignore ├── LICENSE ├── README-zh_CN.md ├── README.md ├── package.json └── src └── components └── vue-pattern-input.vue /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .babelrc 3 | .eslintignore 4 | .eslintrc.js 5 | .gitignore 6 | .idea/ 7 | .postcssrc.js 8 | 9 | package-lock.json 10 | *.log* 11 | 12 | config/ 13 | build/ 14 | node_modules/ 15 | src/ 16 | !src/components/ 17 | asset/ 18 | 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Live 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README-zh_CN.md: -------------------------------------------------------------------------------- 1 | # vue-pattern-input 2 | 3 | [![npm package](https://img.shields.io/npm/v/vue-pattern-input.svg?style=flat-square)](https://www.npmjs.com/package/vue-pattern-input) 4 | [![NPM downloads](https://img.shields.io/npm/dm/vue-pattern-input.svg?style=flat-square)](http://npmjs.com/vue-pattern-input) 5 | 6 | 在 `input` 输入框上使用正则限制用户的输入。 7 | 8 | 和原生的输入框完全一致（除了会限制输入）： 9 | - 支持任意原生属性，比如： `maxlength` `class` 10 | - 支持 `v-model` 11 | - 支持所有的原生事件： `change`、`blur` 等等 12 | 13 | 简体中文 | [English](./README.md) 14 | 15 | ## 目录 16 | 17 | - [在线 Demo](#在线-demo) 18 | - [项目结构](#项目结构) 19 | - [参数说明](#参数说明) 20 | - [快速开始](#快速开始) 21 | - [更新日志](#更新日志) 22 | - [Bugs and feature requests](#bugs-and-feature-requests) 23 | - [一些想法](#一些想法) 24 | - [License](#license) 25 | 26 | ## 在线 Demo 27 | 28 | 点击此处: [Live Demo](https://dp31h.csb.app/). 29 | 30 | ## 项目结构 31 | 32 | 项目目录结构如下： 33 | 34 | ``` 35 | vue-pattern-input/ 36 | ├── ... 37 | ├── src/ 38 | │ └── /component 39 | │ └── pattern-input.vue // core 40 | └── /view 41 | └── demo.html 42 | ``` 43 | 44 | ## 参数说明 45 | 46 | 47 | Parameter|Type|Default|Required|Description 48 | --- | --- | --- | --- | --- | 49 | regExp | RegExp | null | false | Using for: String.prototype.replace(regexp, replacement) 50 | replacement | String | '' | false | Using for: String.prototype.replace(regexp, replacement) 51 | v-model[.number] | String/Number | | true | Using for getting input value 52 | 53 | ## 常见的正则 54 | 55 | regExp|Description 56 | --- | --- | 57 | /^[0\D]\*\|\D*/g | 只能输入正整数 58 | /[^a-z]/g | 只能输入小写字母 59 | /[^A-Z]/g | 只能输入大写字母 60 | /[^\w]/g | 只能输入 \w, 即 [A-Za-z0-9_] 61 | /[^\u4e00-\u9fa5]/g | 只能输入中文 62 | 63 | 64 | ## 快速开始 65 | 66 | #### JavaScript 67 | 68 | ```javascript 69 | setting: { 70 | regExp: /^[0\D]*|\D*/g, // Match any character that doesn't belong to the positive integer 71 | replacement: '', 72 | val: '223' 73 | } 74 | ``` 75 | 76 | #### HTML 77 | 78 | ```html 79 | 85 | ``` 86 | 87 | > This setting will make user input positive integer only. 88 | 89 | > When you want get a Number, remember use `v-model.number`, and the safe maxlength is 15. 90 | 91 | 92 | ## 更新日志 93 | 94 | ### v3.0.0 95 | 96 | - v3.0.0 开始支持 Vue3.0；如果使用 Vue2.x 请切到 v2.x 97 | 98 | ### v2.1.4 99 | 100 | - Use immediate watch 101 | 102 | ### v2.1.3 103 | - ~~I'm not sure is it necessary to emit all the input events. Now I only emit `input` and `change` events.~~ 104 | - Now, you can bind any native event on input ! 105 | ```html 106 | 113 | ``` 114 | - Required: 115 | - Vue: v2.4.0+, because it use [$listeners](https://vuejs.org/v2/api/#vm-listeners) 116 | 117 | ## Bugs and feature requests 118 | 119 | Have a bug or a feature request? If your problem or idea is not addressed yet, [please open a new issue](https://github.com/RoamIn/vue-pattern-input/issues/new). 120 | 121 | ## 一些想法 122 | 123 | ~~I'm not sure is it necessary to emit all the input events. Now I only emit `input` and `change` events.~~ 124 | 125 | 我觉得现在这种正则限制输入并不是很好，感觉怪怪的。 可能所需要写的正则是去除所不需要的字符，而不是所需要的字符吧。 126 | 127 | ## License 128 | 129 | Code released under the [MIT License](https://github.com/RoamIn/vue-pattern-input/blob/master/LICENSE). 130 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-pattern-input 2 | 3 | [![npm package](https://img.shields.io/npm/v/vue-pattern-input.svg?style=flat-square)](https://www.npmjs.com/package/vue-pattern-input) 4 | [![NPM downloads](https://img.shields.io/npm/dm/vue-pattern-input.svg?style=flat-square)](http://npmjs.com/vue-pattern-input) 5 | 6 | A Vue Component used RegExp to limit the user's input. 7 | 8 | Works like native input element, you can add `maxlength` `class` attributes. You can use `v-model` too. 9 | 10 | English | [简体中文](./README-zh_CN.md) 11 | 12 | ## Table of contents 13 | 14 | - [Live Demo](#live-demo) 15 | - [What's included](#whats-included) 16 | - [Parameter declaration](#parameter-declaration) 17 | - [Quick start](#quick-start) 18 | - [Changelog](#changelog) 19 | - [Bugs and feature requests](#bugs-and-feature-requests) 20 | - [Thought](#thought) 21 | - [License](#license) 22 | 23 | ## Live demo 24 | 25 | Just click there: [Live Demo](https://dp31h.csb.app/). 26 | 27 | ## What's included 28 | 29 | Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this: 30 | 31 | ``` 32 | vue-pattern-input/ 33 | ├── ... 34 | ├── src/ 35 | │ └── /component 36 | │ └── pattern-input.vue // core 37 | └── /view 38 | └── demo.html 39 | ``` 40 | 41 | ## Parameter declaration 42 | 43 | 44 | Parameter|Type|Default|Required|Description 45 | --- | --- | --- | --- | --- | 46 | regExp | RegExp | null | false | Using for: String.prototype.replace(regexp, replacement) 47 | replacement | String | '' | false | Using for: String.prototype.replace(regexp, replacement) 48 | v-model[.number] | String/Number | | true | Using for getting input value 49 | 50 | ## Commonly used regExp 51 | 52 | regExp|Description 53 | --- | --- | 54 | /^[0\D]\*\|\D*/g | positive integer 55 | /[^a-z]/g | lowercase 56 | /[^A-Z]/g | uppercase 57 | /[^\w]/g | \w, Equivalent to [A-Za-z0-9_] 58 | /[^\u4e00-\u9fa5]/g | Chinese 59 | 60 | 61 | ## Quick start 62 | 63 | #### JavaScript 64 | 65 | ```javascript 66 | setting: { 67 | regExp: /^[0\D]*|\D*/g, // Match any character that doesn't belong to the positive integer 68 | replacement: '', 69 | val: '223' 70 | } 71 | ``` 72 | 73 | #### HTML 74 | 75 | ```html 76 | 82 | ``` 83 | 84 | > This setting will make user input positive integer only. 85 | 86 | > When you want get a Number, remember use `v-model.number`, and the safe maxlength is 15. 87 | 88 | 89 | ## Changelog 90 | 91 | ### v3.0.0 92 | 93 | - v3.0.0 provides Vue 3 support. You can still use v2.x for Vue 2. 94 | 95 | ### v2.1.4 96 | 97 | - Use immediate watch 98 | 99 | ### v2.1.3 100 | - ~~I'm not sure is it necessary to emit all the input events. Now I only emit `input` and `change` events.~~ 101 | - Now, you can bind any native event on input ! 102 | ```html 103 | 110 | ``` 111 | - Required: 112 | - Vue: v2.4.0+, because it use [$listeners](https://vuejs.org/v2/api/#vm-listeners) 113 | 114 | ## Bugs and feature requests 115 | 116 | Have a bug or a feature request? If your problem or idea is not addressed yet, [please open a new issue](https://github.com/RoamIn/vue-pattern-input/issues/new). 117 | 118 | ## Thought 119 | 120 | ~~I'm not sure is it necessary to emit all the input events. Now I only emit `input` and `change` events.~~ 121 | 122 | And I think the RegExp settings is not good enough, it's a bit awkward. Maybe I should match what I want instead of replacing what I don't want. But how ? 123 | 124 | 125 | ## License 126 | 127 | Code released under the [MIT License](https://github.com/RoamIn/vue-pattern-input/blob/master/LICENSE). 128 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-pattern-input", 3 | "version": "3.0.0", 4 | "description": "A Vue Component for limiting user input", 5 | "main": "src/components/vue-pattern-input.vue", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/RoamIn/vue-pattern-input.git" 9 | }, 10 | "keywords": [ 11 | "vue", 12 | "input", 13 | "pattern", 14 | "RegExp" 15 | ], 16 | "author": "Live", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/RoamIn/vue-pattern-input/issues" 20 | }, 21 | "homepage": "https://github.com/RoamIn/vue-pattern-input#readme", 22 | "dependencies": { 23 | "vue": "^3.0.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/components/vue-pattern-input.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | --------------------------------------------------------------------------------