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

Karen110 等级 648 0 0
标签: https

一、前言

在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()函数检验年份和月份。

效果图如下所示:

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

五、总结

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

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

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

最后需要本文项目代码的小伙伴,请在公众号后台回复“限定内容”关键字进行获取,如果在运行过程中有遇到任何问题,请随时留言或者加小编好友,小编看到会帮助大家解决bug噢!

**-----**------**-----**---**** End **-----**--------**-----**-****

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

往期精彩文章推荐:

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

欢迎各位大佬点击链接加入群聊【helloworld开发者社区】:https://jq.qq.com/?_wv=1027&k=mBlk6nzX进群交流IT技术热点。

收藏
评论区

相关推荐

HTTPS
### 最近网站更新为https,于是做个笔记 ### 将域名 [www.domain.com](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.domain.com) 的证书文件1\_www.domain.com\_bundle.crt 、 ### 私钥文件2\_www.doma
HTTPS
楔子 谣言粉碎机前些日子发布的《[用公共WiFi上网会危害银行账户安全吗?](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.guokr.com%2Farticle%2F100110%2F)》,文中介绍了在使用HTTPS进行网络加密传输的一些情况,从回复来看,争议还是有的。随着网络越
HTTPS请求
##HTTPS请求## > **HttpsUtils代码** package com.ices.utils.httpsHelp; import java.io.BufferedReader; import java.io.InputStream; import java.io.InputStreamReader;
Console Api 让 JS 调试更简单、高效
> 所有Console Api  <script type="text/javascript"> console.dir(console); </script> ![](https://oscimg.oschina.net/oscnet/95a860f3d4ec5a09ee3f53761b64594745e.jpg)
Fundebug前端异常监控插件兼容低版本的Android浏览器
![](https://image.fundebug.com/2019-06-03-fundebug-javascript-upgrade.jpg) ### Fundebug前端BUG监控服务 [Fundebug](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.fundebug
JavaScript中8个常见的陷阱
**译者按:** 漫漫编程路,总有一些坑让你泪流满面。 原文: [Who said javascript was easy ?](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fhackernoon.com%2Fwho-said-javascript-easy-f4a1d5b399b8)
JavaScript动画实例:李萨如曲线
        在“[JavaScript图形实例:阿基米德螺线](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwenku.baidu.com%2Fview%2F5c4a2dfb152ded630b1c59eef8c75fbfc77d94cf)”和“[JavaScript图形实例:曲线方
JavaScript基础系列
![JavaScript基础系列](https://oscimg.oschina.net/oscnet/c1dc2f84f95d13105d79ba82a648f0c5eab.png) > JavaScript基础系列 ![image.png](https://oscimg.oschina.net/oscnet/e16bf4232aab0acb21c56
JavaScript实现强制重定向至HTTPS页面
有时候需要把网页强制切换成HTTPS,即使用户已经访问了HTTP的版本。原因可能是你不想让用户使用HTTP来访问,因为它不安全。要做到这个很简单,如果不想用PHP或者[Apache的mod\_rewrite](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.jb51.net%2Far
JavaScript的 基本数据类型
**第一:Javascript对象是** **第二:Javascript中** **第三:Javascript的对象是数据;** **第四:JavaScript 中的对象可以简单理解成"名称:值"对(name:value)。名称(name):"名称"部分是一个 JavaScript 字符串** **参考----------https://www
Javascript相关学习
JavaScript ---------- 发现了一个不错的学习JavaScript的网站,就是MDN,具体见[JavaScript 参考](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FJavaS
Nginx配置https
一、开启nginx的ssl模块 1.未安装过nginx,编译安装配置参数如下: ./configure \--prefix=/usr/local/nginx \--with-pcre \--with-http\_ssl\_module #ssl模块 \--with-http\_stub\_status\_module \--wit
springboot2 配置 https
package cn.xiaojf.aibus.configure; import org.apache.catalina.Context; import org.apache.catalina.connector.Connector; import org.apache.coyote.http11.Http11Ni