阻止输入

开发工具与关键技术：VS    JS
作者：宋永烨
撰写时间：2019/5/21

在form表单中,有很多用于收集用户信息的组件,而收集最常用的就是文本框了,用户直接在其中输入你想要获取的信息,但有时候,用户输入的信息与你想要的信息可能会有一些不同,而这时,就需要通过正则来阻止用户的输入,具体流程如下

1. 在文本框中添加键盘按下或弹起事件
2. 在上一步的事件中,通过方法替换value的值,即文本框的值
3. 通过正则来查询用户输入
4. 将用户输入的违规字符替换为你想要显示的文本
   一.
   在一个文本框内,添加一个内联的点击事件
   也可以通过id找到这个文本框,在进行修改,但为了代码的整洁,较短的正则可以直接通过内联写在标签上
   
   关于键盘的事件共有三个
5. 键盘按下事件:onkeydown 当按下键盘上的某个按键后触发此事件对应的方法
6. 键盘弹起(松开)事件: onkeyup 当键盘上的某个键弹起时触发该事件对应的方法
7. 键盘按下后弹起(松开)事件: onkeypress 当键盘上的某个按键被按下且弹起(松开)后触发本事件对应的方法
   这三个事件都可以用,细微的差别并不影响最终实现的效果
   二.
   在键盘按下(或其他的与键盘有关的事件)事件中 获取value的值并替换后赋值给value,
   value.replace 的作用便是替换value的值,至于具体需要替换的与替换成的对象则是replace的参数值
   
   replace,一共有两个值,第一个是需要替换的对象,可以是一个字符串或是一个正则表达式,如果是正则表达式,则不会将正则本身在需要替换的目标中进行匹配,而是替换正则匹配出的目标,譬如 正则 \d 匹配所有数字,将它作为替换方法的第一个参数即表示,需要替换的支付串中的所有数字
   第二个参数用与替换需要替换的文本,它可以是函数或字符串,当它为字符串时,$符号酱油特殊含义,$1～$99对应 参数一匹配到的1到99的文本
   $& 与需要替换的文本相匹配的字符串
   特殊符号并非只有这些,其余的请自行搜索,以上解释来自W3School
   三.
   
   上图就时两个已近完成的input标签,第一个的作用时,匹配所有的数字,将它替换为空
   注:正则表达式在代码中嵌套需要写在双斜杠中(不同种类代码可能会有差异),g表示忽略大小写
   第二个就是用于身份证输入的文本框,因为身份证只能输入0到9与大小写的x,所以替换除可输入字符外的一切字符,替换为空
   由于这个只是输入的限制,还有别的限制,上文并未体现,所以略显简陋
   比如则个身份证的,他还有一个配套的焦点失去后检测输入的文本是否是合法的身份证的方法
   onblur事件: 当对象失去焦点后触发,支持大部分标签
   
   上图的效果便是,在input标签失去焦点后,弹出一个提示

总结:
总的来说,阻止用户输入的目标是为了获得正确的信息,使设计的数据库可以接收用户输入的数据,且是正确的
键盘的响应事件可以在标签的内部直接添加,当然也可以在js中添加,全凭喜好,主要用于判断用户输入的内容是否符合规则(比如身份证,只有数字与大小写x,等),
给input标签替换的value值,在替换后需要给value赋值,否则等于没有替换,当替换的对象为空时,效果等同与删除
正则表达式需要仔细区分,否则非常容易出错,在 [] 中 ^符号代表的意思不是开始,而是取反
失去焦点事件可以用于提醒用户的输入是否规范,譬如用户在注册账号时,需要两次进行确认密码,而如何判断用户输入完成,就是看密码框的焦点是否失去,失去焦点表示用户已近输入完成,即可开始判断两次输入是否一致

部分注释参考或借鉴了W3School 部分代码来源于老师