一、过滤非数字和字母
在编写输入框时，经常需要对用户输入的进行过滤，只允许输入数字和字母。这样做的好处是保证输入内容的规范性，避免了一些特殊符号或汉字对系统的影响。在前端开发中，可以使用JavaScript中的正则表达式进行匹配。代码示例：
const reg = /^[0-9a-zA-Z]*$/;
const input = document.getElementById("input");
if(reg.test(input.value)){
//输入内容规范
}else{
//输入内容非法，进行提示
}
有了上面的代码示例，输入框将只允许输入数字和大小写字母，其余字符将被过滤掉。
二、按键响应
在实际开发中，用户的输入可能不仅仅是在输入框中输入，还可能会使用键盘的方向键、删除键等。这时候需要对按键进行响应，保证输入框只接收数字和字母。代码示例：
const input = document.getElementById("input");
input.addEventListener('keydown',(event)=>{
const keyCode = event.keyCode;
//只允许输入数字和字母
if(!((keyCode>=48 && keyCode=65 && keyCode=96 && keyCode<=105))){
event.preventDefault();
}
})
通过监听keydown事件，过滤掉仅允许输入数字和字母以外的按键，例如方向键、删除键等，保证输入框只接收数字和字母。
三、移动端处理
在移动端中，输入框的输入方式和PC端有所不同，用户使用虚拟键盘进行输入。需要对虚拟键盘进行定制，只显示数字和字母。可以通过设置input元素的type为text，再设置pattern为正则表达式，来实现只允许输入数字和字母。代码示例：
<input type="text" pattern="[0-9a-zA-Z]*" placeholder="请输入数字和字母">
通过设置input的type为text，pattern为正则表达式，只允许输入数字和字母，保证了移动端输入框输入内容规范性。
四、前后台数据验证
在前后台交互中，输入框只接收数字和字母的举措是前端的实现，但是网络不安全，前端数据验证是不够的，还需要后台进行二次检验。
//后台代码示例
const express = require('express');
const app = express();
const port = 3000;
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.post('/userinfo',(req,res)=>{
const reg = /^[0-9a-zA-Z]*$/;
if(reg.test(req.body.username) && reg.test(req.body.password)){
//数据合法，对数据进行处理
}else{
//数据非法，返回错误信息
res.json({code:-1,msg:"输入内容非法"});
}
})
app.listen(port,()=>{
console.log(`Example app listening at http://localhost:${port}`)
})
通过后台代码对数据进行检测，保证输入内容的规范性不受到网络的影响，提高了系统的安全性。
原创文章，作者：ZXTU，如若转载，请注明出处：https://www.506064.com/n/148439.html
微信扫一扫 
支付宝扫一扫 