找到很多方法都是使用套件,在這裡會嘗試用JS原生的方法來寫表單驗證~
利用此寫法 var regExp = new RegExp(" 要驗證什麼 ");
RegExp
的方法,有 test()
、exec()
;這邊只會說到 test 方法,等等直接寫表單驗證來演示。
註:
input標籤 的 id
和 label標籤 的 for
是一樣的值。onsubmit="return false;"
,是為了防止一按 submit 按鈕就送出。RegExp
另有 .match()
、.search()
、replace()
、split()
,這些字串也有的方法。
後面會先各自實驗。
(!element.value)
& 是否為必填項目 (element.dataset.must!==undefined)
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 綁定基本上只差在 寫法還有 雙向綁定
<label :for="formModel.classNo">{{formModel.classNo}}</label>
<!-- <input type="text" v-model="formModel.classNo" data-must="班級代號" > -->
<input type="text" :id="formModel.classNo" data-must="班級代號" >
相同的字串,用不同方法實驗看看
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', '', '']
今天的正規表達式,除了說明方法,也有提到如何寫表單驗證。個人認為表單驗證算是蠻有可能碰到的一項需求,希望對各位有所幫助。
今天就到這,如有說明不周或錯誤的地方,還請多留言討論(鞠躬)。
引頸期盼已久的中秋連假終於到來,放假了,好快樂。
趁連假也來再寫一點庫存文章。