iT邦幫忙

2023 iThome 鐵人賽

DAY 14
0
自我挑戰組

前端菜雞_賀周歲成長日誌系列 第 14

關於正規表達式(有表單驗證寫法)

  • 分享至 

  • xImage
  •  

前言

找到很多方法都是使用套件,在這裡會嘗試用JS原生的方法來寫表單驗證~


正規表達式

驗證時會使用到

利用此寫法 var regExp = new RegExp(" 要驗證什麼 ");

RegExp 的方法,有 test()exec();這邊只會說到 test 方法,等等直接寫表單驗證來演示。

註:

  1. input 跟 label 要綁定的話,要給 input標籤 的 idlabel標籤 的 for 是一樣的值。
  2. 綁定 dataset 在表單上,data 後面的 must 是自己取的。
  3. 在 form 加 onsubmit="return false;",是為了防止一按 submit 按鈕就送出。

幫數字、文字替換格式時會用到

RegExp 另有 .match().search()replace()split(),這些字串也有的方法。

後面會先各自實驗。


原生JS寫表單驗證

先從驗證「必填欄位是否為空」開始

  1. 取到所有input元素,跑迴圈
  2. 判斷 是否不為空值(!element.value) & 是否為必填項目 (element.dataset.must!==undefined)
  3. 如果符合 2. 的條件,就加上class樣式,並且將 dataset -must 的值加到alert文字中
<html>
  <style>
    .warning{
	    background-color: rgb(252, 251, 209);
    }
  </style>
  
  <body>
    <form onsubmit="return false;">
      <label for="classNo">班級代號</label>
      <input type="text" id="classNo" data-must="班級代號" >
      <label for="teacher">導師名</label>
      <input type="text" id="teacher" data-must="導師名" >
      <label for="classmate">學生數量</label>
      <input type="text" id="classmate">
      <button type="submit" onclick="verify()">完成</button>
    </form>

    <script>
	    const verify = () => {
	      let warningText=''
				let classForm = document.querySelectorAll('input')
				for (let i = 0; i < classForm?.length; i++) {
	        const element = classForm[i];
          element.classList.remove('warning')
					if(!element.value && element.dataset.must!==undefined){
	          warningText += `${element.dataset.must}  `
            element.classList.add('warning')
          }
        }
        if(warningText) alert(`${warningText}請記得填寫!`)
      }
    </script>
  </body>
</html>

嘗試驗證「限定字數」

  1. 多加了一個 dataset 屬性,作為跳出填寫資料不完整時的 alert 文字使用。
  2. 一樣判斷 element.dataset.regex ,用 new RegExp,加上 .test() 方法來驗證。
  3. 驗證 input 內的值 element.value,是否符合 element.dataset.regex 的規則。
const verify = () => {
	let warningText=''
  let warningTextRegex=''
	let classForm = document.querySelectorAll('input')
  for (let i = 0; i < classForm.length; i++) {
    const element = classForm[i];
    element.classList.remove('warning')
    if(!element.value && element.dataset.must!==undefined){
        warningText += `${element.dataset.alertText}  `
        element.classList.add('warning')
    }
  }
	classForm.forEach(element => {
    let regex = new RegExp(element.dataset.regex);
    if(!regex.test(element.value)){
        warningTextRegex += `${element.dataset.alertText}  `
    }
	})
  if(warningText) alert(`${warningText}請記得填寫!`)
  if(warningTextRegex) alert(`${warningTextRegex}格式錯誤!`)
}

vue綁定

VUE 綁定基本上只差在 寫法還有 雙向綁定

<label :for="formModel.classNo">{{formModel.classNo}}</label>
<!-- <input type="text" v-model="formModel.classNo" data-must="班級代號" > -->
<input type="text" :id="formModel.classNo" data-must="班級代號" >

RegExp 的 .match()、.search()、replace()、split()

相同的字串,用不同方法實驗看看

let testText1 = '546dgfd566'
let testText2 = '546dgfd566'
let testText3 = '546dgfd566'
let testText4 = '546dgfd566'
console.log(testText1.search(/6/))
console.log(testText2.match(/6/))
console.log(testText3.replace(/6/, 'bb'))
console.log(testText4.split(/6/))

>> 2
>> ['6', index: 2, input: '546dgfd566', groups: undefined]
>> 54bbdgfd566
>> ['54', 'dgfd5', '', '']

結語

今天的正規表達式,除了說明方法,也有提到如何寫表單驗證。個人認為表單驗證算是蠻有可能碰到的一項需求,希望對各位有所幫助。

今天就到這,如有說明不周或錯誤的地方,還請多留言討論(鞠躬)。

??

引頸期盼已久的中秋連假終於到來,放假了,好快樂。
趁連假也來再寫一點庫存文章。


上一篇
停止預設事件的各種方法
下一篇
關於dataset(data-*)
系列文
前端菜雞_賀周歲成長日誌31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言