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

package.json-Datei

Datenbank:

Datenbank

Ausgabe:

Versuchen Sie sich anzumelden, wenn das Eingabefeld für den Benutzernamen nicht alphanumerisch ist

Antwort, wenn versucht wird, sich mit einem Benutzernamen-Eingabefeld anzumelden, das nicht alphanumerisch ist

Versuchen Sie sich anzumelden, wenn das Eingabefeld für den Benutzernamen nur alphanumerische Zeichen enthält

Antwort beim Versuch, sich mit einem Benutzernamen-Eingabefeld anzumelden, das nur alphanumerische Zeichen enthält

Datenbank nach erfolgreicher Anmeldung:

Datenbank nach erfolgreicher Anmeldung

Hinweis: Wir haben einige Bulma-Klassen (CSS-Framework) in der Datei signup.js verwendet, um den Inhalt zu gestalten.