一篇文章告诉你使用JavaScript实现限定输入内容

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

id为box_01主要是放置标题;

id为box_02主要是放置图片;

id为box_02主要是放置表单;

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

#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)。

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])”表示第十月份到十二月份。

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!