v2.0.0
- 📖 doc: update README.md 0b985ad @jaywcjlove
- 📖 doc: update README.md 7c34425 @jaywcjlove
- 🐞 fix: Fix initValues errors. eacd271 @jaywcjlove
⚠️ Thev1
version document preview is here.
⚠️ 1.0
cannot be upgraded to2.0+
const validator = useRef(new Validator({
validate: (value, values, field) => {
if (field === 'password' && !value) {
return 'Required!';
}
}
}));
validator.message('email', data.email, {
validate: (val) => !/^[A-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(val) ? `The ${val} must be a valid email address.` : ''
})
Used in the React App
Example
import { useRef, useState } from 'react';
import Validator from 'validator.tool';
function Demo() {
const validator = useRef(new Validator({
validate: (value, values, field) => {
if (field === 'password' && !value) {
return 'Required!';
}
}
}));
const [data, setData] = useState({
email: 'kennyiseeyou@gmail.com'
});
const [upState, forceUpdate] = useState(0);
useEffect(() => {
if (!validator.current.initValues) {
validator.current.initValues = data;
}
}, []);
function handleSubmit(evn) {
evn && evn.preventDefault();
validator.current.showMessages();
forceUpdate(upState + 1);
}
function handleReset() {
validator.current.hideMessages();
const v = validator.current.reset();
setData({ ...v });
}
function handleChange(env) {
const target = env.target;
const value = target.type === "checkbox" ? target.checked : target.value;
const name = target.name;
setData({ ...data, [name]: value });
}
return (
<form onSubmit={handleSubmit} onReset={handleReset} onChange={handleChange}>
<div>
<label htmlFor="email">EMail:</label>
<input type="email" name="email" defaultValue={data.email} />
<p>
{validator.current.message('email', data.email, {
validate: (val) => !/^[A-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(val) ? `The ${val} must be a valid email address.` : ''
})}
</p>
</div>
<div>
<label htmlFor="password">Password:</label>
<input type="password" name="password" />
<p>
{validator.current.message('password', data.password)}
</p>
</div>
<div>
<label htmlFor="repassword">Confirm Password:</label>
<input type="repassword" name="repassword" />
<p>
{validator.current.message('repassword', data.repassword)}
</p>
</div>
<div>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</div>
</form>
);
}
Used in the React Native App
You need to wrap validator with <Text>
Element.
Example
import React, { useRef } from 'react';
import { Text, View, Button } from 'react-native';
import Validator from 'validator.tool';
const WelcomeScreen = () => {
const [text, onChangeText] = React.useState('Useless Text');
const [, forceUpdate] = React.useState();
const validator = useRef(new Validator({
validate: (value, values, field) => {
if (field === 'username' && value.length > 3) {
return 'Required!';
}
},
}));
return (
<View>
<TextInput onChangeText={onChangeText} value={text} />
<Text>
{validator.current.message('username', text)}
</Text>
<Button
onPress={() => {
validator.current.showMessages();
forceUpdate(1);
}}
title="Submit"
color="#841584"
/>
</View>
);
};
Used in the browser client
Refer to the validator.min.js
file in the application, manually download and link validator.min.js in HTML.
<script type="text/javascript" src="dist/validator.min.js"></script>
It can also be downloaded via UNPKG:
Example
<form id="form">
<div>
<label for="email">EMail:</label>
<input type="email" name="email" placeholder="" />
</div>
<div>
<label for="password">Password:</label>
<input type="password" name="password" />
</div>
<div>
<label for="repassword">Confirm Password:</label>
<input type="repassword" name="repassword" />
</div>
<div>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</div>
</form>
<script type="text/javascript" src="https://unpkg.com/validator.tool/dist/validator.min.js"></script>
<script type="text/javascript">
var validator = new Validator({
form: document.getElementById('form'),
rules: {
email: {
validate: (val) => val ? '' : 'Required!',
},
password: {
// validate: (val) => val < 5 || val > 15 ? '字数大于5,小于15' : ''
},
repassword: {
validate: (val) => !val ? 'Required!' : '',
},
}
});
validator.form.onsubmit = (evn) => {
evn.preventDefault();
const values = validator.getValues();
console.log(values);
}
validator.form.onreset = (evn) => {
const data = validator.reset();
console.log(data);
}
</script>