點擊提交按鈕實現彈出警告框表單驗證效果
本章節介紹一下如何實現基本的表單驗證功能。
最為常見的一種方式就是當點擊提交按鈕的時候,如果有表單的內容填寫不符合規范那么就會彈出警告框。
代碼實例:
<!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;
if(email == "") {
alert("Email值不能為空");
$("email").focus();
return false;
}
if(email.indexOf("@") == -1 || email.indexOf(".") == -1){
alert("郵箱格式不正確,必須包含@和.");
$("email").focus();
return false;
}
if(password == ""){
alert("密碼不能為空");
$("password").focus();
return false;
}
if(password.length < 6) {
alert("密碼長度必須大于或者等于6");
$("password").focus();
return false;
}
if(repassword != password) {
alert("兩次輸入的密碼不一致");
$("repassword").focus();
return false;
}
if(name == "") {
alert("姓名不能為空");
$("name").focus();
return false;
}
for(var i = 0; i < name.length; i++) {
var j = name.subString(i , i+1);
if(isNaN(j) == false) {
alert('姓名中不能包含數字');
$("name").focus();
return false;
}
}
}
window.onload=function(){
var obt=document.getElementById("bt");
obt.onclick=function(){return check()}
}
</script>
</head>
<body>
<form name="login_form" method="post">
<div>Email:<input type="text" name="email" id="email"/></div>
<div>密碼:<input type="password" name="password" id="password"/></div>
<div>重輸密碼:<input type="password" name="repassword" id="repassword"/></div>
<div>姓名:<input type="text" name="name" id="name"/></div>
<div><input id="bt" type="submit" value="注冊"/></div>
</form>
</body>
</html>
上面的代碼實現了我們的要求,如果表單元素值不滿足要求,則會彈出提示框,下面簡單介紹一下需要注意的一些問題。
if語句中都有一個return false,這是為了跳出函數的執行,并且能夠阻止按鈕的默認動作,否則的話依然會提交表單。
focus()方法則是為了使不符合要求的當前表單元素獲取焦點。
1.focus()方法可以參閱javascript password.focus()一章節。
2.return false可以參閱javascript return false的作用是什么一章節。
3.indexOf()方法可以參閱javascript String indexOf()一章節。
4.isNaN()方法可以參閱javascript isNaN()一章節。
相關推薦
-
angularJS的$attrs方法使用代碼實例
下面就是相關此方法應用的代碼實例,需要的朋友可以做一下參考。代碼如下: ut
-
EasyUI實現點擊開啟編輯框并獲得焦點的方法
下面就通過簡單的代碼片段介紹一下如何實現標題中涉及的功能。代碼如下:onClickRow : function(rowIndx, rowD){ vr ditor = $(#dgri
-
EasyUI對treegrid編輯方法簡單介紹
下面是一段syUI中編輯trgid的方法的代碼實例。非常的簡單,比較適合初學者參考學習,代碼如下:主從表,從表是一個trgrid,加載完數據后,點擊節點進入編輯狀態。columns : [
-
jQuery實現的生成隨機密碼代碼實例簡單介紹
本章節介紹一下如何使用jQury實現生成隨機密碼的效果。有需要的朋友可以做一下參考,代碼實例如下:
-
jQuery.position()方法獲取值為0解決方案
關于此方法的基本用法這里就不介紹了,具體用法可以參閱jQury osition()一章節。下面介紹一下此方法的一個問題,那就是獲取的值總是出現零的情況。在使用的過程中,發現osition()返回















