JavaScript實現簡單表單驗證
阿新 • • 發佈:2019-02-01
在我們進行註冊的時候,把滑鼠點進“請輸入帳號”的輸入框時,輸入框的旁邊會有提示資訊,提示我們要輸入的資訊格式,在我們輸入後滑鼠點進下一個輸入框時,已經填寫過的輸入框會對於我們填入的內容進行判斷,若不符合要求會提示我們重新輸入,大致如下圖所示:
上述功能的實現程式碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單驗證</title>
</head>
<body>
<form action="" id="my">
手機號: <input type="text" name="username"><span id="message"></span><br>
密碼: <input type="password"><br>
<input type="submit" value="註冊">
</form>
<script>
//獲取表單資訊
var content=document.getElementById('my' );
//獲取提示資訊內容
var ts=document.getElementById('message');
//定義變數存放手機號
var val=null;
//定義變數存放正則表示式
var reg=null
// onfocus 獲取焦點事件
content.username.onfocus=function(){
ts.innerHTML='請輸入11位有效手機號';
ts.style.color='green';
}
//onblur 失去焦點事件
content.username.onblur=function(){
val=content.username.value;
reg=/^1\d{10}$/;
if(reg.test(val)){
ts.innerHTML='手機號可用';
ts.style.color='blue';
}else{
ts.innerHTML='手機號無效';
ts.style.color='red';
}
}
//onsubmit提交事件
content.onsubmit=function(){
if(!reg.test(val)){
//預設取消操作
return false;
}
}
</script>
</body>
</html>