一、前言
在Web项目开发中，经常会遇到一些只能输入固定内容的文本框。例如，只可以输入字母、数字的文本框等，本文的案例是利用正则表达式语法来实现只可以输入四位数的年份、一位数或二位数的月份。接下来，小编大家一起来学习，如何实现限定输入内容！
二、项目准备
开发工具：HBuilderX
浏览器：Google Chrome浏览器
三、项目目标
1.掌握正则表达式的语法。
2.学会应用正则表达式。
3.掌握焦点事件和失去焦点事件。
四、项目实现
HTML
1 2<div id="box"> 3 <div id="box_01"> 4 <h2>限定输入内容</h2> 5 </div> 6 <div id="box_02"> 7 <img src="img/1.jpg" /> 8 </div> 9 <div id="box_03"> 10 <form id="form"> 11 年份<input type="text" name="year" /> 12 月份<input type="text" name="month" /> 13 <input type="submit" value="查询" /> 14 </form> 15 </div> 16 </div> 17 <div id="res"></div>
在上面代码中，div的id为box相当于一个大盒子，id为box_01、box_02、box_03相当于一个小盒子，这些小盒子依次放入大盒子中。
id为box_01主要是放置标题；
id为box_02主要是放置图片；
id为box_02主要是放置表单；
id为res是用来检验年份和月份输入是否正确提示信息。
CSS3
1 2#box{ 3 width: 800px; 4 height: 430px; 5 display: flex; 6 text-align: center; 7 flex-direction: column; 8 justify-content: center; 9 } 10 #box_01{ 11 width: 800px; 12 height: 70px; 13 color: #0086B3; 14 } 15 img{ 16 width: 400px; 17 height: 300px; 18 } 19 #box_02{ 20 width: 800px; 21 height: 310px; 22 } 23 #box_03{ 24 width: 800px; 25 height: 50px; 26 } 27 #res{ 28 width: 800px; 29 height: 100px; 30 font-weight: bold; 31 text-align: center; 32 }
在上面代码中，#box表示大盒子的样式，宽度和高度分别为800、430px，使用弹性布局display: flex。
flex-direction属性表示控制主轴的方向，colum表示垂直方向。
justify-content属性表示项目在主轴上的对齐方式，center表示中间。
#box_01、#box_02、#box_03主要是设置div块的宽度和高度。
#res设置div块宽度、高度、字体加粗(font-weight)、文字对齐方式(text-align)。
JavaScript
1.首先是获取操作元素的对象
1 2var f=document.getElementById('form') 3var res=document.getElementById('res') 4var ipc=document.getElementsByTagName('input')
在上面代码中，使用document.getElementById()方法获取操作元素对象的id，document.getElementsByTagName()方法是返回带有标签名的对象集合。
2.检验年份函数chooseYear()
1function chooseYear(y){ 2 if(!y.value.match(/^\d{4}$/)){ 3 y.style.borderColor='yellow'; 4 res.innerHTML='您的输入有误，年份需要4位数字'; 5 return false; 6 } 7 alert('年份格式输入正确') 8 return true; 9}
在上面代码中，chooseYear(y)函数中的y参数表示年份元素的一个对象，通过获取y的value值，然后使用match()方法进行正则匹配。
如果年份不是四位数，通过设置文本框的边框颜色为黄色，获取id为res，插入提示信息的内容。
如果年份是四位数，则使用alert()方法，弹出一个弹框显示“年份格式输入正确”。
3.检验月份函数chooseMonth()
1 2function chooseMonth(m){ 3 if(!m.value.match(/^((0?[1-9])|(1[012]))$/)){ 4 m.style.borderColor='yellow'; 5 res.innerHTML='您的输入有误，月份1~12范围内' 6 return false; 7 } 8 alert('月份格式输入正确') 9 return true; 10}
在上面代码中，chooseMonth(m)函数中的m参数表示月份元素的一个对象，通过获取m的value值，然后使用match()方法进行正则匹配。
”(0?[1-9])“表示前面有0或没有0的表示第一月份到第九月份；
“(1[012])”表示第十月份到十二月份。
4.设置年份和月份焦点事件
1ipc.year.onfocus=function(){ 2 this.style.borderColor='blue' 3} 4ipc.month.onfocus=function(){ 5 this.style.borderColor='blue' 6}
在上面代码中，用户点击年份和月份输入框，设置焦点事件，之后，设置文本框的颜色为蓝色。
5.设置年份和月份失去焦点——主要是用来优化用户的体检效果
1 2ipc.year.onblur=function(){ 3 this.value=this.value.trim(); 4 chooseYear(this); 5} 6ipc.month.onblur=function(){ 7 this.value=this.value.trim(); 8 chooseMonth(this); 9}
在上面代码中，trim()方法是去掉两端的空格。
6.检验提交的表单
1f.onsubmit=function(){ 2 return chooseYear(ipc.year)&&chooseMonth(ipc.month) 3};
在上面代码中，表单提交时，调用chooseYear()和chooseMonth()函数检验年份和月份。
效果图如下所示：
五、总结
1.本文基于JavaScript基础，实现限定输入内容的功能。对每一个div层进行详解，让读者更好的理解。
2.在JavaScript中首先获取操作元素的对象，事件处理函数年份和月份分别是chooseYear()、chooseMonth()。chooseYear(y)和chooseMonth(m)函数中获取年份元素和月份元素对象，之后，获取它们的value值，使用match()方法进行正则匹配。为了用户的体检效果添加焦点事件和失去焦点事件。
3.代码没有那么复杂，希望对你有所帮助！
最后需要本文项目代码的小伙伴，请在公众号后台回复“限定内容”关键字进行获取，如果在运行过程中有遇到任何问题，请随时留言或者加小编好友，小编看到会帮助大家解决bug噢！
-------------------********************************** End **********-------------**-----********-**********************************
往期精彩文章推荐：
欢迎各位大佬点击链接加入群聊【helloworld开发者社区】：https://jq.qq.com/?_wv=1027&k=mBlk6nzX进群交流IT技术热点。