Image for post
Image for post
Photo by Trnava University on Unsplash

Form validation is an important part of any app.

In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.

min

The min rule specifies that the length of the inputted value shouldn’t be less than the specified length.

For instance, we can write:

Object.keys(rules).forEach((rule) => {
defineRule(rule, rules[rule]);
});
export default { components: { Form, Field, }, methods: { onSubmit(values) { alert(JSON.stringify(values…


Image for post
Image for post
Photo by Nathan Anderson on Unsplash

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create an image slider app with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

with NPM to create our React project.

Create the Image Slider App

To create the image slider app, we write:

const images = [
"https://i.picsum.photos/id/1/200/300.jpg?hmac=jH5bDkLr6Tgy3oAg5khKCHeunZMHq0ehBZr6vGifPLY",
"https://i.picsum.photos/id/2/200/300.jpg?hmac=HiDjvfge5yCzj935PIMj1qOf4KtvrfqWX3j4z1huDaU",
"https://i.picsum.photos/id/3/200/300.jpg?hmac=o1-38H2y96Nm7qbRf8Aua54lF97OFQSHR41ATNErqFc"
];
export default function App() {
const [index, setIndex] = useState(0);
const next = () => { setIndex((i) => (i +…


Image for post
Image for post
Photo by Nicolas Peršolja on Unsplash

Form validation is an important part of any app.

In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.

Use Predefined Rules

We can use predefined validation rules from the @vee-validate/rules package.

To install the package, we run:

or:

Then we can add the rules from the package with the defineRule function by writing:


Image for post
Image for post
Photo by Noah Silliman on Unsplash

Hapi.js is a small Node framework for developing back end web apps.

In this article, we’ll look at how to create back end apps with Hapi.js.

Rendering Templates

We can render Nunjucks templates in our Hapi app with the @hapi/vision plugin.

To do this, we write:

index.js

const server = Hapi.Server({ port: 3000 });const rootHandler = (request, h) => {
return h.view('index', {
title: request.server.version,
message: 'Hello!'
});
};
const init = async () => {
await server.register(Vision);
server.views({ engines: { html: { compile: (src, options) => { const…


Image for post
Image for post
Photo by Bruce Tang on Unsplash

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a counter app with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

with NPM to create our React project.

Create the Counter App

To create the counter app, we write:

export default function App() {
const [count, setCount] = useState(0);
const increment = () => {
setCount((c) => c + 1);
};
const decrement = () => { setCount((c) =>…


Image for post
Image for post
Photo by Helena Lopes on Unsplash

Hapi.js is a small Node framework for developing back end web apps.

In this article, we’ll look at how to create back end apps with Hapi.js.

Rendering Templates

We can render templates with the @hapi/vision module.

For instance, we can write:

index.js

const server = Hapi.Server({ port: 3000 });const rootHandler = (request, h) => {
return h.view('index', {
title: request.server.version,
message: 'Hello Ejs!'
});
};
const init = async () => {
await server.register(Vision);
server.views({
engines: { ejs: Ejs },
relativeTo: __dirname,
path: 'templates'
});
server.route({ method: 'GET'…


Image for post
Image for post
Photo by Susan Holt Simpson on Unsplash

Form validation is an important part of any app.

In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.

Rules with Multiple Parameters

We can have global validation rules with multiple parameters.

To define and use them, we write:

    <button>Submit</button>
</Form>
</template>
<script>
import { Form, Field, ErrorMessage, defineRule } from "vee-validate";
defineRule("required", (value) => {
if (!value || !value.length) {
return "This field is required";
}
return true;
});
defineRule("min", (value, [min, max]) => { if (!value || !value.length) { return…


Image for post
Image for post
Photo by Eka Bima Sitorus on Unsplash

Form validation is an important part of any app.

In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.

max

We can use the max rule to make sure the entered value doesn’t exceed the specified length.

For instance, we can write:

Object.keys(rules).forEach((rule) => {
defineRule(rule, rules[rule]);
});
export default {
components: {
Form,
Field,
},
methods: {
onSubmit(values) {
alert(JSON.stringify(values, …


Image for post
Image for post
Photo by Paréj Richárd on Unsplash

Form validation is an important part of any app.

In this article, we’ll look at how to use Vee-Validate 4 in our Vue 3 app for form validation.

is

The is rule lets us validate that the entered value must match the given value.

The match is determined by strict equality.

For instance, we can write:

<script>
import { Form, Field, defineRule } from "vee-validate";
import * as rules from "@vee-validate/rules";
Object.keys(rules).forEach((rule) => {
defineRule(rule, rules[rule]);
});
export default { components: { Form, Field, }, methods…


Image for post
Image for post
Photo by Brooke Cagle on Unsplash

Hapi.js is a small Node framework for developing back end web apps.

In this article, we’ll look at how to create back end apps with Hapi.js.

Get User Agent Info

We can get user agent info from the request with the @hapi/scooter module.

To use it, we write:

const init = async () => {
const server = new Hapi.Server({
port: 3000,
host: '0.0.0.0'
});
server.route({
method: 'GET',
path: '/',
config: {
handler(request, h) {
return request.plugins.scooter;
},
}
});
await server.register(Scooter);
await server.start();
console.log('Server running at:', server.info.uri);
};
process.on('unhandledRejection', (err) => {
console.log(err);
process.exit(1);
});

John Au-Yeung

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store