建站
咨詢
售后
建站咨詢
新聞中心
一、前言
在Web項目開發(fā)中，經(jīng)常會遇到一些只能輸入固定內(nèi)容的文本框。例如，只可以輸入字母、數(shù)字的文本框等，本文的案例是利用正則表達式語法來實現(xiàn)只可以輸入四位數(shù)的年份、一位數(shù)或二位數(shù)的月份。接下來，小編大家一起來學(xué)習(xí)，如何實現(xiàn)限定輸入內(nèi)容!
創(chuàng)新互聯(lián)公司是一家專業(yè)提供華亭企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、成都網(wǎng)站設(shè)計、html5、小程序制作等業(yè)務(wù)。10年已為華亭眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計公司優(yōu)惠進行中。
二、項目準備
開發(fā)工具：HBuilderX
瀏覽器：Google Chrome瀏覽器
三、項目目標
1.掌握正則表達式的語法。
2.學(xué)會應(yīng)用正則表達式。
3.掌握焦點事件和失去焦點事件。
四、項目實現(xiàn)
HTML
限定輸入內(nèi)容
在上面代碼中，div的id為box相當于一個大盒子，id為box_01、box_02、box_03相當于一個小盒子，這些小盒子依次放入大盒子中。
id為box_01主要是放置標題;
id為box_02主要是放置圖片;
id為box_02主要是放置表單;
id為res是用來檢驗?zāi)攴莺驮路葺斎胧欠裾_提示信息。
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主要是設(shè)置div塊的寬度和高度。
#res設(shè)置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.檢驗?zāi)攴莺瘮?shù)chooseYear()
- function chooseYear(y){
- if(!y.value.match(/^\d{4}$/)){
- y.style.borderColor='yellow';
- res.innerHTML='您的輸入有誤，年份需要4位數(shù)字';
- return false;
- }
- alert('年份格式輸入正確')
- return true;
- }
在上面代碼中，chooseYear(y)函數(shù)中的y參數(shù)表示年份元素的一個對象，通過獲取y的value值，然后使用match()方法進行正則匹配。
如果年份不是四位數(shù)，通過設(shè)置文本框的邊框顏色為黃色，獲取id為res，插入提示信息的內(nèi)容。
如果年份是四位數(shù)，則使用alert()方法，彈出一個彈框顯示“年份格式輸入正確”。
3.檢驗月份函數(shù)chooseMonth()
- function chooseMonth(m){
- if(!m.value.match(/^((0?[1-9])|(1[012]))$/)){
- m.style.borderColor='yellow';
- res.innerHTML='您的輸入有誤，月份1~12范圍內(nèi)'
- return false;
- }
- alert('月份格式輸入正確')
- return true;
- }
在上面代碼中，chooseMonth(m)函數(shù)中的m參數(shù)表示月份元素的一個對象，通過獲取m的value值，然后使用match()方法進行正則匹配。
”(0?[1-9])“表示前面有0或沒有0的表示第一月份到第九月份;
“(1[012])”表示第十月份到十二月份。
4.設(shè)置年份和月份焦點事件
- ipc.year.onfocus=function(){
- this.style.borderColor='blue'
- }
- ipc.month.onfocus=function(){
- this.style.borderColor='blue'
- }
在上面代碼中，用戶點擊年份和月份輸入框，設(shè)置焦點事件，之后，設(shè)置文本框的顏色為藍色。
5.設(shè)置年份和月份失去焦點——主要是用來優(yōu)化用戶的體檢效果
- 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)
- };
在上面代碼中，表單提交時，調(diào)用chooseYear()和chooseMonth()函數(shù)檢驗?zāi)攴莺驮路荨?/p>
效果圖如下所示：
五、總結(jié)
1.本文基于JavaScript基礎(chǔ)，實現(xiàn)限定輸入內(nèi)容的功能。對每一個div層進行詳解，讓讀者更好的理解。
2.在JavaScript中首先獲取操作元素的對象，事件處理函數(shù)年份和月份分別是chooseYear()、chooseMonth()。chooseYear(y)和chooseMonth(m)函數(shù)中獲取年份元素和月份元素對象，之后，獲取它們的value值，使用match()方法進行正則匹配。為了用戶的體檢效果添加焦點事件和失去焦點事件。
3.代碼沒有那么復(fù)雜，希望對你有所幫助!
文章名稱：手把手教你使用JavaScript實現(xiàn)限定輸入內(nèi)容
文章轉(zhuǎn)載：http://www.dlmjj.cn/article/djggsgp.html
