JS實(shí)現(xiàn)提交表單前的數(shù)字及郵箱校檢功能
個人覺得一個工程中讓用戶提交表單時,用戶提交的數(shù)據(jù)類型及內(nèi)容不確定度都很大,用戶不一定會完全理解設(shè)計者意思。所以提交表單前的校檢是必須的,這里簡單分享幾個校檢方法,本人新手,還請多多指教。
<script type="text/javascript"> function toVaild(){ var age = document.getElementById("age").value; var email = document.getElementById("email").value; if(age==null||age.replace(/(^\s*)|(\s*$)/g, "")==""||age==undefined){ //JavaScript String.replace函數(shù) 這里用來去掉空格等于trim return false;d }else{ if(isNaN(age)||age<0){ //如果age是特殊的非數(shù)字值NaN(或者能被轉(zhuǎn)換為這樣的值),返回的值就是true。如果age是其他值,則返回false。 alert("請輸入正確的年齡(數(shù)字)") document.getElementById("age").focus(); return false; } } if(email==null||email.replace(/(^\s*)|(\s*$)/g, "")==""||email==undefined){ }else{ var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; //匹配郵箱 isok= reg.test(email); if(!isok){ alert("郵箱格式不正確,請重新輸入!"); document.getElementById("email").focus(); return false; } } } return true; </script>
<form action="${pageContext.request.contextPath }/updateinfo" onsubmit="return toVaild()" > <center> <input type="text" id="age" placeholder="年齡"> <input id="email" placeholder="email" > <button type="submit" >保存修改</button> </center> </form>
JavaScript String.replace函數(shù)作用是將源自符串中的match替換為replacement并返回替換后的字符串,使用介紹如下:
js String的replace函數(shù)的函數(shù)簽名如下:
replace(match/* 字符串OR正則表達(dá)式 */, replacement/* 字符串OR函數(shù) */)
作用是將源自符串中的match替換為replacement并返回替換后的字符串。
所以第一參數(shù)通常是一個正則表達(dá)式,舉例如下:
replace(/n/g, "h") // 將源自符串中所有的n替換為h。
第二參數(shù)可以是一個字符串,該字符串中可以包含第一參數(shù)正則表達(dá)式的分組,舉例如下:
replace(/(a){2,2}/g, "$1b") // 將源自符串中所有的aa替換為ab。
總結(jié)
以上所述是小編給大家介紹的JS實(shí)現(xiàn)提交表單前的數(shù)字及郵箱校檢功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
利用ES6的Promise.all實(shí)現(xiàn)至少請求多長時間的實(shí)例
下面小編就為大家?guī)硪黄肊S6的Promise.all實(shí)現(xiàn)至少請求多長時間的實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08javascript實(shí)現(xiàn)des解密加密全過程
這篇文章主要介紹了javascript 實(shí)現(xiàn)des解密加密的過程,需要的朋友可以參考下2014-04-04javascript中內(nèi)置對象Math的介紹及用法案例
Math對象是一個內(nèi)置對象,具有數(shù)學(xué)常數(shù)和函數(shù)的屬性和方法,不是一個函數(shù)對象,下面這篇文章主要給大家介紹了關(guān)于javascript中內(nèi)置對象Math的介紹及用法案例的相關(guān)資料,需要的朋友可以參考下2022-03-03CocosCreator通用框架設(shè)計之網(wǎng)絡(luò)
這篇文章主要介紹了CocosCreator通用框架設(shè)計之網(wǎng)絡(luò),詳細(xì)講解了WebSocket的原理和使用方法,對WebSocket感興趣的同學(xué),一定要看一下2021-04-04基于JS實(shí)現(xiàn)bookstore靜態(tài)頁面的實(shí)例代碼
本文給大家分享一段核心代碼基于js實(shí)現(xiàn)的bookstore靜態(tài)頁面,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友參考下2017-02-02一文詳解Javascript內(nèi)存機(jī)制與垃圾回收
這篇文章主要給大家詳細(xì)介紹了Javascript的內(nèi)存機(jī)制與垃圾回收,文中又詳細(xì)的代碼示例,對我們學(xué)習(xí)Javascript有一定的幫助,需要的同學(xué)可以借鑒閱讀2023-06-06JavaScript實(shí)現(xiàn)函數(shù)返回多個值的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)函數(shù)返回多個值的方法,涉及javascript字典類型的使用技巧,需要的朋友可以參考下2015-06-06如何使用electron-builder及electron-updater給項(xiàng)目配置自動更新
這篇文章主要介紹了如何使用electron-builder及electron-updater給項(xiàng)目配置自動更新,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12