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

一、前言

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

创新互联公司是一家专业提供华亭企业网站建设,专注与成都做网站、成都网站设计、html5、小程序制作等业务。10年已为华亭众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

二、项目准备

开发工具：HBuilderX

浏览器：Google Chrome浏览器

三、项目目标

1.掌握正则表达式的语法。

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

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

四、项目实现

HTML

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2.       
    3. 
  
  
  
  
  3.           
    限定输入内容
    4. 
  
  
  
  
  4.       
  •       
  •           
  •       
  •       
  •       
  •           年份
  •           月份
  •       
  •       
  •   
  •   
  •   

    • 在上面代码中，div的id为box相当于一个大盒子，id为box_01、box_02、box_03相当于一个小盒子，这些小盒子依次放入大盒子中。

    id为box_01主要是放置标题;

    id为box_02主要是放置图片;

    id为box_02主要是放置表单;

    id为res是用来检验年份和月份输入是否正确提示信息。

    CSS3

     
 
 
 
      
  
  
  
  
    1. #box{
      2. 
  
  
  
  
    2.         width: 800px;
      3. 
  
  
  
  
    3.         height: 430px;
      4. 
  
  
  
  
    4.         display: flex;
      5. 
  
  
  
  
    5.         text-align: center;
      6. 
  
  
  
  
    6.         flex-direction: column;
      7. 
  
  
  
  
    7.         justify-content: center;
      8. 
  
  
  
  
    8.     }
      9. 
  
  
  
  
    9.     #box_01{
      10. 
  
  
  
  
    10.         width: 800px;
      11. 
  
  
  
  
    11.         height: 70px;
      12. 
  
  
  
  
    12.         color: #0086B3;
      13. 
  
  
  
  
    13.     }
      14. 
  
  
  
  
    14.     img{
      15. 
  
  
  
  
    15.         width: 400px;
      16. 
  
  
  
  
    16.         height: 300px;
      17. 
  
  
  
  
    17.     }
      18. 
  
  
  
  
    18.     #box_02{
      19. 
  
  
  
  
    19.         width: 800px;
      20. 
  
  
  
  
    20.         height: 310px;
      21. 
  
  
  
  
    21.     }
      22. 
  
  
  
  
    22.     #box_03{
      23. 
  
  
  
  
    23.         width: 800px;
      24. 
  
  
  
  
    24.         height: 50px;
      25. 
  
  
  
  
    25.     }
      26. 
  
  
  
  
    26.     #res{
      27. 
  
  
  
  
    27.         width: 800px;
      28. 
  
  
  
  
    28.         height: 100px;
      29. 
  
  
  
  
    29.         font-weight: bold;
      30. 
  
  
  
  
    30.         text-align: center;
      31. 
  
  
  
  
    31.     }
      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. var f=document.getElementById('form')
      2. 
  
  
  
  
    2. var res=document.getElementById('res')
      3. 
  
  
  
  
    3. var ipc=document.getElementsByTagName('input')
      4.

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

    2.检验年份函数chooseYear()

     
 
 
 
      
  
  
  
  
    1. function chooseYear(y){
      2. 
  
  
  
  
    2.     if(!y.value.match(/^\d{4}$/)){
      3. 
  
  
  
  
    3.         y.style.borderColor='yellow';
      4. 
  
  
  
  
    4.         res.innerHTML='您的输入有误，年份需要4位数字';
      5. 
  
  
  
  
    5.         return false;
      6. 
  
  
  
  
    6.     }
      7. 
  
  
  
  
    7.     alert('年份格式输入正确')
      8. 
  
  
  
  
    8.     return true;
      9. 
  
  
  
  
    9. }
      10.

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

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

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

    3.检验月份函数chooseMonth()

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

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

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

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

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

     
 
 
 
      
  
  
  
  
    1. ipc.year.onfocus=function(){
      2. 
  
  
  
  
    2.     this.style.borderColor='blue'
      3. 
  
  
  
  
    3. }
      4. 
  
  
  
  
    4. ipc.month.onfocus=function(){
      5. 
  
  
  
  
    5.     this.style.borderColor='blue'
      6. 
  
  
  
  
    6. }
      7.

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

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

     
 
 
 
      
  
  
  
  
    1. ipc.year.onblur=function(){
      2. 
  
  
  
  
    2.     this.value=this.value.trim();
      3. 
  
  
  
  
    3.     chooseYear(this);
      4. 
  
  
  
  
    4. }
      5. 
  
  
  
  
    5. ipc.month.onblur=function(){
      6. 
  
  
  
  
    6.     this.value=this.value.trim();
      7. 
  
  
  
  
    7.     chooseMonth(this);
      8. 
  
  
  
  
    8. }
      9.

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

    6.检验提交的表单

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

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

    效果图如下所示：

    五、总结

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

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

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

    分享文章：手把手教你使用JavaScript实现限定输入内容
    分享地址：http://www.36103.cn/qtweb/news14/38864.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    做网站知识

    同城分类信息

    手机网站建设套餐　　 　成都标牌标识牌制作公司　　 　成都木托盘　　 　百度推广公司　　 　虚拟主机购买　　 　眉山服务器托管　　 　香港虚拟主机　　 　成都网站设计　　 　定制网站建设　　 　成都微信开发　　 　自适应网页设计　　 　网站托管运营　　 　LED亮化工程　　 　德阳服务器托管　　 　德阳东方电机技改　　 　四川成都seo网站优化　　 　网站快速收录　　 　成都网站推广　　 　网站报价方案　　 　成都广告制作