Creé una aplicación de reacción para tomar las entradas del usuario.
class VehiReg extends Component { constructor(props){ super(props); this.state={ vehicle:"", plateNo:"", owner:"", manufacturer:"", manufacturedYear:"", color:"" } } takInput = (e) => { const {name,value}= e.target; this.setState({ ...this.state, [name]:value }) } register = (e) =>{ e.preventDefault(); const {plateNo,owner,manufacturer,manufacturedYear,color,vehicle} = this.state; const data ={ plateNo:plateNo, owner:owner, manufacturer:manufacturer, manufacturedYear:manufacturedYear, color:color, vehicle:vehicle } console.log(data); axios.post("http://localhost:8080/registrations/new",data).then((res)=>{ if(res.data.success){ this.setState({ vehicle:"", plateNo:"", owner:"", manufacturer:"", manufacturedYear:"", color:"" }) } }) } <div className="box"> <input placeholder="Enter the licence plate number " className="input2" name="plateNo" value={this.state.plateNo} onChange={this.takInput} /> </div>entonces quiero validar la entrada que ingresa el usuario. La matrícula del vehículo puede tener muchas formas:
· Cosecha: 13 ශ්රී 9999
· Antiguo: 250-9999, 19-9999
· Moderno: WP GA-9999, CAR-9999
luego, de acuerdo con el tipo que ingresa el usuario, quiero escribir una función en el backend para validar y categorizar las entradas del usuario. Por otra parte, quiero devolver el tipo de vehículo a la interfaz
lo principal que quiero saber es cómo puedo validar la entrada del usuario en el backend. aquí está el código que he escrito para ingresar los datos en la base de datos, antes de ingresar los datos en la base de datos, se debe ejecutar la función de validación.
//new registration router.post("/registrations/new",(req, res)=>{ let newRegistration = new Registrations(req.body); newRegistration.save((err)=>{ if(err){ return res.status(400).json({ error:err }) } return res.status(200).json({ success:"registration Ok" }); }); });Hay diferentes tipos de hacer validaciones y compartiré uno que he usado, espero que esto pueda ayudarlo.
En Frontend: agregue propiedades al estado:
this.state = { plateNo: '', plateNoError: ''}, plateNoValid: false, } takInput = (e) => { const {plateNo,value}= e.target; const plateNoRegEx = `^[AZ]{2}[ -][0-9]{1,2}(?: [AZ])?(?: [AZ]*)? [0-9]{4}$` if(!value){ this.setState({ ...this.state, [plateNoError]:"Plate number cannot be empty" }) }else if(!plateNo.match(plateNoRegEx)){ this.setState({ ...this.state, [plateNoError]:"Invalid Plate Number" }) }else{ this.setState({ ...this.state, [plateNo]: value, [plateNoError]:'' }) } } <div className="box"> <input placeholder="Enter the licence plate number " className="input2" name="plateNo" value= {this.state.plateNo} onChange={this.takInput} /> {this.state.plateNoError && <p>{this.state.plateNoError}</p> } </div>Para el backend , puede usar 1) Express validator - npm install --save express-validator 2) Joi - https://joi.dev/ - npm i joi
ambos son buenos para validar solicitudes y puede seguir el formato (ruta - controlador -servicio), donde puede escribir validaciones en la ruta.
eg: router .route('/registrations/new') .post(validate(publicValidation.getUserByEmail), publicController.getUserByEmail) const getUserByEmail = { body: Joi.object().keys({ email: Joi.string().required(), ..... }) };