javascript入門
在上一個HTML入門中 我寫了一個注冊頁面 現(xiàn)實情況下 我們就需要 對表單進行驗證 比如說 輸入框不能為空 兩次輸入的密碼是否一致 還有單選按鈕和復選框必須選一個的處理方式
簡單的處理例子
<head>
<script language="javascript">
var num;
num=7;
//彈出消息框
//alert(num);
if(num%2==0){
alert(num+"是偶數(shù)");
}else{
alert(num+"不是偶數(shù)");
}
</script>
</head>
<body></body>
</html>
運行結(jié)果：
Paste_Image.png
這段代碼的幾點小知識點：
<script language = "javascript"></script>
- 這里設(shè)置了編寫的語言是
javascript -
var在javascript里是可變參數(shù) 即可以代表int或者char等等 長度也不需要設(shè)定 -
alert（）；是windows.alert();這里 windows可以省略 是彈出消息框
JavaSprict處理表單
這里我寫了一個注冊頁面 一般注冊頁面 我們 不允許提交空的信息 那樣是沒有意義的
用javascript處理注冊信息不能為空等
<head>
<script language="javascript">
function ckFrm(){
var uname = window.document.frm.uname.value;
if(uname==""){
alert("用戶名不能為空！");
document.frm.uname.focus();
return false ;
}
var pas = document.frm.pas;
var pas2 = document.frm.pas2;
if(pas.value=="") {
alert("密碼不能為空");
document.frm.pas.focus();
return false;
}
if(pas.value!=pas2.value) {
alert("兩次輸入的密碼不一致");
return false;
}
if(!(document.frm.gender[0].checked || document.frm.gender[1].checked)) {
alert("總得選個性別吧");
return false;
}
var habbyArr = document.frm.habby;
var flag = false;
for(var i;i<habbyArr.length;i++) {
if(habbyArr[i].checked){
flag = true;
}
if(!flag) {
alert("選擇一個你喜歡的吧");
}
return flag;
}
}
</script>
</head>
這上面部分實現(xiàn)處理部分小知識點：
-
document.frm.name是根據(jù)屬性值的name屬性選取內(nèi)容 并判斷 - 這里涉及到了一個復選框的不能為空判斷 由于復選框的name值都一樣 這里 就讓我們具體的了解到了 復選框是根據(jù)數(shù)組存儲的用數(shù)組的.length屬性來判斷
document.frm.habby[i]上代碼中for循環(huán)可以看一下
<form name="frm" action="Demo.html" method="post" onsubmit="return ckFrm()">
<table width="400" border="1" cellspacing="0" cellpadding="3">
<tr>
<td>用戶名:</td>
<td> <input type="text" name="uname"/> </td>
</tr>
<tr>
<td>密碼:</td>
<td><input type="password" name="pas"/> </td>
</tr>
<tr>
<td>確認密碼:</td>
<td><input type="password" name="pas2"/> </td>
</tr>
<tr>
<td>性別:</td>
<td>
<input type="radio" name="gender" value="female"/>女
<input type="radio" name="gender" value="male"/>男
</td>
</tr>
<tr>
<td>愛好:</td>
<td><input type="checkbox" name="habby" value="dance"/>跳舞
<input type="checkbox" name="hobby" value="song"/>唱歌
<input type="checkbox" name="hobby" value="sport"/>運動
<input type="checkbox" name="hobby" value="read"/>讀書
</td>
</tr>
<tr>
<td>星座</td>
<td>
<select name="str" >
<option value="-1" >--請選擇--</option>
<option value="1">摩羯座</option>
</select>
</td>
</tr>
<tr>
<th colspan="2">
<input type="submit" value=" 注 冊 "/>
<input type="reset" value=" 重 置 "/>
</th>
</tr>
</table>
</form>
</body>
</html>
這是頁面部分 乖寶寶 堅持看完 就一點點啦
小知識點：
- 昨天更的是簡單的表格 這里將表格與
<input/>結(jié)合在一起 - 這里涉及到了 單選框 性別那一欄itype=radio- 復選框 愛好那一欄type=checkbox - 下拉選擇框 星座那一欄
<select></select>標簽實現(xiàn)- 按鈕用了submit 和 reset -
form表單處理 那一欄onsubmit="return ckFrm()"點submit后調(diào)用函數(shù)
實現(xiàn)結(jié)果：
![Uploading Paste_Image_542744.png . . .]
Paste_Image.png
Paste_Image.png
