You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.6 KiB
59 lines
1.6 KiB
4 years ago
|
# Tiny Validator
|
||
|
|
|
||
|
|
Created with [Riot.js](https://riot.js.org)
|
||
|
|
|
||
|
|
Validate Form or a Single Form-Field, Error Messages can be show just in time
|
||
|
|
or after Submit entire Form.
|
||
|
|
|
||
|
|
For Validation this Component uses [Validate.js](https://validatejs.org/)
|
||
|
|
|
||
|
|
## Install
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm install tiny-validator --save
|
||
|
|
```
|
||
|
|
|
||
|
|
## How to use
|
||
|
|
|
||
|
|
```
|
||
|
|
<demo>
|
||
|
|
<form onsubmit={ (event) => { state.validator.handle(event) }} novalidate>
|
||
|
|
<div class="field">
|
||
|
|
<label>
|
||
|
|
email
|
||
|
|
<input type="email" name="email" onkeyup={ (event) => { state.validator.handle(event, 'email') }} />
|
||
|
|
</label>
|
||
|
|
<field-error errors={ state.validator.errors('email') } ></field-error>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<label>
|
||
|
|
password
|
||
|
|
<input type="password" name="email" onkeyup={ (event) => { state.validator.handle(event, 'password') }} />
|
||
|
|
</label>
|
||
|
|
<field-error errors={ state.validator.errors('password') } ></field-error>
|
||
|
|
</div>
|
||
|
|
<button type="submit">Send</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
import Validator from './validator.js'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
onBeforeMount() {
|
||
|
|
this.state.validator = new Validator({
|
||
|
|
name: {
|
||
|
|
presence: true
|
||
|
|
email: true
|
||
|
|
},
|
||
|
|
password: {
|
||
|
|
presence: true
|
||
|
|
}
|
||
|
|
}, this)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</demo>
|
||
|
|
```
|
||
|
|
|
||
|
|
|