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

2023 iThome 鐵人賽

DAY 14

自我挑戰組

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

15th鐵人賽 javascript

晚睡公主

2023-09-28 19:23:16

266 瀏覽

分享至

前言

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

正規表達式

驗證時會使用到

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

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

註：

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

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

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

後面會先各自實驗。

原生JS寫表單驗證

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

取到所有input元素，跑迴圈
判斷是否不為空值(!element.value) & 是否為必填項目 (element.dataset.must!==undefined)
如果符合 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>

嘗試驗證「限定字數」

多加了一個 dataset 屬性，作為跳出填寫資料不完整時的 alert 文字使用。
一樣判斷 element.dataset.regex ，用 new RegExp，加上 .test() 方法來驗證。
驗證 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', '', '']