In the same way we have .email() or .url() why not have a method to validate IP addresses?
Note: distinction needs to be made between IPv4 vs IPv6
This would prevent users to seek for a regexp e.g. https://stackoverflow.com/questions/10006459/regular-expression-for-ip-address-validation or https://www.mkyong.com/regular-expressions/how-to-validate-ip-address-with-regular-expression/
or maybe even implement some (weird) extra code like what I've seen here on a project I'm working on:
let ipAddressSchema = Yup.string()
.matches(/(^(\d{1,3}\.){3}(\d{1,3})$)/, { message:'Invalid IP address', excludeEmptyString: true })
.test('ipAddress', 'IP address value should be less or equal to 255',
value => {
if(value === undefined || value.trim() === '') return true;
return value.split('.').find(i => parseInt(i) > 255) === undefined;
}
);
Note: I even found this https://www.regextester.com/104762 "yup-new" anyone?
For what it's worth, you can very easily turn this into a custom validation extending yup.string().
function ipv4(message = 'Invalid IP address') {
return this.matches(/(^(\d{1,3}\.){3}(\d{1,3})$)/, {
message,
excludeEmptyString: true
}).test('ip', message, value => {
return value === undefined || value.trim() === ''
? true
: value.split('.').find(i => parseInt(i, 10) > 255) === undefined;
});
}
yup.addMethod(yup.string, 'ipv4', ipv4);
And use it like:
yup.string().ipv4().validateSync('10.10.0.12');
// '10.10.0.12'
yup.string().ipv4().validateSync('foo');
// Thrown: ValidationError: Invalid IP address
Yes, we try not to add new validations very often as they increase bundle size, especially when they are easy to write. The Idea with string.matches is that you can write these as needed
You can also avoid using addMethod if you want I usually just do something like
// yup helpers
export const ipv4 = string.matches(/(^(\d{1,3}\.){3}(\d{1,3})$)/, {
message: 'Invalid IP address',
excludeEmptyString: true
}).test('ip', 'Invalid IP address', value => {
return value === undefined || value.trim() === ''
? true
: value.split('.').find(i => parseInt(i, 10) > 255) === undefined;
}
You can parameterize it as a function if you want to make the message dynamic
Most helpful comment
For what it's worth, you can very easily turn this into a custom validation extending
yup.string().And use it like: