vue-pattern-input v3.0.0
vue-pattern-input
A Vue Component used RegExp to limit the user's input.
Works like native input element, you can add maxlength
class
attributes. You can use v-model
too.
English | 简体中文
Table of contents
- Live Demo
- What's included
- Parameter declaration
- Quick start
- Changelog
- Bugs and feature requests
- Thought
- License
Live demo
Just click there: Live Demo.
What's included
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:
vue-pattern-input/
├── ...
├── src/
│ └── /component
│ └── pattern-input.vue // core
└── /view
└── demo.html
Parameter declaration
Parameter | Type | Default | Required | Description |
---|---|---|---|---|
regExp | RegExp | null | false | Using for: String.prototype.replace(regexp, replacement) |
replacement | String | '' | false | Using for: String.prototype.replace(regexp, replacement) |
v-model.number | String/Number | true | Using for getting input value |
Commonly used regExp
regExp | Description |
---|---|
/^0\D*|\D*/g | positive integer |
/^a-z/g | lowercase |
/^A-Z/g | uppercase |
/^\w/g | \w, Equivalent to A-Za-z0-9_ |
/^\u4e00-\u9fa5/g | Chinese |
Quick start
JavaScript
setting: {
regExp: /^[0\D]*|\D*/g, // Match any character that doesn't belong to the positive integer
replacement: '',
val: '223'
}
HTML
<pattern-input class="your-class-name"
:regExp="setting.regExp"
:replacement="setting.replacement"
@input="handleInput"
@change="handleChange"
v-model.number="setting.val"></pattern-input>
This setting will make user input positive integer only.
When you want get a Number, remember use
v-model.number
, and the safe maxlength is 15.
Changelog
v3.0.0
- Support Vue3.0
v2.1.4
- Use immediate watch
v2.1.3
I'm not sure is it necessary to emit all the input events. Now I only emitinput
andchange
events.- Now, you can bind any native event on input !
<pattern-input ... @change="onChange" @blur="onBlur" @focus="onFocus" ...etc ...</pattern-input>
- Required:
- Vue: v2.4.0+, because it use $listeners
Bugs and feature requests
Have a bug or a feature request? If your problem or idea is not addressed yet, please open a new issue.
Thought
I'm not sure is it necessary to emit all the input events. Now I only emit input
and change
events.
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 ?
License
Code released under the MIT License.