一篇文章汇报你行使JavaScript实现限制输入内容
在上面代码中,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)。 JavaScript1.起首是获取操纵元素的工具 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])”暗示第十月份到十二月份。 (编辑:湖南网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |