摘要:本文主要介绍了web前端框架JS学习之教你使用JavaScript实现限定输入内容,通过具体的内容向大家展现,希望对大家web前端框架Javascript开发的学习有所帮助。
本文主要介绍了web前端框架JS学习之教你使用JavaScript实现限定输入内容,通过具体的内容向大家展现,希望对大家web前端框架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是用来检验年份和月份输入是否正确提示信息。
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.代码没有那么复杂,希望对你有所帮助!
我是小职,记得找我
✅ 解锁高薪工作
✅ 免费获取基础课程·答疑解惑·职业测评
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号