nsoufian / v4f Goto Github PK
View Code? Open in Web Editor NEW:heavy_check_mark:4F | A declarative , efficient, and flexible javaScript validation library for Humans.
Home Page: https://v4f.js.org
License: MIT License
:heavy_check_mark:4F | A declarative , efficient, and flexible javaScript validation library for Humans.
Home Page: https://v4f.js.org
License: MIT License
add new sets of rules to library
I see I can do an async check. I'm just unsure how to insert a method into the username field of my signup screen to have it fail if the username doesn't work. Is this possible to do with v4f?
My schema:
const SignUpValidator = Schema(
{
email: Field()
.string()
.email({ message: "Not an e-mail address" })
.required({ message: "E-mail is required" }),
firstName: Field()
.string()
.required({ message: "First name is required." }),
lastName: Field()
.string()
.required({ message: "Last name is required."}),
password: Field()
.string()
.not.equals(['#email'], { message: "Password cannot be the same as email" })
.min(8, { message: "Password must be at least 8 characters" })
.max(64, { message: "Password cannot be longer than 64 characters" })
.required({ message: "Password is required" }),
cpassword: Field()
.equals(['#password'], { message: "Confirmation password must match password." })
.required({ message: "Password is required" })
},
{ verbose: true, async: true }
// We set the options on creation all call to Schema Product will be verbose and async
);
Implement SchemaType Object that will Be Exported as default to create validator schema,
The syntax must be like this examples :
Data to validate :
const user = {
username: "reyx",
password: "mypass",
session: false,
}
Create Simple Schema for user with no messages:
import SchemaType , {field} from "v4f";
const UserSchemaSimple = SchemaType({
username: field().string().minLength(6).maxLength(20).requierd(),
password: field().string().minLegnth(6).maxLength(30).required(),
session: field().boolean().optional()
});
import SchemaType , {field} from "v4f";
const UserSchemaMessage = SchemaType({
username: field()
.string({message:"Username field must be string"})
.minLength(6,{message:"Username field must have 6 characters min length"})
.maxLength(20, {message:"Username field must have 20 characters max length"})
.requierd({message:"Username field is required"}),
password: field()
.string({message:"Password field must be string"})
.minLegnth(6,{message:"Password field must have 6 characters min length"})
.maxLength(30, {message:"Password field must have 20 characters max length"})
.required({message:"Password field is required"}),
session: field().
boolean()
.optional()
});
nessted Schema syntax exemple:
const AdminUesr = Schematype({
isAdmin: field().
boolean()
.truthly(),
user: User
})
Simple validation with boolean resulte :
const errors = UserSchemaSimple.validate(user);
/**
error object with containe false because validation faild in
username min length
**/
Validation with object errors contains messages:
const errors = UserSchemaMessage.validate(user, {message: true});
/**
erros objects contain :
{
username: "Username field must have 6 characters min length"
}
If validation success will contain null.
**/
Validate Only one field of the schema:
const usernameError = UserSchemaMessage.username("myusername", {message: true});
/**
usernameError will contain null validation success
**/
Accept multiple field names as an array for When to check the same rule for multiple fields:
import {Schema, Field, When} from "v4f";
const User = Schema({
username: Field()
.string()
.required(),
isAdmin: Field()
.boolean()
.required(),
isActive: Field()
.boolean()
.required(),
url: Field()
.string()
.required({
when: When(
["isAdmin", "isActive"],
Field()
.boolean()
.truthy()
)
.or(
"username",
Field()
.string()
.notEquals("admin")
)
})
});
});
Add umd
Lately I've been wondering and trying to make custom function that could use value of some other related field.
I'm fine using custom validators in custom(), but can't figure out if it's possible to pass
["#someField"]
inside that custom validator, like
Field().custom(someNotYetWorkingValidator(["#someField"]))
To be more precise - I have two datepickers in my form and would like to validate their dates (later/earlier etc.)
I'm not experienced in js, but looking at source code, it doesn't seem to be possible just because how custom() is written.
export const custom = (fun, value) => fun(value);
Could you provide me with some tips? (i've been thinking about forking and trying to add some additional lines, but maybe I'm missing some existing solution)
When with nested field name not work
import {When, Field} from "v4f";
const username = Field()
.string()
.required({
when: When(
"address.zipCode",
Field()
.string()
.required()
)
});
Is there plans to add support for custom validators?
is there plans for remote validation?
import {Schema, Field, When} from "v4f";
const User = Schema({
username: Field()
.string()
.required();
email: Field()
.string()
.required();
password:Field()
.string()
.notEquals(["#username"])
.required();
passwordConfirmation:Field()
.string()
.equals(["#password"])
.required();
});
Implement cross-field validation by adding new Type When that will be added in rules options to declare the condition for that rule.
example :
import {Field, Schema, When} from "v4f";
const Server = Schema({
host: Field().string().required(),
user: Field().string().required(),
sudo: Field().boolean().truly({
when: When('user', Field().string().notEqual('root'))
})
});
Boolean sudo must be true when user field is not root.
import {Field, Schema, When} from "v4f";
const User = Schema({
username: Field().string().required(),
password: Field().string().required(),
isAdmin: Field().boolean().optional(),
isActive: Field().boolean().required(),
adminUrl: Field().string().url().required({when:
When('isAdmin',Field().boolean().truly()).end('isActive': Field().boolean().truly())
})
});
adminUrl field is required when isAdmin is true and isActive is true
Refactor and improve the code base :
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.