1.0.7 • Published 10 months ago
antd-normalize-validate v1.0.7
antd-spot
install
npm i antd-spot
normalize
normalize: how to use in javascript
const value = '18137944133';
const fix = normalize.cpf(value);
// output fix = 181.379.441-33
normalize: how to use in form
<Form.Item label="Phone" name="phone" normalize={normalize.phone}>
<Input placeholder="Phonenumber..." />
</Form.Item>
normalize: types
used on form and javascript
capitalize
capitalizes the first letter of a string and lowercases the remaining letters.cnpj
normalize a brazilian cnpj number.cpf
normalize a brazilian cpf number.currency
normalize a currency value in the international format.date
normalize a date in the format of "dd/mm/yyyy".email
normalize an email address.fullname
normalize a fullname.lowercase
converts a string to lowercase.numeric
removes all non-numeric characters from a string.phone
normalize a phone number.time
normalize a time in the format of "hh:mm".titlecase
capitalizes the first letter of each word in a string.uppercase
converts a string to uppercase.zipcode
normalize a brazilian zip code.
used only in javascript
dateToIso
convert a data to the iso format.currencyToNumber
convert currency to float value.phoneToInternational
convert a phone to the international format.
normalize: example
import React, { useEffect } from 'react';
import { Button, Form, Input } from 'antd';
import { normalize } from '../utils/antd';
const App: React.FC = () => {
const [form] = Form.useForm();
useEffect(() => {
form.setFieldsValue({
cpf: normalize.cpf('18137944133'),
});
}, []);
return (
<Form
form={form}
onFinish={(data: any) => console.log(data)}
validateTrigger="onBlur"
>
<Form.Item label="CPF" name="cpf" normalize={normalize.cpf}>
<Input />
</Form.Item>
<Button htmlType="submit">Send</Button>
</Form>
);
};
export default App;
rules
rules: how to use
<Form.Item
label="CPF"
name="cpf"
normalize={normalize.cpf}
required
rules={[{ required: true }, rule('cpf', '${label} is invalid.')]}
>
<Input />
</Form.Item>
rules: types
cnpj
validates a brazilian cnpj number.cpf
validates a brazilian cpf number.currency
validates a currency value in the international format.date
validates a date in the format of "dd/mm/yyyy".email
validates an email address.fullname
validates a fullname.password
validates a password.phone
validates a phone number, ensuring that it has at least 10 digits.time
validates a time in the format of "hh:mm".zipcode
validates a brazilian zip code.
rules: example
import React, { useEffect } from 'react';
import { Button, Form, Input } from 'antd';
import { normalize, rule } from 'antd-normalize-validate';
const App: React.FC = () => {
const [form] = Form.useForm();
useEffect(() => {
form.setFieldsValue({
cpf: normalize.cpf('18137944133'),
});
}, []);
return (
<Form
form={form}
onFinish={(data: any) => console.log(data)}
validateTrigger="onBlur"
>
<Form.Item
label="CPF"
name="cpf"
normalize={normalize.cpf}
required
rules={[
{ required: true },
rule('cpf', '${label} is invalid.'),
]}
>
<Input />
</Form.Item>
<Button htmlType="submit">Send</Button>
</Form>
);
};
export default App;
filter option
filter option: how to use
import React from 'react';
import { filterOption } from 'antd-normalize-validate';
const App: React.FC = () => {
return (
<Select
filterOption={filterOption}
options={[
{ value: 1, label: 'First' },
{ value: 2, label: 'Second' },
{ value: 3, label: 'Third' },
]}
placeholder="Select..."
showSearch
/>
);
};
export default App;
select state and city
import React, {useState} from 'react';
import { Button, Form, Input } from 'antd';
import { filterOption, City, State } from 'antd-normalize-validate';
const App: React.FC = () => {
const [state, setState] = useState<string>();
const [form] = Form.useForm();
return (
<Form
form={form}
layout="vertical"
validateTrigger="onBlur"
>
<Form.Item label="State" name="state" required rules={[{ required: true }]}>
<State
filterOption={filterOption}
onChange={(value) => {
setState(value);
form.setFieldValue('city', undefined);
}}
placeholder="State..."
showSearch
/>
</Form.Item>
<Form.Item label="City" name="city" required rules={[{ required: true }]}>
<City
disabled={!state}
filterOption={filterOption}
placeholder="City..."
showSearch
state={state}
/>
</Form.Item>
<Form.Item>
<Button block htmlType="submit" type="primary">
Submit
</Button>
</Form.Item>
</Form>
);
};
export default App;
author
rodrigo brandão jonas batista thayná muller