文本框失去焦點即刻進(jìn)行表單驗證代碼實例
大家可能都見過這樣的表單驗證效果，當(dāng)填寫完當(dāng)前文本框焦點離開后會立馬進(jìn)行表單驗證。
下面就通過代碼實例介紹一下如何實現(xiàn)此功能。
代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="/" />
<title>實例</title>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function check() {
var email = $("email").value;
var password = $("password").value;
var repassword = $("repassword").value;
var name = $("name").value;
$("emailinfo").innerHTML = "";
$("passwordinfo").innerHTML = "";
$("repasswordinfo").innerHTML = "";
$("nameinfo").innerHTML = "";
if(email == "") {
$("emailinfo").innerHTML = "Email值不能為空";
return false;
}
if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
$("emailinfo").innerHTML = "郵箱格式不正確,必須包含@和.";
return false;
}
if(password == "") {
$("passwordinfo").innerHTML = "密碼不能為空";
return false;
}
if(password.length < 6) {
$("passwordinfo").innerHTML = "密碼長度必須大于或者等于6";
return false;
}
if(repassword != password) {
$("repasswordinfo").innerHTML = "兩次輸入的密碼不一致";
return false;
}
if(name == "") {
$("nameinfo").innerHTML = "姓名不能為空";
return false;
}
for(var i = 0; i < name.length; i++) {
var j = name.subString(i , i+1);
if(isNaN(j) == false) {
$("nameinfo").innerHTML = '姓名中不能包含數(shù)字';
return false;
}
}
}
function checkEmail() { //校驗Email
$('emailinfo').innerHTML = "";
var email = $('email').value;
if(email == "") {
$('emailinfo').innerHTML = "Email值不能為空";
return false;
}
if(email.indexOf('@') == -1 || email.indexOf('.') == -1) {
$('emailinfo').innerHTML = "Email必須包含@和.";
return false;
}
}
function checkPassword() { //校驗密碼
$('passwordinfo').innerHTML = "";
var password = $('password').value;
if(password == "") {
$("passwordinfo").innerHTML = "密碼不能為空";
return false;
}
if(password.length < 6) {
$("passwordinfo").innerHTML = "密碼長度必須大于或者等于6";
return false;
}
}
function checkRepassword() { //校驗重新輸入的密碼
$('repassword').innerHTML = "";
var repassword = $('repassword').value;
if(repassword != password) {
$("repasswordinfo").innerHTML = "兩次輸入的密碼不一致";
return false;
}
}
function checkName() { //校驗姓名
$('nameinfo').innerHTML = "";
var name = $('name').value;
if(name == "") {
$("nameinfo").innerHTML = "姓名不能為空";
return false;
}
for(var i = 0; i < name.length; i++) {
var j = name.subString(i , i+1);
if(isNaN(j) == false) {
$("nameinfo").innerHTML = '姓名中不能包含數(shù)字';
return false;
}
}
}
window.onload=function(){
var email=document.getElementById("email");
var password=document.getElementById("password");
var repassword=document.getElementById("repassword");
var name=document.getElementById("name");
email.onblur=function(){checkEmail();}
password.onblur=function(){checkPassword();}
repassword.onblur=function(){checkRepassword()}
name.onblur=function(){checkName();}
}
</script>
</head>
<body>
<form name="login_form" method="post">
<div>
Email:<input type="text" name="email" id="email"/>
<span id="emailinfo"></span>
</div>
<div>
密碼:<input type="password" name="password" id="password"/>
<span id="passwordinfo"></span>
</div>
<div>
重輸密碼:<input type="password" name="repassword" id="repassword"/>
<span id="repasswordinfo"></span>
</div>
<div>
姓名:<input type="text" name="name" id="name"/>
<span id="nameinfo"></span>
</div>
<div><input type="submit" value="注冊" /></div>
</form>
</body>
</html>
聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至201542412@QQ.com舉報，一經(jīng)查實，本站將立刻刪除。
相關(guān)推薦
-
jQuery實現(xiàn)的生成隨機(jī)密碼代碼實例簡單介紹
本章節(jié)介紹一下如何使用jQury實現(xiàn)生成隨機(jī)密碼的效果。有需要的朋友可以做一下參考，代碼實例如下:
-
zblog找回密碼工具
zblog找回密碼工具
-
win10系統(tǒng)的自帶的遠(yuǎn)程工具連接的密碼無法保存方法
Windows 10系統(tǒng)自帶的遠(yuǎn)程桌面連接（Rmot Dsktop Connction）不保存密碼的問題可能由于多種原因引起。您可以嘗試以下方法解決此問題：
-
如何實現(xiàn)MySQL中設(shè)置用戶密碼的語句？
如何實現(xiàn)MySQL中設(shè)置用戶密碼的語句？MySQL是一種常用的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，用于存儲和管理大量的數(shù)據(jù)。在MySQL中，設(shè)置用戶密碼是非常重要的一項任務(wù)，以保證數(shù)據(jù)的安全性。本文將介紹如何使用M
-
如何實現(xiàn)MySQL中更改用戶角色密碼的語句？
如何實現(xiàn)MySQL中更改用戶角色密碼的語句？在MySQL數(shù)據(jù)庫管理中，偶爾需要更改用戶的角色和密碼以維護(hù)數(shù)據(jù)庫的安全性。下面我們將介紹如何通過具體的代碼示例來實現(xiàn)在MySQL中更改用戶角色密碼的語句。
