validate-formdata 用于验证表单数据的数据结构
validate-formdata 用于验证表单数据的数据结构
JavaScript 表单验证
共25Star
详细介绍
validate-formdata
Data structure for validating form data.
Features
- minimal GC pressure
- optimized for unidirectional rendering
- framework agnostic
- only a data structure, no opinions on UI
- about 50 lines of code
- creates a
window.FormData
object, ready for XHR
Usage
var html = require('choo/html')
var choo = require('choo')
var xhr = require('xhr')
var validateFormdata = require('validate-formdata')
var app = choo()
app.route('/', function (state, emitter) {
var pristine = state.form.pristine
var errors = state.form.errors
var values = state.form.values
return html`
<body>
<form onsubmit=${emitter.bind(emitter, 'submit')}>
<label for="name">
${errors.name && !pristine.name ? errors.name.message : 'valid'}
</label>
<input name="name"
type="text"
autofocus
value=${values.name}
placeholder="name"
onchange=${validate}>
<label for="password">
${errors.password && !pristine.password ? errors.password.message : 'valid'}
</label>
<input name="password"
type="password"
value=${values.password}
placeholder="password"
onchange=${validate}>
<input name="submit"
disabled=${!state.form.valid}
type="submit"
value="Login">
</form>
</body>
`
function validate (e) {
emitter.emit('validate', e)
}
})
app.use(function (state, emitter) {
var validator = validateFormdata()
state.form = validator.state
validator.field('name', function (data) {
if (!data) return new Error("name can't be empty")
if (!(data instanceof String)) return new Error('name should be a string')
if (data.length < 6) return new Error('name should be at least 6 characters')
})
validator.field('password', function (data) {
if (!data) return new Error("password can't be empty")
if (!(data instanceof String)) return new Error('password should be a string')
if (data.length < 6) return new Error('password should be at least 6 characters')
})
emitter.on('validate', function (e) {
validator.validate(e.target.name, e.target.value)
emitter.emit('render')
})
emitter.on('submit', function (e) {
if (!state.form.valid) throw new Error('form not valid')
var opts = { body: validator.formData() }
xhr.post('/my-url', opts, function (err, res) {
if (err) throw err
console.log(res)
})
})
})
app.mount('body')
API
validator = validateFormdata()
Create a new instance.
validator.state
The state object is meant to be passed directly into the UI for rendering:
- validator.state.pristine[key]: Check if the key has been validated before.
- validator.state.errors[key]: Check if there's an error for the key.
- validator.state.values[key]: Get the value from the key.
- validator.state.valid: Check if the form is valid.
- validator.state.changed: Check if the form was changed.
validator.field(key, [opts], validateFunction)
Create a new field validation function for the given key. The validation functions should either return nothing, or an Error
object. The .message
property from the error can be used when rendering.
validator.field(key, [opts], validateFunction)
Create a new file validation function for the given key. The validation functions should either return nothing, or an Error
object. The .message
property from the error can be used when rendering. Opts can contain:
- required: default: true. Determine if the field is required to pass.
validator.validate(key, value)
Validate data. The first time the validate function is called for a key it sets the corresponding state.pristine[key]
to false
. state.valid
is set to true
when all values are valid.
- required: default: true. Determine if the field is required to pass.
validator.formData()
Return a window.FormData
instance from the form. Can be used to send Multipart data into an XHR request. Make sure state.valid
is true
before calling this.
validator.changed
Check if the form has changed to determine if it should be re-rendered. An example of a change is: "the form didn't have an error, and now it does." This value will be false
if only new data was added.