當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript之表单验证
生活随笔
收集整理的這篇文章主要介紹了
JavaScript之表单验证
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
?前言：我們這一次講的表單驗證運用了前面幾篇文章說講的的內(nèi)容，比之前的要難一些，我會在代碼里以注釋的形式詳細的講解。
目錄
一.簡單的表單驗證
驗證方式一:
驗證方式二：
?二.正則驗證
一.正則的規(guī)則
? ? ? 內(nèi)容
? ? ? 次數(shù)?
二.正則的注意事項
三.二級聯(lián)動
一.簡單的表單驗證
?
驗證方式一:
<html> <head><meta charset="UTF-8"><title>Title</title><style>span {color: red;font-weight: bold;//字體粗細}</style> </head> <body> <form action="" id="myForm">//onkey(鍵)，onkeyup當鍵被點擊<p>名字: <input type="text" id="userName" onkeyup="checkName(this)"><span id="l1"></span></p><p>密碼: <input type="text" id="userPwd" onkeyup="checkPwd(this)"><span id="l2"></span></p><p>郵箱: <input type="text" id="userEmail" onkeyup="checkEmail(this)"><span id="l3"></span></p><p><button>登錄</button></p> </form> <script>//用來檢查名字是否合規(guī)function checkName() {/*定義一個值拿到姓名輸入框值的長度*/var length = userName.value.lengthif (length > 0) {//里面有內(nèi)容//名字的大小應該在 3-6 之間（定義值的長度）if (length >= 3 && length <= 6) {l1.textContent = "😊"return true}//不在區(qū)間之內(nèi)l1.textContent = "長度必須在3-6之間"//必須return一個值，否則會被覆蓋，return有中斷的作用return false}//里面沒有內(nèi)容l1.textContent = "長度必須大于0"return false}//用來檢查密碼是否合規(guī)function checkPwd() {var length = userPwd.value.lengthif (length > 0) {//里面有內(nèi)容//名字的大小應該在 3-6 之間if (length >= 3 && length <= 6) {l2.textContent = "😊"return true}//不在區(qū)間之內(nèi)l2.textContent = "長度必須在3-6之間"return false}//里面沒有內(nèi)容l2.textContent = "長度必須大于0"return false}//用來檢查郵箱是否合規(guī)function checkEmail() {var length = userEmail.value.lengthif (length > 0) {//里面有內(nèi)容//名字的大小應該在 3-6 之間if (length >= 3 && length <= 6) {l3.textContent = "😊"return true}//不在區(qū)間之內(nèi)l3.textContent = "長度必須在3-6之間"return false}//里面沒有內(nèi)容l3.textContent = "長度必須大于0"return false}//添加提交事件(會具備返回值)myForm.onsubmit = () => {//阻止表單的提交 需要返回 false//有兩種方法//第一種：return checkName()&&checkPwd()&&checkEmail()//第二種：var f1 = checkName()var f2 = checkPwd()var f3 = checkEmail()return f1 && f2 && f3} </script> </body> </html>?驗證方式二：
?這是上面代碼的優(yōu)化
<html> <head><meta charset="UTF-8"><title>Title</title><style>span {color: red;font-weight: bold;}</style> </head> <body> <form action="" id="myForm"><p>名字: <input type="text" id="userName" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p><p>密碼: <input type="text" id="userPwd" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p><p>郵箱: <input type="text" id="userEmail" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p><p><button>登錄</button></p> </form> <script>//用來檢查是否合規(guī)function checkLabel(obj) {var length = obj.value.length//input標簽和span標簽都在p標簽里，它們是兄弟關系，可以獲得下一個相鄰元素// var label=obj.nextElementSibling//在span標簽里加一個i標簽，可以獲得i標簽父級元素相鄰的上一個元素var label = obj.parentElement.getElementsByClassName("error")[0]if (length > 0) {//里面有內(nèi)容//名字的大小應該在 3-6 之間if (length >= 3 && length <= 6) {label.textContent = "😊"return true}//不在區(qū)間之內(nèi)label.textContent = "長度必須在3-6之間"return false}//里面沒有內(nèi)容label.textContent = "長度必須大于0"return false}//添加提交事件(會具備返回值)myForm.onsubmit = () => {//阻止表單的提交 需要返回 false// return checkName()&&checkPwd()&&checkEmail()var f1 = checkLabel(userName)var f2 = checkLabel(userEmail)var f3 = checkLabel(userPwd)return f1 && f2 && f3} </script> </body> </html>?運行結(jié)果：
?
?
?
?二.正則驗證
我相信各位小伙伴們應該都知道正則表達式，但我還是要講一下，?正則表達式又稱規(guī)則表達式，它是對字符串操作的一種邏輯公式，即用事先定義好的一些特定字符以及這些特定字符的組合，組成一個“規(guī)則字符串”，這個“規(guī)則字符串”用來表達對字符串的一種過濾邏輯。
正則表達式可以用來做什么?
????給定一個正則表達式和另一個字符串，我們可以達到如下的目的：
????1.?檢查給定的字符串是否符合正則表達式的過濾邏輯，即能否匹配；
????2.?可以通過正則表達式的匹配，從字符串中提取或替換特定的部分。
一.正則的規(guī)則
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 內(nèi)容
| \d | 數(shù)字[0-9] |
| \D | 非數(shù)字^[0-9] |
| \w | 數(shù)字+英文+下劃線[0-9a-zA-Z_] |
| \W | 非數(shù)字+英文+下劃線^[0-9a-zA-Z_] |
| . | 任意字符 |
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?次數(shù)?
| ？ | 0~1次 |
| + | 至少一次 |
| * | 0~任意次 |
| \d{5} | 五個數(shù)字（數(shù)字任意填） |
| \d{5,10} | 至少五次，最多10次（數(shù)字任意填 |
?二.正則的注意事項
| 必須以/^開頭 |
| 必須以$/結(jié)尾 |
| 不要把\寫成\\ |
| 定義正則對象(例如)： var? rex=/^\d{5}$/ |
| 使用正則對象(例如)： rex.test('123') |
接下來我們用正則來寫一個簡單驗證
<html> <head><meta charset="UTF-8"><title>Title</title><style>span {color: red;font-weight: bold;}</style> </head> <body> <form action="" id="myForm"><p>名字: <input type="text" id="userName" onkeyup="checkLabel(this,/^[a-zA-Z]{3,6}$/,'名字的長度在3-6')"><span><i class="error"></i></span></p><p>密碼: <input type="text" id="userPwd" onkeyup="checkLabel(this,/^\w{6,10}$/,'密碼的長度在6-10')"><span><i class="error"></i></span></p><p>郵箱: <input type="text" id="userEmail" onkeyup="checkLabel(this,/^\w+[.]\w+@\w+[.]\w+$/,'郵箱中必須包含@')"><span><i class="error"></i></span></p><p><button>登錄</button></p> </form> <script>//用來檢查是否合規(guī)//括號里是傳入的值function checkLabel(obj,rex,tip) {var length = obj.value.lengthvar label = obj.parentElement.getElementsByClassName("error")[0]if (length > 0) {//里面有內(nèi)容//內(nèi)容在正則匹配之間if (rex.test(obj.value)) {label.textContent = "😊"return true}//不在區(qū)間之內(nèi)label.textContent = tipreturn false}//里面沒有內(nèi)容label.textContent = "長度必須大于0"return false}//添加提交事件(會具備返回值)myForm.onsubmit = () => {//阻止表單的提交 需要返回 false// return checkName()&&checkPwd()&&checkEmail()var f1 = checkLabel(userName)var f2 = checkLabel(userEmail)var f3 = checkLabel(userPwd)return f1 && f2 && f3} </script> </body> </html>三.二級聯(lián)動
二級聯(lián)動這個詞聽起來是不是很高級，但是它其實在我們的生活中很常見，下面這個代碼你們一看就知道它是什么了o(TヘTo)
<html> <head><meta charset="UTF-8"><title>Title</title> </head> <body> //select 下拉框，provinces 省份，onchange 改變事件 <select id="province" onchange="myChange()"></select> <select id="cities"></select><script>//JS數(shù)組的特點//類型不限制//長度不限制//數(shù)組可以是字符串var provinces=[]//城市provinces["湖南省"]=["長沙","懷化","岳陽"]provinces["廣西省"]=["桂林","梧州","來賓"]provinces["浙江省"]=["杭州","寧波","舟山"]//省份怎么來// for of 相當于foreach 遍歷元素// for in 遍歷下標for(let i in provinces){//往省份的下拉框中添加選項//appendChild 追加子節(jié)點//<option value="i">i</option>//第一個i是value的值，第二個i是顯示的值province.appendChild(new Option(i,i))}//城市里面放值function setCity(name) {for(let i of provinces[name]){cities.appendChild(new Option(i,i))}}setCity(province.value)function myChange() {//清空原來的選項cities.innerHTML=""//輸入框和下拉框可以拿到valuesetCity(province.value)} </script> </body> </html>運行結(jié)果：
?
?好了，這篇文章到處結(jié)束了，期待我們下一篇文章相見(￣▽￣)"
總結(jié)
以上是生活随笔為你收集整理的JavaScript之表单验证的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： RP产品原型资源分享-PRD文档
- 下一篇： Spring MVC 使用介绍（二）——