快捷導(dǎo)航

JS實(shí)現(xiàn)提交表單前的數(shù)字及郵箱校檢功能

更新時(shí)間：2017年11月13日 10:10:28 作者：畫筆小新

在項(xiàng)目開發(fā)中經(jīng)常會(huì)遇到表單提交功能，今天小編抽空給大家分享JS實(shí)現(xiàn)提交表單前的數(shù)字及郵箱校檢功能，需要的朋友參考下吧

個(gè)人覺得一個(gè)工程中讓用戶提交表單時(shí)，用戶提交的數(shù)據(jù)類型及內(nèi)容不確定度都很大，用戶不一定會(huì)完全理解設(shè)計(jì)者意思。所以提交表單前的校檢是必須的，這里簡單分享幾個(gè)校檢方法，本人新手，還請(qǐng)多多指教。

<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("請(qǐng)輸入正確的年齡（數(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("郵箱格式不正確，請(qǐng)重新輸入！");
　　　　　　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ù)通常是一個(gè)正則表達(dá)式，舉例如下：

replace(/n/g, "h") // 將源自符串中所有的n替換為h。

第二參數(shù)可以是一個(gè)字符串，該字符串中可以包含第一參數(shù)正則表達(dá)式的分組，舉例如下:

replace(/(a){2,2}/g, "$1b") // 將源自符串中所有的aa替換為ab。

總結(jié)

以上所述是小編給大家介紹的JS實(shí)現(xiàn)提交表單前的數(shù)字及郵箱校檢功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: