[[391037]]

一、前言

在Web項(xiàng)目開發(fā)中，經(jīng)常會(huì)遇到一些只能輸入固定內(nèi)容的文本框。例如，只可以輸入字母、數(shù)字的文本框等，本文的案例是利用正則表達(dá)式語(yǔ)法來(lái)實(shí)現(xiàn)只可以輸入四位數(shù)的年份、一位數(shù)或二位數(shù)的月份。接下來(lái)，小編大家一起來(lái)學(xué)習(xí)，如何實(shí)現(xiàn)限定輸入內(nèi)容!

二、項(xiàng)目準(zhǔn)備

開發(fā)工具：HBuilderX

瀏覽器：Google Chrome瀏覽器

三、項(xiàng)目目標(biāo)

1.掌握正則表達(dá)式的語(yǔ)法。

2.學(xué)會(huì)應(yīng)用正則表達(dá)式。

3.掌握焦點(diǎn)事件和失去焦點(diǎn)事件。

四、項(xiàng)目實(shí)現(xiàn)

HTML

<div id="box"> 
      <div id="box_01"> 
          <h2>限定輸入內(nèi)容</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相當(dāng)于一個(gè)大盒子，id為box_01、box_02、box_03相當(dāng)于一個(gè)小盒子，這些小盒子依次放入大盒子中。

id為box_01主要是放置標(biāo)題;

id為box_02主要是放置圖片;

id為box_02主要是放置表單;

id為res是用來(lái)檢驗(yàn)?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屬性表示項(xiàng)目在主軸上的對(duì)齊方式，center表示中間。

#box_01、#box_02、#box_03主要是設(shè)置div塊的寬度和高度。

#res設(shè)置div塊寬度、高度、字體加粗(font-weight)、文字對(duì)齊方式(text-align)。

JavaScript

1.首先是獲取操作元素的對(duì)象

var f=document.getElementById('form') 
var res=document.getElementById('res') 
var ipc=document.getElementsByTagName('input') 

在上面代碼中，使用document.getElementById()方法獲取操作元素對(duì)象的id，document.getElementsByTagName()方法是返回帶有標(biāo)簽名的對(duì)象集合。

2.檢驗(yàn)?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ù)表示年份元素的一個(gè)對(duì)象，通過(guò)獲取y的value值，然后使用match()方法進(jìn)行正則匹配。

如果年份不是四位數(shù)，通過(guò)設(shè)置文本框的邊框顏色為黃色，獲取id為res，插入提示信息的內(nèi)容。

如果年份是四位數(shù)，則使用alert()方法，彈出一個(gè)彈框顯示“年份格式輸入正確”。

3.檢驗(yàn)月份函數(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ù)表示月份元素的一個(gè)對(duì)象，通過(guò)獲取m的value值，然后使用match()方法進(jìn)行正則匹配。

”(0?[1-9])“表示前面有0或沒(méi)有0的表示第一月份到第九月份;

“(1[012])”表示第十月份到十二月份。

4.設(shè)置年份和月份焦點(diǎn)事件

ipc.year.onfocus=function(){ 
    this.style.borderColor='blue' 
} 
ipc.month.onfocus=function(){ 
    this.style.borderColor='blue' 
} 

在上面代碼中，用戶點(diǎn)擊年份和月份輸入框，設(shè)置焦點(diǎn)事件，之后，設(shè)置文本框的顏色為藍(lán)色。

5.設(shè)置年份和月份失去焦點(diǎn)——主要是用來(lái)優(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.檢驗(yàn)提交的表單

f.onsubmit=function(){ 
    return chooseYear(ipc.year)&&chooseMonth(ipc.month) 
}; 

在上面代碼中，表單提交時(shí)，調(diào)用chooseYear()和chooseMonth()函數(shù)檢驗(yàn)?zāi)攴莺驮路荨?/p>

效果圖如下所示：

五、總結(jié)

1.本文基于JavaScript基礎(chǔ)，實(shí)現(xiàn)限定輸入內(nèi)容的功能。對(duì)每一個(gè)div層進(jìn)行詳解，讓讀者更好的理解。

2.在JavaScript中首先獲取操作元素的對(duì)象，事件處理函數(shù)年份和月份分別是chooseYear()、chooseMonth()。chooseYear(y)和chooseMonth(m)函數(shù)中獲取年份元素和月份元素對(duì)象，之后，獲取它們的value值，使用match()方法進(jìn)行正則匹配。為了用戶的體檢效果添加焦點(diǎn)事件和失去焦點(diǎn)事件。

3.代碼沒(méi)有那么復(fù)雜，希望對(duì)你有所幫助!