Wie validiere ich, ob die Eingabe im Eingabefeld nur alphanumerische Zeichen enthält, indem ich express-validator verwende?
In HTML-Formularen haben wir oft eine Validierung verschiedener Typen gefordert. Bestehende E-Mail validieren, Passwortlänge validieren, Passwort bestätigen, validieren, um nur ganzzahlige Eingaben zuzulassen, dies sind einige Beispiele für die Validierung. In einem bestimmten Eingabefeld sind nur alphanumerische Zeichen erlaubt, dh es sind keine Sonderzeichen erlaubt. Wir können diese Eingabefelder auch validieren, um nur alphanumerische Zeichen mit Express-Validator-Middleware zu akzeptieren.
Befehl zum Installieren von Express-Validator:
npm install express-validator
Schritte zur Verwendung von Express-Validator zur Implementierung der Logik:
- Installieren Sie Express-Validator-Middleware.
- Erstellen Sie eine validator.js-Datei, um die gesamte Validierungslogik zu codieren.
- Validieren Sie die Eingabe durch validateInputField: check(input field name) und verketten Sie die Validierung isAlphanumeric() mit ' . '
- Verwenden Sie den Validierungsnamen (validateInputField) in den Routen als Middleware als Array von Validierungen.
- Destrukturieren Sie die Funktion „validationResult“ aus dem Express-Validator, um sie zum Auffinden von Fehlern zu verwenden.
- Wenn ein Fehler auftritt, leiten Sie auf dieselbe Seite weiter und übergeben die Fehlerinformationen.
- Wenn die Fehlerliste leer ist, geben Sie dem Benutzer Zugriff für die nachfolgende Requests.
Hinweis: Hier verwenden wir eine lokale oder benutzerdefinierte Datenbank, um die Logik zu implementieren. Dieselben Schritte können befolgt werden, um die Logik in einer regulären Datenbank wie MongoDB oder MySql zu implementieren.
Beispiel: Dieses Beispiel veranschaulicht, wie ein Eingabefeld validiert wird, um nur die Buchstaben zuzulassen.
Dateiname – index.js
const express = require('express') const bodyParser = require('body-parser') const {validationResult} = require('express-validator') const repo = require('./repository') const { validateUsername } = require('./validator') const signupTemplet = require('./signup') const app = express() const port = process.env.PORT || 3000 // The body-parser middleware to parse form data app.use(bodyParser.urlencoded({extended : true})) // Get route to display HTML form to sign up app.get('/signup', (req, res) => { res.send(signupTemplet({})) }) // Post route to handle form submission logic and app.post( '/signup', [validateUsername], async (req, res) => { const errors = validationResult(req) if(!errors.isEmpty()) { return res.send(signupTemplet({errors})) } const {email, username, password} = req.body await repo.create({ email, username, password }) res.send('Sign Up successfully') }) // Server setup app.listen(port, () => { console.log(`Server start on port ${port}`) })
Dateiname – repository.js: Diese Datei enthält die gesamte Logik, um eine lokale Datenbank zu erstellen und mit ihr zu interagieren.
// Importing node.js file system module const fs = require('fs') class Repository { constructor(filename) { // Filename where datas are going to store if(!filename) { throw new Error('Filename is required to create a datastore!') } this.filename = filename try { fs.accessSync(this.filename) } catch(err) { // If file not exist it is created with empty array fs.writeFileSync(this.filename, '[]') } } // Get all existing records async getAll(){ return JSON.parse( await fs.promises.readFile(this.filename, { encoding : 'utf8' }) ) } // Create new record async create(attrs){ const records = await this.getAll() records.push(attrs) await fs.promises.writeFile( this.filename, JSON.stringify(records, null, 2) ) return attrs } } // The 'datastore.json' file created at runtime // and all the information provided via signup form // store in this file in JSON format. module.exports = new Repository('datastore.json')
Dateiname – signup.js: Diese Datei enthält Logik zum Anzeigen des Anmeldeformulars.
const getError = (errors, prop) => { try { return errors.mapped()[prop].msg } catch (error) { return '' } } module.exports = ({errors}) => { return ` <!DOCTYPE html> <html> <head> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.min.css'> <style> div.columns{ margin-top: 100px; } .button{ margin-top : 10px } </style> </head> <body> <div class='container'> <div class='columns is-centered'> <div class='column is-5'> <h1 class='title'>Sign Up<h1> <form method='POST'> <div> <div> <label class='label' id='email'>Email</label> </div> <input class='input' type='text' name='email' placeholder='Email' for='email'> </div> <div> <div> <label class='label' id='fn'>Username</label> </div> <input class='input' type='text' name='username' placeholder='Username' for='username'> <p class="help is-danger">${getError(errors, 'username')}</p> </div> <div> <div> <label class='label' id='password'>Password</label> </div> <input class='input' type='password' name='password' placeholder='Password' for='password'> </div> <div> <button class='button is-primary'>Sign Up</button> </div> </form> </div> </div> </div> </body> </html> ` }
Dateiname – validator.js: Diese Datei enthält die gesamte Validierungslogik (Logik zum Validieren eines Eingabefelds, um nur alphanumerische Zeichen zuzulassen).
const {check} = require('express-validator') const repo = require('./repository') module.exports = { validateUsername : check('username') // To delete leading and triling space .trim() // Validate minimum length of password // Optional for this context .isLength({min:4}) // Custom message .withMessage('Username must be minimum 4 characters long') // Validate username to be alphanumeric .isAlphanumeric() // Custom message .withMessage('Username must be alphanumeric') }
Dateiname – Paket.json
Datenbank:
Ausgabe:
Datenbank nach erfolgreicher Anmeldung:
Hinweis: Wir haben einige Bulma-Klassen (CSS-Framework) in der Datei signup.js verwendet, um den Inhalt zu gestalten.