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

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

[[391037]]

一、前言

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

二、项目准备

开发工具:HBuilderX

浏览器:Google Chrome浏览器

三、项目目标

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

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

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

四、项目实现

HTML

  1. <div id="box"
  2.       <div id="box_01"
  3.           <h2>限定输入内容</h2> 
  4.       </div> 
  5.       <div id="box_02"
  6.           <img src="img/1.jpg" /> 
  7.       </div> 
  8.       <div id="box_03"
  9.       <form id="form"
  10.           年份<input type="text" name="year" /> 
  11.           月份<input type="text" name="month" /> 
  12.       <input type="submit" value="查询" /> 
  13.       </form> 
  14.   </div> 
  15.   </div> 
  16.   <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. #box{ 
  2.         width: 800px; 
  3.         height: 430px; 
  4.         display: flex; 
  5.         text-align: center; 
  6.         flex-direction: column
  7.         justify-content: center; 
  8.     } 
  9.     #box_01{ 
  10.         width: 800px; 
  11.         height: 70px; 
  12.         color: #0086B3; 
  13.     } 
  14.     img{ 
  15.         width: 400px; 
  16.         height: 300px; 
  17.     } 
  18.     #box_02{ 
  19.         width: 800px; 
  20.         height: 310px; 
  21.     } 
  22.     #box_03{ 
  23.         width: 800px; 
  24.         height: 50px; 
  25.     } 
  26.     #res{ 
  27.         width: 800px; 
  28.         height: 100px; 
  29.         font-weight: bold; 
  30.         text-align: center; 
  31.     } 

在上面代码中,#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. var res=document.getElementById('res'
  3. var ipc=document.getElementsByTagName('input'

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

2.检验年份函数chooseYear()

  1. function 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

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

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

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

3.检验月份函数chooseMonth()

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

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

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

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

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

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

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

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

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

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

6.检验提交的表单

  1. f.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.代码没有那么复杂,希望对你有所帮助!

 

责任编辑:姜华 来源: 前端进阶学习交流
相关推荐

2021-03-12 10:01:24

JavaScript 前端表单验证

2020-05-15 08:07:33

JWT登录单点

2021-07-14 09:00:00

JavaFX开发应用

2009-11-09 14:57:37

WCF上传文件

2011-01-06 10:39:25

.NET程序打包

2022-02-17 10:26:17

JavaScript扫雷游戏前端

2023-04-26 12:46:43

DockerSpringKubernetes

2011-05-03 15:59:00

黑盒打印机

2011-01-10 14:41:26

2022-12-07 08:42:35

2022-07-22 12:45:39

GNU

2021-12-15 08:49:21

gpio 子系统pinctrl 子系统API

2022-10-30 10:31:42

i2ccpuftrace

2011-02-22 13:46:27

微软SQL.NET

2021-02-26 11:54:38

MyBatis 插件接口

2021-12-28 08:38:26

Linux 中断唤醒系统Linux 系统

2021-08-02 07:35:19

Nacos配置中心namespace

2011-10-06 14:32:43

2020-12-08 10:32:15

Python邮件tcp

2022-04-12 08:46:12

i2c-tools开源工具
点赞
收藏

51CTO技术栈公众号