加入收藏 | 设为首页 | 会员中心 | 我要投稿 湖南网 (https://www.hunanwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程 > 正文

一篇文章汇报你行使JavaScript实现限制输入内容

发布时间:2021-05-28 15:54:05 所属栏目:编程 来源:互联网
导读:在上面代码中,div的id为box相等于一个大盒子,id为box_01、box_02、box_03相等于一个小盒子,这些小盒子依次放入大盒子中。 id为box_01首要是安排问题; id为box

在上面代码中,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])”暗示第十月份到十二月份。

(编辑:湖南网)

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

    热点阅读