手把手教你使用JavaScript实现限定输入内容

一、手把手教使用实现输入前言

在Web项目开发中，限定经常会遇到一些只能输入固定内容的内容文本框。例如，手把手教使用实现输入只可以输入字母、限定数字的内容文本框等，本文的手把手教使用实现输入案例是利用正则表达式语法来实现只可以输入四位数的年份、一位数或二位数的限定月份。接下来，内容小编大家一起来学习，手把手教使用实现输入如何实现限定输入内容!

二、限定项目准备

开发工具：HBuilderX

浏览器：Google Chrome浏览器

三、内容项目目标

1.掌握正则表达式的手把手教使用实现输入语法。

2.学会应用正则表达式。限定

3.掌握焦点事件和失去焦点事件。内容

四、项目实现

HTML

<div id="box">       <div id="box_01">           <h2>限定输入内容</h2>       </div>       <div id="box_02">           <img src="img/1.jpg" />       </div>       <div id="box_03">       <form id="form">           年份<input type="text" name="year" />           月份<input type="text" name="month" />       <input type="submit" value="查询" />       </form>   </div>   </div>   <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是云南idc服务商用来检验年份和月份输入是否正确提示信息。

CSS3

#box{          width: 800px;         height: 430px;         display: flex;         text-align: center;         flex-direction: column;         justify-content: center;     }     #box_01{          width: 800px;         height: 70px;         color: #0086B3;     }     img{          width: 400px;         height: 300px;     }     #box_02{          width: 800px;         height: 310px;     }     #box_03{          width: 800px;         height: 50px;     }     #res{          width: 800px;         height: 100px;         font-weight: bold;         text-align: center;     } 

在上面代码中，#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.首先是获取操作元素的对象

var f=document.getElementById(form) var res=document.getElementById(res) var ipc=document.getElementsByTagName(input) 

在上面代码中，使用document.getElementById()方法获取操作元素对象的id，document.getElementsByTagName()方法是返回带有标签名的对象集合。

2.检验年份函数chooseYear()

function chooseYear(y){      if(!y.value.match(/^\d{ 4}$/)){          y.style.borderColor=yellow;         res.innerHTML=您的输入有误，源码下载年份需要4位数字;         return false;     }     alert(年份格式输入正确)     return true; } 

在上面代码中，chooseYear(y)函数中的y参数表示年份元素的一个对象，通过获取y的value值，然后使用match()方法进行正则匹配。

如果年份不是四位数，通过设置文本框的边框颜色为黄色，获取id为res，插入提示信息的内容。

如果年份是四位数，则使用alert()方法，弹出一个弹框显示“年份格式输入正确”。

3.检验月份函数chooseMonth()

function chooseMonth(m){      if(!m.value.match(/^((0?[1-9])|(1[012]))$/)){          m.style.borderColor=yellow;         res.innerHTML=您的输入有误，月份1~12范围内         return false;     }     alert(月份格式输入正确)     return true; } 

在上面代码中，chooseMonth(m)函数中的m参数表示月份元素的一个对象，通过获取m的value值，然后使用match()方法进行正则匹配。

”(0?[1-9])“表示前面有0或没有0的表示第一月份到第九月份;

“(1[012])”表示第十月份到十二月份。

4.设置年份和月份焦点事件

ipc.year.onfocus=function(){      this.style.borderColor=blue } ipc.month.onfocus=function(){      this.style.borderColor=blue } 

在上面代码中，用户点击年份和月份输入框，设置焦点事件，之后，站群服务器设置文本框的颜色为蓝色。

5.设置年份和月份失去焦点——主要是用来优化用户的体检效果

ipc.year.onblur=function(){      this.value=this.value.trim();     chooseYear(this); } ipc.month.onblur=function(){      this.value=this.value.trim();     chooseMonth(this); } 

在上面代码中，trim()方法是去掉两端的空格。

6.检验提交的表单

f.onsubmit=function(){      return chooseYear(ipc.year)&&chooseMonth(ipc.month) }; 

在上面代码中，表单提交时，调用chooseYear()和chooseMonth()函数检验年份和月份。

效果图如下所示：

五、总结

1.本文基于JavaScript基础，实现限定输入内容的功能。对每一个div层进行详解，让读者更好的理解。

2.在JavaScript中首先获取操作元素的对象，事件处理函数年份和月份分别是chooseYear()、chooseMonth()。chooseYear(y)和chooseMonth(m)函数中获取年份元素和月份元素对象，之后，获取它们的value值，使用match()方法进行正则匹配。为了用户的体检效果添加焦点事件和失去焦点事件。

3.代码没有那么复杂，希望对你有所帮助!