Как с помощью экспресс-валидатора проверить, совпадает ли ввод в поле ввода с каким-либо другим значением?
В HTML-формах нам часто требовалась проверка разных типов. Подтвердите существующую электронную почту, подтвердите длину пароля, подтвердите пароль, подтвердите, чтобы разрешить только целочисленные вводы, это некоторые примеры проверки. В некоторых случаях мы хотим, чтобы пользователь ввел какое-то точное значение, и на основании этого мы предоставляем пользователю доступ к запросу или запрещаем доступ к запросу. Мы также можем проверить эти поля ввода, чтобы принять некоторые точные требуемые значения, в противном случае отклонить запрос с помощью промежуточного программного обеспечения экспресс-проверки.
Команда для установки экспресс-валидатора:
npm установить экспресс-валидатор
Шаги по использованию экспресс-валидатора для реализации логики:
- Установите промежуточное ПО экспресс-валидатора.
- Создайте файл validator.js для кодирования всей логики проверки.
- Подтвердите ввод с помощью validateInputField: проверьте (имя поля ввода) и установите цепочку для проверки equals () с '. '
- Мы также можем использовать настраиваемый валидатор, чтобы проверить, хотите ли вы передать требуемый текст для ввода в поле ввода в качестве тела запроса.
- Используйте имя проверки (validateInputField) в маршрутах в качестве промежуточного программного обеспечения в качестве массива проверок.
- Уничтожьте функцию validationResult из экспресс-валидатора, чтобы использовать ее для поиска ошибок.
- В случае возникновения ошибки перенаправьте на ту же страницу, передав информацию об ошибке.
- Если список ошибок пуст, предоставьте пользователю доступ для последующего запроса.
Примечание: здесь мы используем локальную или настраиваемую базу данных для реализации логики, те же шаги могут быть выполнены для реализации логики в обычной базе данных, такой как MongoDB или MySql.
Пример. В этом примере показано, как проверить поле ввода, чтобы разрешить только некоторое точное значение.
Имя файла - index.js
const express = require( 'express' ) const bodyParser = require( 'body-parser' ) const {validationResult} = require( 'express-validator' ) const repo = require( './repository' ) const { validateDeclaration } = require( './validator' ) const showTemplet = require( './show' ) 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 type declaration // and submit to delete the record app.get( '/' , (req, res) => { res.send(showTemplet({})) }) // Post route to handle form submission logic and app.post( '/record/delete/:id' , [validateDeclaration], async (req, res) => { const errors = validationResult(req) if (!errors.isEmpty()){ return res.send(showTemplet({errors})) } const id = req.params.id await repo. delete (id) res.send( 'Record Deleted successfully' ) }) // Server setup app.listen(port, () => { console.log(`Server start on port ${port}`) }) |
Имя файла - repository.js: этот файл содержит всю логику для создания локальной базы данных и взаимодействия с ней.
// 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' }) ) } // Delete record async delete (id) { const records = await this .getAll() const filteredRecords = records.filter(record => record.id !== id) await fs.promises.writeFile( this .filename, JSON.stringify(filteredRecords, null , 2) ) } } // The 'datastore.json' file created at runtime // and all the information provided via signup form // store in this file in JSON formet. module.exports = new Repository( 'datastore.json' ) |
Имя файла - show.js: этот файл содержит логику для отображения объявления и поля ввода для объявления типа.
const getError = (errors, prop) => { try { return errors.mapped()[prop].msg } catch (error) { return '' } } module.exports = ({errors}) => { const id = 'd8f98678eb8a' const declaration= `I read all FAQ and wants to delete the record with id ${id}` return ` <!DOCTYPE html> <html> <head> <link rel= 'stylesheet' <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' > <div class= 'title is-5' >Declaration :</div> <h2 class= 'subtitle is-5 has-text-danger' > ${declaration} </h2> <form action= 'record/delete/${id}' method= 'POST' > <div> <input type= 'text' hidden name= 'declaration' value= '${declaration}' > <input class= 'input' type= 'text' name= 'typedDeclaration' placeholder = 'Type Declaration' > <p class= "help is-danger" >${getError(errors, 'typedDeclaration' )}</p> </div> <div> <button class= 'button is-primary' >Delete</button> </div> </form> </div> </div> </div> </body> </html> ` } |
Имя файла - validator.js: этот файл содержит всю логику проверки (логика для проверки поля ввода, чтобы допускалось только некоторое точное значение).
const {check} = require( 'express-validator' ) const repo = require( './repository' ) module.exports = { validateDeclaration : check( 'typedDeclaration' ) // To delete leading and trailing space .trim() // Custom validator // Check string matches with comparision // (some exact value) or not .custom(async (typedDeclaration, {req}) => { const declaration = req.body.declaration if ( typedDeclaration !== declaration){ throw new Error( 'Please type exact declaration' ) } }) } |
Имя файла - package.json
База данных:
Выход:
База данных после успешной отправки формы:
Примечание. Мы использовали некоторые классы Bulma (фреймворк CSS) в файле signup.js для разработки контента.