js驗證表單大全
1. 長度限制
<script>
function test()
{
if(document.a.b.value.length>50)
{
alert("不能超過50個字符!");
document.a.b.focus();
return false;
}
}
</script>
<form name=a onsubmit="return test()">
<textarea name="b" cols="40" wrap="VIRTUAL" rows="6"></textarea>
<input type="submit" name="Submit" value="check">
</form>
2. 只能是漢字
<input onkeyup="value="/oblog/value.replace(/[^\u4E00-\u9FA5]/g,'')">
3." 只能是英文
<script language=javascript>
function onlyEng()
{
if(!(event.keyCode>=65&&event.keyCode<=90))
event.returnvalue=false;
}
</script>
<input onkeydown="onlyEng();">
4. 只能是數(shù)字
<script language=javascript>
function onlyNum()
{
if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
//考慮小鍵盤上的數(shù)字鍵
event.returnvalue=false;
}
</script>
<input onkeydown="onlyNum();">
5. 只能是英文字符和數(shù)字
<input onkeyup="value="/oblog/value.replace(/[\W]/g,"'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
6. 驗證油箱格式
<SCRIPT LANGUAGE=javascript RUNAT=Server>
function isEmail(strEmail) {
if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
return true;
else
alert("oh");
}
</SCRIPT>
<input type=text onblur=isEmail(this.value)>
7. 屏蔽關(guān)鍵字(這里屏蔽***和****)
<script language="javascript1.2">
function test() {
if((a.b.value.indexOf ("***") == 0)||(a.b.value.indexOf ("****") == 0)){
alert(":)");
a.b.focus();
return false;}
}
</script>
<form name=a onsubmit="return test()">
<input type=text name=b>
<input type="submit" name="Submit" value="check">
</form>
8. 兩次輸入密碼是否相同
<FORM METHOD=POST ACTION="">
<input type="password" id="input1">
<input type="password" id="input2">
<input type="button" value="test" onclick="check()">
</FORM>
<script>
function check()
{
with(document.all){
if(input1.value!=input2.value)
{
alert("false")
input1.value = "";
input2.value = "";
}
else document.forms[0].submit();
}
}
</script>
夠了吧 :)
屏蔽右鍵 很酷
oncontextmenu="return false" ondragstart="return false" onselectstart="return false"
加在body中
二
2.1 表單項不能為空
<script language="javascript">
<!--
function CheckForm()
{
if (document.form.name.value.length == 0) {
alert("請輸入您姓名!");
document.form.name.focus();
return false;
}
return true;
}
-->
</script>
2.2 比較兩個表單項的值是否相同
<script language="javascript">
<!--
function CheckForm()
if (document.form.PWD.value != document.form.PWD_Again.value) {
alert("您兩次輸入的密碼不一樣!請重新輸入.");
document.ADDUser.PWD.focus();
return false;
}
return true;
}
-->
</script>
2.3 表單項只能為數(shù)字和"_",用于電話/銀行賬號驗證上,可擴展到域名注冊等
<script language="javascript">
<!--
function isNumber(String)
{
var Letters = "1234567890-"; //可以自己增加可輸入值
var i;
var c;
if(String.charAt( 0 )=='-')
return false;
if( String.charAt( String.length - 1 ) == '-' )
return false;
for( i = 0; i < String.length; i ++ )
{
c = String.charAt( i );
if (Letters.indexOf( c ) < 0)
return false;
}
return true;
}
function CheckForm()
{
if(! isNumber(document.form.TEL.value)) {
alert("您的電話號碼不合法!");
document.form.TEL.focus();
return false;
}
return true;
}
-->
</script>
2.4 表單項輸入數(shù)值/長度限定
<script language="javascript">
<!--
function CheckForm()
{
if (document.form.count.value > 100 || document.form.count.value < 1)
{
alert("輸入數(shù)值不能小于零大于100!");
document.form.count.focus();
return false;
}
if (document.form.MESSAGE.value.length<10)
{
alert("輸入文字小于10!");
document.form.MESSAGE.focus();
return false;
}
return true;
}
//-->
</script>
2.5 中文/英文/數(shù)字/郵件地址合法性判斷
<SCRIPT LANGUAGE="javascript">
<!--
function isEnglish(name) //英文值檢測
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charCodeAt(i) > 128)
return false;
}
return true;
}
function isChinese(name) //中文值檢測
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charCodeAt(i) > 128)
return true;
}
return false;
}
function isMail(name) // E-mail值檢測
{
if(! isEnglish(name))
return false;
i = name.indexOf(" at ");
j = name dot lastIndexOf(" at ");
if(i == -1)
return false;
if(i != j)
return false;
if(i == name dot length)
return false;
return true;
}
function isNumber(name) //數(shù)值檢測
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charAt(i) < "0" || name.charAt(i) > "9")
return false;
}
return true;
}
function CheckForm()
{
if(! isMail(form.Email.value)) {
alert("您的電子郵件不合法!");
form.Email.focus();
return false;
}
if(! isEnglish(form.name.value)) {
alert("英文名不合法!");
form.name.focus();
return false;
}
if(! isChinese(form.cnname.value)) {
alert("中文名不合法!");
form.cnname.focus();
return false;
}
if(! isNumber(form.PublicZipCode.value)) {
alert("郵政編碼不合法!");
form.PublicZipCode.focus();
return false;
}
return true;
}
//-->
</SCRIPT>
2.6 限定表單項不能輸入的字符
<script language="javascript">
<!--
function contain(str,charset)// 字符串包含測試函數(shù)
{
var i;
for(i=0;i<charset.length;i++)
if(str.indexOf(charset.charAt(i))>=0)
return true;
return false;
}
function CheckForm()
{
if ((contain(document.form.NAME.value, "%\(\)><")) || (contain(document.form.MESSAGE.value, "%\(\)><")))
{
alert("輸入了非法字符");
document.form.NAME.focus();
return false;
}
return true;
}
//-->
</script>
1. 檢查一段字符串是否全由數(shù)字組成
---------------------------------------
<script language="Javascript"><!--
function checkNum(str){return str.match(/\D/)==null}
alert(checkNum("1232142141"))
alert(checkNum("123214214a1"))
// --></script>
2. 怎么判斷是否是字符
---------------------------------------
if (/[^\x00-\xff]/g.test(s)) alert("含有漢字");
else alert("全是字符");
3. 怎么判斷是否含有漢字
---------------------------------------
if (escape(str).indexOf("%u")!=-1) alert("含有漢字");
else alert("全是字符");
4. 郵箱格式驗證
---------------------------------------
//函數(shù)名:chkemail
//功能介紹:檢查是否為Email Address
//參數(shù)說明:要檢查的字符串
//返回值:0:不是 1:是
function chkemail(a)
{ var i=a.length;
var temp = a.indexOf('@');
var tempd = a.indexOf('.');
if (temp > 1) {
if ((i-temp) > 3){
if ((i-tempd)>0){
return 1;
}
}
}
return 0;
}
5. 數(shù)字格式驗證
---------------------------------------
//函數(shù)名:fucCheckNUM
//功能介紹:檢查是否為數(shù)字
//參數(shù)說明:要檢查的數(shù)字
//返回值:1為是數(shù)字,0為不是數(shù)字
function fucCheckNUM(NUM)
{
var i,j,strTemp;
strTemp="0123456789";
if ( NUM.length== 0)
return 0
for (i=0;i<NUM.length;i++)
{
j=strTemp.indexOf(NUM.charAt(i));
if (j==-1)
{
//說明有字符不是數(shù)字
return 0;
}
}
//說明是數(shù)字
return 1;
}
6. 電話號碼格式驗證
---------------------------------------
//函數(shù)名:fucCheckTEL
//功能介紹:檢查是否為電話號碼
//參數(shù)說明:要檢查的字符串
//返回值:1為是合法,0為不合法
function fucCheckTEL(TEL)
{
var i,j,strTemp;
strTemp="0123456789-()# ";
for (i=0;i<TEL.length;i++)
{
j=strTemp.indexOf(TEL.charAt(i));
if (j==-1)
{
//說明有字符不合法
return 0;
}
}
//說明合法
return 1;
}
7. 判斷輸入是否為中文的函數(shù)
---------------------------------------
function ischinese(s){
var ret=true;
for(var i=0;i<s.length;i++)
ret=ret && (s.charCodeAt(i)>=10000);
return ret;
}
8. 綜合的判斷用戶輸入的合法性的函數(shù)
---------------------------------------
<script language="javascript">
//限制輸入字符的位數(shù)開始
//m是用戶輸入,n是要限制的位數(shù)
function issmall(m,n)
{
if ((m<n) && (m>0))
{
return(false);
}
else
{return(true);}
}
9. 判斷密碼是否輸入一致
---------------------------------------
function issame(str1,str2)
{
if (str1==str2)
{return(true);}
else
{return(false);}
}
10. 判斷用戶名是否為數(shù)字字母下滑線
---------------------------------------
function notchinese(str){
var reg=/[^A-Za-z0-9_]/g
if (reg.test(str)){
return (false);
}else{
return(true); }
}
11. form文本域的通用校驗函數(shù)
---------------------------------------
作用:檢測所有必須非空的input文本,比如姓名,賬號,郵件地址等等。
該校驗現(xiàn)在只針對文本域,如果要針對form里面的其他域?qū)ο?,可以改變判斷條件。
使用方法:在要檢測的文本域中加入title文字。文字是在提示信息,你要提示給用戶的該字段的中文名。比如要檢測用戶名
html如下<input name="txt_1" title="姓名">,當然,最好用可視化工具比如dreamweaver什么的來編輯域。
如果要檢測數(shù)字類型數(shù)據(jù)的話,再把域的id統(tǒng)一為sz.
javascript判斷日期類型比較麻煩,所以就沒有做日期類型校驗的程序了.高手可以補充。
程序比較草,只是提供一個思路。拋磚引玉! :)
哦,對了,函數(shù)調(diào)用方法:< form onsubmit="return dovalidate()">
function dovalidate()
{
fm=document.forms[0] //只檢測一個form,如果是多個可以改變判斷條件
for(i=0;i<fm.length;i++)
{
//檢測判斷條件,根據(jù)類型不同可以修改
if(fm[i].tagName.toUpperCase()=="INPUT" &&fm[i].type.toUpperCase()=="TEXT" && (fm[i].title!=""))
if(fm[i].value="/blog/="")//
{
str_warn1=fm[i].title+"不能為空!";
alert(str_warn1);
fm[i].focus();
return false;
}
if(fm[i].id.toUpperCase()=="SZ")//數(shù)字校驗
{
if(isNaN(fm[i].value))
{ str_warn2=fm[i].title+"格式不對";
alert(str_warn2);
fm[i].focus();
return false;
}
}
}
return true;
}
2 >表單提交驗證類
2.1 表單項不能為空
<script language="javascript">
<!--
function CheckForm()
{
if (document.form.name.value.length == 0) {
alert("請輸入您姓名!");
document.form.name.focus();
return false;
}
return true;
}
-->
</script>
2.2 比較兩個表單項的值是否相同
<script language="javascript">
<!--
function CheckForm()
if (document.form.PWD.value != document.form.PWD_Again.value) {
alert("您兩次輸入的密碼不一樣!請重新輸入.");
document.ADDUser.PWD.focus();
return false;
}
return true;
}
-->
</script>
2.3 表單項只能為數(shù)字和"_",用于電話/銀行賬號驗證上,可擴展到域名注冊等
<script language="javascript">
<!--
function isNumber(String)
{
var Letters = "1234567890-"; //可以自己增加可輸入值
var i;
var c;
if(String.charAt( 0 )=='-')
return false;
if( String.charAt( String.length - 1 ) == '-' )
return false;
for( i = 0; i < String.length; i ++ )
{
c = String.charAt( i );
if (Letters.indexOf( c ) < 0)
return false;
}
return true;
}
function CheckForm()
{
if(! isNumber(document.form.TEL.value)) {
alert("您的電話號碼不合法!");
document.form.TEL.focus();
return false;
}
return true;
}
-->
</script>
2.4 表單項輸入數(shù)值/長度限定
<script language="javascript">
<!--
function CheckForm()
{
if (document.form.count.value > 100 || document.form.count.value < 1)
{
alert("輸入數(shù)值不能小于零大于100!");
document.form.count.focus();
return false;
}
if (document.form.MESSAGE.value.length<10)
{
alert("輸入文字小于10!");
document.form.MESSAGE.focus();
return false;
}
return true;
}
//-->
</script>
2.5 中文/英文/數(shù)字/郵件地址合法性判斷
<SCRIPT LANGUAGE="javascript">
<!--
function isEnglish(name) //英文值檢測
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charCodeAt(i) > 128)
return false;
}
return true;
}
function isChinese(name) //中文值檢測
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charCodeAt(i) > 128)
return true;
}
return false;
}
function isMail(name) // E-mail值檢測
{
if(! isEnglish(name))
return false;
i = name.indexOf(" at ");
j = name dot lastIndexOf(" at ");
if(i == -1)
return false;
if(i != j)
return false;
if(i == name dot length)
return false;
return true;
}
function isNumber(name) //數(shù)值檢測
{
if(name.length == 0)
return false;
for(i = 0; i < name.length; i++) {
if(name.charAt(i) < "0" || name.charAt(i) > "9")
return false;
}
return true;
}
function CheckForm()
{
if(! isMail(form.Email.value)) {
alert("您的電子郵件不合法!");
form.Email.focus();
return false;
}
if(! isEnglish(form.name.value)) {
alert("英文名不合法!");
form.name.focus();
return false;
}
if(! isChinese(form.cnname.value)) {
alert("中文名不合法!");
form.cnname.focus();
return false;
}
if(! isNumber(form.PublicZipCode.value)) {
alert("郵政編碼不合法!");
form.PublicZipCode.focus();
return false;
}
return true;
}
//-->
</SCRIPT>
2.6 限定表單項不能輸入的字符
<script language="javascript">
<!--
function contain(str,charset)// 字符串包含測試函數(shù)
{
var i;
for(i=0;i<charset.length;i++)
if(str.indexOf(charset.charAt(i))>=0)
return true;
return false;
}
function CheckForm()
{
if ((contain(document.form.NAME.value, "%\(\)><")) || (contain(document.form.MESSAGE.value, "%\(\)><")))
{
alert("輸入了非法字符");
document.form.NAME.focus();
return false;
}
return true;
}
//-->
</script>
Kandy 發(fā)表于2009年
做了一個javascript表單驗證,個人覺得還可以?;拘Ч谦@得焦點顯示提示信息,失去焦點進行驗證。
1、用戶名驗證:匹配規(guī)則為4到16個字符(包括字母和數(shù)字)。代碼如下:
function isNumberOrLetter(s)//判斷是否是數(shù)字或字母,用于驗證用戶名,失去焦點驗證。
{
var regu = "^[0-9a-zA-Z]{4,16}$";
var re = new RegExp(regu);
if (!re.test(s))
{
document.getElementById ("userInf").innerHTML="用戶名格式不對!";
document.getElementById ("userInf").style.color="red";
}
else
{
document.getElementById ("userInf").innerHTML="用戶名通過!";
document.getElementById ("userInf").style.color="green";
document.getElementById ("userIDCheck").innerHTML="";
2、密碼驗證:規(guī)則為6到16個字符、下劃線,第一個字符為字母。
function validatorPassword(s)//驗證規(guī)則為6到16數(shù)字、字母、下劃線組成,首字母為字母,用于驗證密碼。
{
regu="^[a-zA-Z][0-9a-zA-Z_]{5,15}$";
re=new RegExp(regu);
if (!re.test(s))
{
document.getElementById ("passwordInf").innerHTML="不對!";
document.getElementById ("passwordInf").style.color="red";
}
else
{
document.getElementById ("passwordInf").innerHTML="通過!";
document.getElementById ("passwordInf").style.color="green";
document.getElementById ("passwordCheck").innerHTML="";
}
// alert("6到16個數(shù)字、下劃線和英文字符,第一個必須為字母,不區(qū)分字母大小寫");
}
3、密碼確認:驗證兩次密碼必須一致。
function passwordConfirm(s)//確認密碼驗證
{
if(s.toLowerCase()!=document.getElementById ("password").value.toLowerCase())
{
document.getElementById ("confirmInf").innerHTML="密碼不一致!";
document.getElementById ("confirmInf").style.color="red";
}
else
{
document.getElementById ("confirmInf").innerHTML="通過!";
document.getElementById ("confirmInf").style.color="green";
document.getElementById ("confirmCheck").innerHTML="";
}
// alert("兩次密碼輸入不一致");
}
4、郵箱驗證:
function isEmail(strEmail) //郵箱驗證
{
if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) == -1)
{
document.getElementById ("emailInf").innerHTML="格式不對!";
document.getElementById ("emailInf").style.color="red";
}
else
{
document.getElementById ("emailInf").innerHTML="通過!";
document.getElementById ("emailInf").style.color="green";
document.getElementById ("emailCheck").innerHTML="";
}
// alert("Email格式不正確!");
// document.formSignUp.email.value="";
// document.formSignUp.email.focus();
}
5、身份證驗證:包括15位和18位。
function idNumber(s)//身份證驗證
{
regu1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//15wei
regu2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/;//18wei
re1=new RegExp(regu1);
re2=new RegExp(regu2);
if(!(re1.test(s)||re2.test(s)))
{
document.getElementById ("idCardInf").innerHTML="格式不對!";
document.getElementById ("idCardInf").style.color="red";
}
else
{
document.getElementById ("idCardInf").innerHTML="通過!";
document.getElementById ("idCardInf").style.color="green";
document.getElementById ("idCardCheck").innerHTML="";
}
// alert("請正確填寫18位或15位身份證號碼");
}
6、手機號碼驗證:13和15開頭的號碼。
function isMobileNO(s)//手機驗證
{
var a = /^((\(\d{3}\))|(\d{3}\-))?13\d{9}|15\d{9}$/ ;
if( !s.match(a) )
{
document.getElementById ("mobileNOInf").innerHTML="格式不對!";
document.getElementById ("mobileNOInf").style.color="red";
// alert("手機號碼格式不對");
}
else
{
document.getElementById ("mobileNOInf").innerHTML="通過!";
document.getElementById ("mobileNOInf").style.color="green";
document.getElementById ("mobileNOCheck").innerHTML="";
}
}
7、各表單域提示信息,獲得焦點驗證。
function displayInform(s)//注冊信息規(guī)則提示信息(獲得焦點驗證)
{
if(s=="user")
document.getElementById ("userIDCheck").innerHTML="(用戶名由4-16個數(shù)字或字母組成)";
if(s=="password")
document.getElementById ("passwordCheck").innerHTML="(密碼由6-16個數(shù)字、字母、下劃線組成,首字母必須是字母,不區(qū)分大小寫)";
if(s=="passwordC")
document.getElementById ("confirmCheck").innerHTML="(兩次密碼輸入必須一致)";
if(s=="idCard")
document.getElementById ("idCardCheck").innerHTML="(請輸入正確的號碼,以便你更容易找回密碼)";
if(s=="mobileNO")
document.getElementById ("mobileNOCheck").innerHTML="(請輸入正確的號碼,以便你更快找回密碼)";
if(s=="email")
document.getElementById ("emailCheck").innerHTML="(請輸入正確的郵箱地址,以便你更容易找回密碼)";
}
8、表單提交驗證:先對必填項進行非空驗證,再進行匹配驗證。
function submitValidator() //提交驗證
{
if(document.getElementById("control").style.display=="inline")
{
if((document.getElementById ("user").value=="")||(document.getElementById("password").value=="")||(document.getElementById("passwordC").value=="")||(document.getElementById("answer").value=="")||(document.getElementById("question").value==""))
{
alert("必填項不能為空!");
return false;
}
else
{
if((document.getElementById ("user").value).match(/^[0-9a-zA-Z]{4,16}$/)&&(document.getElementById("password").value).match(/^[a-zA-Z][0-9a-zA-Z_]{5,15}$/)&&
(document.getElementById ("password").value.toLowerCase()==document.getElementById ("passwordC").value.toLowerCase()))
{return true;}
else
{alert("輸入格式不對");return false;}
}
}
else
{
if((document.getElementById ("user").value=="")||(document.getElementById("password").value=="")||(document.getElementById("passwordC").value=="")||(document.getElementById("answer").value==""))
{
alert("必填項不能為空!");
return false;
}
else
{
if((document.getElementById ("user").value).match(/^[0-9a-zA-Z]{4,16}$/)&&(document.getElementById("password").value).match(/^[a-zA-Z][0-9a-zA-Z_]{5,15}$/)&&
(document.getElementById ("password").value.toLowerCase()==document.getElementById ("passwordC").value.toLowerCase()))
{return true;}
else
{alert("輸入格式不對");return false;}
}
}
本文來自CSDN博客,轉(zhuǎn)載請標明出處:http://blog.csdn.net/diershi/archive/2009/04/16/4084981.aspx
JS表單驗證
對form元素進行腳本編寫
獲取表單的引用
var oForm = document.forms[0]; //得到第一個表單
var oOtherForm = document.forms["formz"] //得到名為formz的表單
訪問表單字段
var oTextbox1 = oForm.textbox1; //得到名為"textbox"的字段
var oTextbox1 = oForm["text box 1"] //得到名為"text box 1"的字段
表單字段共性
var oField 1 = oForm.elements[0];
oField1.focus(); //設(shè)置焦點到第二個字段
獲得焦點:document.forms[0].name1.focus();
表單提交
使用圖片進行提交
<input type="image" src="submit.gif" />
使用submit進行提交
<input type="submit" value="submit" />
表單重置
<input type="button" value="Reset" onclick="document.forms[0].reset()">
對文本框進行腳本編寫
獲取/更改文本框的值
選擇文本
<input type="button" value="選擇文本" onclick="selectText()">
文本框事件
<input type="text" name="textbox1" value="" onselect="alert('select')" />
自動選擇文本
<input type="text" onfocus="this.select()" />
<textarea onfocus="this.select()"></textarea>
對列表框和組合框進行腳本編寫
訪問選項
獲取/更改選中項
添加選項
var ListUtil = new Object();
ListUtil.add = function(oListbox, sName, sValue){option.appendChild(document.createTextNode(sName));}
刪除選項
var oListbox = document.getElementsById("selListbox");
oListbox.remove(0); //移除一個選項
移動選項
重新排序選項
對復(fù)選框和單選框進行腳本編寫
得到單選框的值
<input type="radio" id="male" name="gender" value="male">男</input>
document.getElementById("male").value
得到復(fù)選框的值
表單驗證
使用submit事件在錯誤發(fā)生之后捕獲錯誤
使用change事件在錯誤發(fā)生時捕獲
使用keypress事件在錯誤發(fā)生之前捕獲錯誤
表單效驗最佳實踐
必須對用戶有幫助
不要讓人討厭
只要有可能,就用HTML功能代替javascript
一次顯示所有錯誤
早點捕獲錯誤
如果拿不準,就不要太嚴格
------------------------------------------------代碼實例:
<script type="text/javascript">
//function validate(){
// var user = document.getElementById("user");
// user.disabled="true"; //表示不可用
// user.focus(); //得到焦點
// onfocus="validate();" //當某個文本框得到焦點時觸發(fā)
// onblur="validate()" //當某個文本框失去焦點時觸發(fā)
///}
//獲取表單的四種方式
//function validate(){
//var form1 = document.getElementById("form1");
//var form = document.forms[0];
//var form = document.forms["form1"];
//var form = document.form1;
//alert(form==form1)
//獲取表單中的元素
//var a = form1.user;
//var a = form1.elements[0];
//var a = form1.elements["user"];
//alert(a.value)
//表單提交
//form1.submit();
//}
//獲取單選框的值
// function validate(){
// var form1 = document.getElementById("form1");
//var user = form1.user;
//user.focus();
//user.select(); //選中文本框的內(nèi)容
//var rName = document.getElementsByName("radioName");
// var a = form1.radioName;
// for(var i=0;i<a.length;i++){
// if(a[i].checked){
// alert(a[i].value)
// }
// }
//}
//獲取復(fù)選框的值
/** function validate(){
var form1 = document.getElementById("form1");
var check = form1.checkName;
for(var i=0;i<check.length;i++){
if(check[i].checked){
alert(check[i].value)
}
}
}**/
function validate(){
}
//onchange事件
function chage(){
var user = document.getElementById("user");
if(user.value==""){
document.getElementById("span1").innerHTML="用戶名不能為null";
user.focus();
return false;
}else{
document.getElementById("span1").innerHTML="用戶名合法";
return ture;
}
}
</script>
<img name="img1" src="C:\Documents and Settings\黃\桌面\1.jpg" width="200px" height="200px">
<select onchange="document.img1.src=options[selectedIndex].value">
<option value="C:\Documents and Settings\黃\桌面\ff.gif">敬敬</option>
<option value="C:\Documents and Settings\黃\桌面\ff.gif">敬敬</option>
<option value="C:\Documents and Settings\黃\桌面\1.jpg">敬敬</option>
</select>
Document對象在檢驗表單中的作用
在制作登錄表單驗證的過程中,我們經(jīng)常要用到Document函數(shù)對象,這是JavaScript非常重要的函數(shù)。W3C把它納入DOM文檔模型對象中??梢哉f它是元素操作的一個十分重要的方法。
此函數(shù)的語法代碼如下:
Document.ement.chosts.x //x可表示為屬性也可表示為方法。
如要表示表單reg中名字輸入框name的文本內(nèi)容:document.reg.name.value
要讓輸入框獲得焦點:代碼格式為document.reg.name.focus()
下面是一段典型的驗證輸入函數(shù)代碼:
<script language="javascript">
function chekname(){
name=document.reg.name.value;
if(name==""){
alert("請輸入昵稱!");
document.reg.name.vlaue=focus(); 或document.reg.name.focus() ;
return false;
}else{
open("chkname.php?name="+name+"","chk","noscrollbars=no,width=200,height=50,top=200,left=200");
}
}
</script>
此段自定義函數(shù)的意思是驗證輸入框是不是空白,若不是空白則打開一個名為“chk”帶有傳遞參數(shù)的窗口進一步驗證用戶名是不是合法。
Document對象在檢驗表單中的作用
轉(zhuǎn)載自 風(fēng)之戀 轉(zhuǎn)載于2009
asp鏈接sqlserver
在ASP中數(shù)據(jù)庫鏈接2中方法
1、直接用字符串鏈接,代碼如下:
<%
'連接數(shù)據(jù)庫
Dim conn
Set conn = Server.CreateObject("ADODB.Connection")
conn.Open "driver={SQL Server};server=主機ip地址; uid=用戶名;pwd=密碼;database=數(shù)據(jù)庫名"
%>
2、利用DSN(數(shù)據(jù)源)鏈接,這種方法你要先創(chuàng)建一個DSN,創(chuàng)建方法點擊服務(wù)器/控制面板/管理工具/數(shù)據(jù)源 (ODBC)圖標,打開數(shù)據(jù)源管理器,在系統(tǒng)DSN選項卡中創(chuàng)建一個SQL Server的數(shù)據(jù)源。鏈接代碼如下:
<%
'連接數(shù)據(jù)庫
Dim conn
Set conn=server.createobject("adodb.connection")
conn.Open "DSN=article;uid=用戶名;pwd=密碼;"
%>
然而在DW MX中系統(tǒng)采用的二種方法,具體步驟如下:
1、在Files面板中定義一個站點
2、點擊Application面板中Database選項卡中的加號按鈕,選擇Custom Connecting String(自定義鏈接字符串,就是采用的一種方法鏈接)或者Data Source Name(DSN,就是的二種方法鏈接),打開浮動面板,填入?yún)?shù)即可。
我覺得不管用DW MX 寫的程序怎么樣,對于數(shù)據(jù)庫的連接文件(常用的是conn.asp),我有兩個建議,一是在網(wǎng)上最好使用手寫的連接文件(下面詳細講如何寫),二是引用數(shù)據(jù)庫時要在文件開頭使用<!--#include file="Connections/conn.asp" -->,調(diào)用數(shù)據(jù)庫,這樣數(shù)據(jù)庫的名字或位置的改變就比較容易了。
其次,解釋一下如何寫一個conn.asp文件。最簡單的是
<%
dim conn
dim connstr
connstr="DBQ="+server.mappath("data/database.mdb")+";DefaultDir=;DRIVER={Microsoft Access Driver (*.mdb)};"
set conn=server.createobject("ADODB.CONNECTION")
conn.open connstr
%>
關(guān)于 server.mappath("data/database.mdb")解釋一下。本例使用的是相對路徑,意思是conn.asp與data目錄在同一個目錄下。如果conn.asp所在目錄與data目錄在同一個目錄下,則為server.mappath("../data/database.mdb") 。
也可以使用絕對路徑 server.mappath("/data/database.mdb"), 意思是data為根目錄,與conn.asp在那里沒有關(guān)系
具體的詳細的例子可以看icefire 的例http://www.kupage.com/forum/data/2002/9/29/1111314071.htm
最后是關(guān)于使用sql數(shù)據(jù)庫的問題,不同的主頁服務(wù)商是不同的。下面是CHINADNS新網(wǎng)的解決方法,供大家參考。
1.安裝一個SQLSERVER的客戶端軟件
2.點擊在本機任務(wù)欄中開始-〉MicrosoftSqlServer2000-〉EnterpriseManager
3.在打開SQLSERVER客戶端軟件后,在文件欄中點擊Action中的NewSqlServer
Registration,然后填寫您的sqlserver的IP地址,用戶名和密碼(與FTP的用戶名密碼相同)在點擊完成后,將會出現(xiàn)211.154.211.xx――RegisteredSuccessfully,這說明您的數(shù)據(jù)庫已經(jīng)開通。
4.在ConsoleRoot中選擇您數(shù)據(jù)庫的IP,點擊鼠標右建選擇Connect,正常網(wǎng)速下應(yīng)出現(xiàn)一個連接成功的圖標。
5.連接成功后,選擇211.154.211.xx-〉Database-〉www_domainname_com,打開您的數(shù)據(jù)庫
6.打開Tables,,將顯示出所有類型為System的列表,您可以用鼠標右建中NewTable建表,或用OpenTable查看表內(nèi)容。您也可以用選用步驟2中的import或output進行倒入,倒出表操作相關(guān)的操作請您查看相關(guān)網(wǎng)頁和書籍。
附:
ASP連接數(shù)據(jù)庫相關(guān)源代碼參考
1.ASP連接Access數(shù)據(jù)庫語句
SetConn=Server.CreateObject("ADODB.Connection")
Connstr="DBQ="+server.mappath("aaa/bbspp1.mdb")+";DefaultDir=;DRIVER={Microsoft AccessDriver(*.mdb)};DriverId=25;FIL=MSAccess; ImplicitCommitSync=Yes;MaxBufferSize=512;MaxScanRows=8;PageTimeout=5;SafeTransactions=0;Threads=3;UserCommitSync=Yes;"
Conn.Openconnstr
其中SetConn=Server.CreateObject("ADODB.Connection")為建立一個訪問數(shù)據(jù)的對象server.mappath(aaa/bbspp1.mdb)是告訴服務(wù)器access數(shù)據(jù)庫訪問的路徑
2.ASP連接Sqlserver數(shù)據(jù)庫語句
Setconn=Server.CreateObject("ADODB.Connection")
conn.Open"driver={SQLServer};server=202.108.32.94; uid=USERID;pwd=PASSWORD;database=www_panwei_com"
connopen
其中/Setconn=Server.CreateObject("ADODB.Connection")為設(shè)置一個數(shù)據(jù)庫的連接對象
driver=()告訴連接的設(shè)備名是SQL-SERVER
server是連接的服務(wù)器的ip地址,Uid是指用戶的用戶名,pwd是指的用戶的password,
database是用戶數(shù)據(jù)庫在服務(wù)器端的數(shù)據(jù)庫的名稱
HTML標簽
Meta 標簽之http-equiv屬性詳解2009年09月11日 星期五 17:43http-equiv,相當于http的文件頭作用,它可以向瀏覽器傳回一些有用的信息,以幫助正確和精確地顯示網(wǎng)頁內(nèi)容。
Meta標簽的http-equiv屬性語法格式:<meta http-equiv="參數(shù)" content="參數(shù)變量值">
常用的HTTP-EQUIV類型有:
1. Content-Language
說明:設(shè)定頁面使用的字符集
用法:<Meta http-equiv="Content-Language" Content="zh-CN">
注意:該META標簽定義了HTML頁面所使用的字符集為GB2132,就是國標漢字碼。如果將其中的“charset=GB2312”替換成“BIG5”,則該頁面所用的字符集就是繁體中文Big5碼。當你瀏覽一些國外的站點時,IE瀏覽器會提示你要正確顯示該頁面需要下載xx語支持。這個功能就是通過讀取HTML頁面META標簽的Content-Type屬性而得知需要使用哪種字符集顯示該頁面的。如果系統(tǒng)里沒有裝相應(yīng)的字符集,則IE就提示下載。其他的語言也對應(yīng)不同的charset,比如日文的字符集是“iso-2022-jp ”,韓文的是“ks_c_5601”。
2. Content-Type定義頁面制作所使用的文字語言
<Meta http-equiv="Content-Type" Content="text/html; Charset=gb2312">
Content-Type的Content還可以是:text/xml等文檔類型;
Charset選項:ISO-8859-1(英文)、BIG5、UTF-8、SHIFT-Jis、Euc、Koi8-2、us-ascii, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp,euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1,x-cns11643-2等字符集;
Content-Language的Content還可以是:EN、FR等語言代碼。
以上2個參數(shù)都可以幫助搜索引擎判斷網(wǎng)頁所使用的語言。
<!-- 搜索引擎怎樣判斷網(wǎng)頁所使用的語言?
人們喜歡以他們所知道的語言列出的搜索結(jié)果,這對搜索營銷人員是十分重要的。當一個搜索者輸入上面圖中的搜索請求時,只有用中文寫的網(wǎng)頁將被顯示在搜索結(jié)果里面。
在有些國家,例如日本和中國,大部分搜索者想要結(jié)果限制在母語上。但是在其他地方例如瑞典,搜索可以采用瑞典語和英語來進行。不同國家的搜索者有不同的語言偏好。
對搜索營銷人員而言,重要的是搜索引擎知道網(wǎng)頁所使用的語言,如果網(wǎng)頁沒能被正確地識別,可能就會從本應(yīng)發(fā)現(xiàn)它的搜索者面前消失,從而降低你的引薦訪問。
那么搜索引擎是怎樣判斷網(wǎng)頁所使用的語言呢?這里有很多不同的方法:
1. 語言meta標簽。
很多網(wǎng)頁通過一個HTML標簽來表明網(wǎng)頁使用的語言,例如<META http-equiv=”content-language” content="ja"> 表示使用的是日語,看起來簡單,搜索蜘蛛程序讀取標簽,于是搜索引擎知道是什么語言了。但是相對多的語言meta標簽是完全錯誤的,沒有標簽,句法錯誤,以及語言編碼錯誤等等。搜索引擎確實查看這些標簽,但是它們很少只從這些標簽來判定網(wǎng)頁的語言。
2. 字符編碼
計算機文件(包括HTML網(wǎng)頁)需要“對譯本(Key)”正確翻譯文件中的字符(字母,數(shù)字等等)。這種對譯本被稱為字符編碼。由網(wǎng)頁中meta標簽里聲明,例如<META http-equiv=content-type content="text/html; charset=GBK">。
網(wǎng)站瀏覽器和搜索蜘蛛程序假定網(wǎng)頁按照西方語言編碼,因此使用這些語言寫的網(wǎng)頁不需要這個標簽。為了瀏覽器顯示正確,亞洲、阿拉伯和古代斯拉夫語的文本確實需要這個標簽。因此,當搜索引擎看到針對這些語言的表情,它對正確顯示網(wǎng)頁的語言有了很高的保證。
3. 內(nèi)容分析
搜索引擎通過研究內(nèi)容中的字符模式來最終判定網(wǎng)頁的語言,哪怕是短到只有兩句話的網(wǎng)頁,內(nèi)容分析的精確度也非常高。Meta標簽只有在內(nèi)容分析后還不確定的情況下才被使用。
多數(shù)情況下,搜索引擎會自行正確地判斷網(wǎng)頁的內(nèi)容,對于只有很少幾個詞的網(wǎng)頁,要保證網(wǎng)頁被正確識別,正確的編碼語言和meta語言標簽很重要。-->
3. Refresh (刷新)
說明:讓網(wǎng)頁多長時間(秒)刷新自己,或在多長時間后讓網(wǎng)頁自動鏈接到其它網(wǎng)頁。
用法:<Meta http-equiv="Refresh" Content="5; Url=http://www.doumiao.net">
注意:其中的5是指停留5秒鐘后自動刷新到URL網(wǎng)址。
<!-- 網(wǎng)絡(luò)上常用的重定向方式有四種:Javascript 重定向,Meta refresh 重定向,301重定向,302重定向
重定向(redirect)——一個對瀏覽器的指導(dǎo),讓其顯示不同的URL而不是當初瀏覽器所請求的。重定向允許舊的URL被重新指向到目前的URL上,因此當訪客使用舊的URL時,不會得到一個“網(wǎng)頁沒有被找到”的消息(就是通常大家知道的HTTP404錯誤)。
1. Meta 更新重定向(Meta Refresh redirects)
HTML在<head>部分的meta標簽頁可以重新鏈接一個網(wǎng)頁——通常被稱為“meta”更新重定向例如:
<meta http-equiv="refresh" content="10; url=http://www.doumiao.net">
其中的“10”是告訴瀏覽器在頁面加載10秒鐘后自動跳轉(zhuǎn)到doumiao.net。
這種方法常在論壇中見到。如果在論壇上發(fā)表帖子,先會看到一個確認頁面,幾秒后會自動重新跳轉(zhuǎn)回當前的論壇頁面中。
從搜索引擎優(yōu)化的角度出發(fā),一般不希望自動轉(zhuǎn)向有延遲。不過,如果是用Meta Refresh標識進行轉(zhuǎn)向,一定要注意把延遲時間設(shè)定成至少10秒以上。對于這種自動轉(zhuǎn)向法,搜索引擎能夠自動檢測出來。因而無論網(wǎng)站的轉(zhuǎn)向出于什么目的,都很容易被搜索引擎視為對讀者的誤導(dǎo)而受到懲罰。不過,如果跳轉(zhuǎn)延遲時間設(shè)置合適,搜索引擎就不會視之為作弊。
meta 標簽之NAME屬性 詳解>>
4. Expires (期限)
說明:指定網(wǎng)頁在緩存中的過期時間,一旦網(wǎng)頁過期,必須到服務(wù)器上重新調(diào)閱。
用法:<Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT">
注意:必須使用GMT的時間格式,或直接設(shè)為0(數(shù)字表示多少時間后過期)。
5. Pragma (cach模式)
說明:禁止瀏覽器從本地機的緩存中調(diào)閱頁面內(nèi)容。
用法:<Meta http-equiv="Pragma" Content="No-cach">
注意:網(wǎng)頁不保存在緩存中,每次訪問都刷新頁面。這樣設(shè)定,訪問者將無法脫機瀏覽。
6. Set-Cookie (cookie設(shè)定)
說明:瀏覽器訪問某個頁面時會將它存在緩存中,下次再次訪問時就可從緩存中讀取,以提高速度。當你希望訪問者每次都刷新你廣告的圖標,或每次都刷新你的計數(shù)器,就要禁用緩存了。通常HTML文件沒有必要禁用緩存,對于ASP等頁面,就可以使用禁用緩存,因為每次看到的頁面都是在服務(wù)器動態(tài)生成的,緩存就失去意義。如果網(wǎng)頁過期,那么存盤的cookie將被刪除。
用法:<Meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,21-Oct-98 16:14:21 GMT; path=/">
注意:必須使用GMT的時間格式。
7. Window-target (顯示窗口的設(shè)定)
說明:強制頁面在當前窗口以獨立頁面顯示。
用法:<Meta http-equiv="Widow-target" Content="_top">
注意:這個屬性是用來防止別人在框架里調(diào)用你的頁面。
Content選項:_blank、_top、_self、_parent。
8.Pics-label (網(wǎng)頁RSAC等級評定)
說明:在IE的Internet選項中有一項內(nèi)容設(shè)置,可以防止瀏覽一些受限制的網(wǎng)站,而網(wǎng)站的限制級
別就是通過該參數(shù)來設(shè)置的。
用法:<META http-equiv=”Pics-label” Contect=
“(PICS-1.1′http://www.rsac.org/ratingsv01.html’
I gen comment ‘RSACi North America Sever’ by ‘inet@microsoft.com’
for ‘http://www.microsoft.com’ on ‘1997.06.30T14:21-0500′ r(n0 s0 v0 l0))”>
注意:不要將級別設(shè)置的太高。RSAC的評估系統(tǒng)提供了一種用來評價Web站點內(nèi)容的標準。用戶可以設(shè)置Microsoft Internet Explorer(IE3.0以上)來排除包含有色情和暴力內(nèi)容的站點。上面這個例子中的HTML取自Microsoft的主頁。代碼中的(n 0 s 0 v 0 l 0)表示該站點不包含不健康內(nèi)容。級別的評定是由RSAC,即美國娛樂委員會的評級機構(gòu)評定的,如果你想進一步了解RSAC評估系統(tǒng)的等級內(nèi)容,或者你需要評價自己的網(wǎng)站,可以訪問RSAC的站點:http://www.rsac.org/。
9.Page-Enter、Page-Exit (進入與退出)
說明:這個是頁面被載入和調(diào)出時的一些特效。
用法:<Meta http-equiv=”Page-Enter” Content=”blendTrans(Duration=0.5)”>
<Meta http-equiv=”Page-Exit” Content=”blendTrans(Duration=0.5)”>
注意:blendTrans是動態(tài)濾鏡的一種,產(chǎn)生漸隱效果。另一種動態(tài)濾鏡RevealTrans也可以用于頁面進入與退出效果:
<Meta http-equiv=”Page-Enter” Content=”revealTrans(duration=x, transition=y)”>
<Meta http-equiv=”Page-Exit” Content=”revealTrans(duration=x, transition=y)”>
Duration表示濾鏡特效的持續(xù)時間(單位:秒)
Transition濾鏡類型。表示使用哪種特效,取值為0-23。
0 矩形縮小 1 矩形擴大 2 圓形縮小 3 圓形擴大 4 下到上刷新 5 上到下刷新 6 左到右刷新 7 右到左刷新 8 豎百葉窗 9 橫百葉窗 10 錯位橫百葉窗 11 錯位豎百葉窗 12 點擴散 13 左右到中間刷新 14 中間到左右刷新 15 中間到上下 16 上下到中間 17 右下到左上 18 右上到左下 19 左上到右下 20 左下到右上 21 橫條 22 豎條 23 以上22種隨機選擇一種
10.MSThemeCompatible (XP主題)
說明:是否在IE中關(guān)閉 xp 的主題
用法:<Meta http-equiv=”MSThemeCompatible” Content=”Yes”>
注意:關(guān)閉 xp 的藍色立體按鈕系統(tǒng)顯示樣式,從而和win2k 很象。
11.IE6 (頁面生成器)
說明:頁面生成器generator,是ie6
用法:<Meta http-equiv=”IE6″ Content=”Generator”>
注意:用什么東西做的,類似商品出廠廠商。
12.Content-Script-Type (腳本相關(guān))
說明:這是近來W3C的規(guī)范,指明頁面中腳本的類型。
用法:<Meta http-equiv=”Content-Script-Type” Content=”text/javascript”>
美化主頁
1)學(xué)會打開站點,是每位學(xué)生都必須要掌握的。在初步掌握了在網(wǎng)頁中添加和編輯文字和圖片之后,還要掌握另外四種編輯網(wǎng)頁的方法:即“給網(wǎng)頁添加橫幅文本”、“編輯導(dǎo)航欄”、“在網(wǎng)頁中插入水平線”和“在網(wǎng)頁中插入滾動字幕”??梢杂眯蕾p比較的方法導(dǎo)入新課,讓學(xué)生觀察發(fā)現(xiàn),明確學(xué)習(xí)目的的同時,激發(fā)學(xué)習(xí)積極性。
(2)鼓勵學(xué)生大膽探究,利用知識的遷移打開站點。
(3)由于保存文字網(wǎng)頁和保存有圖片的網(wǎng)頁是不一樣的,這里教師要提醒學(xué)生特別注意,也可適當?shù)淖寣W(xué)生比較一下兩者的不同,再親自實踐,加深感受。
(4)由于給網(wǎng)頁加圖片,是學(xué)生愛學(xué)的內(nèi)容,也是他們愛做的事,故要以此為突破口,激發(fā)學(xué)生學(xué)習(xí)興趣,為深入學(xué)習(xí)奠定基礎(chǔ)。
(5)教師應(yīng)及時提醒學(xué)生添加圖片需注意的問題(圖片的格式、大小、效果等),給予正確的操作導(dǎo)向。
(6)其實,插入“水平線”的位置,也是很有講究的,教學(xué)時可以演示幾個不同的位置,讓學(xué)生比較一下插在哪里最美觀。本部分內(nèi)容較簡單易學(xué),可以放手讓學(xué)生自主學(xué)習(xí)。
(7) 為何剛才輸入的字幕并不滾動呢?可以讓學(xué)生討論一下。之后,教師講解,這是由于,我們是在“編輯”狀態(tài)下制作網(wǎng)頁的,要看實際效果,應(yīng)該在“預(yù)覽”狀態(tài)下觀看,單擊“顯示編輯狀態(tài)”處的“預(yù)覽”按鈕,字幕才能動感十足的滾動起來。讓學(xué)生輸入自己想輸入的文字,實際操作一下。
三、 教學(xué)活動過程:
教學(xué)
內(nèi)容 教學(xué)
環(huán)節(jié) 活動時間(分鐘) 教學(xué)活動 活動目的
教師活動 學(xué)生活動
一、引 入 引 入 5 同學(xué)們,主頁是客人到訪我們網(wǎng)站的第一,是讓到訪者了解站點的大門,是展示自我的第一舞臺。同學(xué)們,你想怎樣設(shè)計自己的第一舞臺呢?請構(gòu)思一下,然后大家交流交流。 學(xué)生先用兩分鐘時間參考書上的范例并構(gòu)思自己的主頁,然后用兩分鐘時間交流。 使學(xué)生對自己的主頁設(shè)計有一個總體構(gòu)想。
二、打開
主頁 打開
主頁 5 同學(xué)們,我們要編輯、美化主頁就必須先把它打開,誰能又快又準地把主頁打開?誰先做到,老師就請他上臺來示范給同學(xué)們看,讓他做我們的小老師。(教師在學(xué)生操作時巡視指導(dǎo)。) 學(xué)生先試著把主頁打開,教師請個別學(xué)生上講臺邊示范操作邊講解。未能打開主頁的同學(xué)在看了示范操作后繼續(xù)嘗試打開主頁,組長巡視指導(dǎo)。 通過操作讓學(xué)生明確打開主頁不編輯、美化主頁的基礎(chǔ)。
三、編輯、美化
主頁 1、修改網(wǎng)頁橫幅文本 5 同學(xué)們,你想不想自己的主頁有一個醒目的名字呢?趕快給自己的主頁起一個醒目的名字吧!請閱讀書上的操作步驟來完成,我相信你們都是很棒的?。ㄔ趯W(xué)生操作時教師巡視指導(dǎo)。) 學(xué)生先閱讀書上的操作步驟,然后嘗試給自己的主頁取一個有特色的名字。做的時候小組成員互相幫助。 通過操作讓學(xué)生知道怎樣修改網(wǎng)頁橫幅,為自己的主頁取一個有個性的名字。
2、編輯網(wǎng)站導(dǎo)航欄 5 同學(xué)們,我們做的網(wǎng)站除了內(nèi)容精彩、設(shè)計漂亮外,還要有良好的交互性,以方便瀏覽的人在各個頁面之間跳轉(zhuǎn)穿梭。這就需要一個導(dǎo)航欄來支持。我們可以根據(jù)自己的需要來編輯網(wǎng)頁的導(dǎo)航欄。(教師邊示范邊講解。在學(xué)生操作時還要對學(xué)生進行個別輔導(dǎo)。) 先看教師操作,聽講解,然后動手編輯導(dǎo)航欄。還可以根據(jù)自己主頁的設(shè)計需要,在合適的地方添加導(dǎo)航欄。在操作過程中,同組同學(xué)可以互相討論,交流合作。 通過操作活動讓學(xué)生掌握編輯導(dǎo)航欄的方法,并且可以按需要計主頁的導(dǎo)航欄的位置或內(nèi)容。
3、插入滾動字幕 5 同學(xué)們,如果我們在主頁中插入滾動字幕,可以使主頁看起來更有動感,使人覺得生動有趣。我們還可以利用“滾動字幕”來廣播一些重要信息。大家可以先閱讀一下書上的方法,然后嘗試在自己的主頁里找個合適的地方插入滾動字幕。不明白的話可以邊討論邊操作,也可以舉手讓老師幫助你。(在學(xué)生操作時教師相機對個別學(xué)生進行輔導(dǎo)。) 學(xué)生先閱讀書上的方法,然后在主頁里嘗試插入滾動字幕,在操作過程中注意組內(nèi)同學(xué)互相合作交流。 通過操作使學(xué)生掌握插入滾動字幕的方法,并能將其恰當?shù)剡\用到自己的主頁里。
4、添加圖片和文字 5 同學(xué)們,我們的主頁應(yīng)該有些文字來簡單介紹自己,還可以有一些圖片或相片,你們知道怎樣添加上去嗎?大家可以試一試。(在學(xué)生操作時教師對個別學(xué)生進行輔導(dǎo)。) 學(xué)生先學(xué)習(xí)“小錦囊”的方法,然后自己嘗試在主頁上插入文字和圖片。 通過學(xué)習(xí)活動使學(xué)生掌握了在網(wǎng)頁中插入文字和圖片的方法。
5、插入“水平線” 5 同學(xué)們,當我們的主頁放進太多的文字和圖片時,會顯得凌亂。這時我們可以給網(wǎng)頁插入“水平線”,使主頁看起來清晰有序。書上教了我們怎插入“水平線”,還告訴我們怎樣修改、調(diào)整“水平線”。大家好好閱讀,然后給我們的主頁插入各種漂亮的“水平線”。(在學(xué)生進行操作時教師巡視并指導(dǎo)需要幫助的學(xué)生。) 學(xué)生先閱讀書上的內(nèi)容,然后上機操作,根據(jù)自己的需要,在恰當?shù)牡胤讲迦?#8220;水平線”,合理布局主頁。 通過操作學(xué)生掌握插入“水平線”的方法,并能合理使用它,使自己的主頁看起來美觀大方,整齊有序。
四、小論壇 小論壇 2 同學(xué)們,你可以從“小論壇”里小華的身上得到什么啟示?大家討論討論。 同學(xué)們結(jié)合自己的實際展開討論。 通過討論使學(xué)生懂得要通過互評互學(xué)才能不斷提高自己的網(wǎng)頁制作水平,為我們的學(xué)習(xí)服務(wù)。
四、小論壇 小論壇 2 同學(xué)們,你可以從“小論壇”里小華的身上得到什么啟示?大家討論討論。 同學(xué)們結(jié)合自己的實際展開討論。 通過討論使學(xué)生懂得要通過互評互學(xué)才能不斷提高自己的網(wǎng)頁制作水平,為我們的學(xué)習(xí)服務(wù)。
四、教學(xué)評價。
在教學(xué)中,為了激發(fā)學(xué)生的學(xué)習(xí)興趣,使學(xué)生更好的掌握其中的操作技巧,提高技術(shù)水平,在學(xué)生的制作的整個過程中,我把評價機制就引入到了課堂。主要是以下幾個方面。
(一)學(xué)生的自評與互評 。我請學(xué)生參照評價表作自我評價,再由本小組內(nèi)其他同學(xué)打上分。再由別的小組同學(xué)組成評委進行評價打分。最后我和班級評委一塊點評而不打分。
教學(xué)評價,必須以欣賞為基礎(chǔ),包括自我欣賞及相互欣賞。在整個作品的制作過程中,都得到了充分的體驗。學(xué)生在自評與互評中,一直處在欣賞和被欣賞之中,他們學(xué)會欣賞他人,也相信了自己,養(yǎng)成了積極向上的品格。
(二)評價過程。
只有評價過程,學(xué)生技能和能力在作品的制作過程中可以清晰的體現(xiàn)出來。才能讓教師真正了解學(xué)生,并針對學(xué)生中出現(xiàn)的各種問題進行指導(dǎo),以利于學(xué)生更好的掌握知識和技能。在網(wǎng)頁布局時,導(dǎo)航欄的使用,水平線的插入、滾動字幕的插入、添加圖片和文字等等,都需要過程的評價。我在巡視過程中發(fā)現(xiàn)此類的問題,立即指出,學(xué)生馬上就改正好。
要做到這一點,教師在教學(xué)時應(yīng)做個有心人,等到學(xué)生的網(wǎng)頁制作完成了以后,教師一般很難發(fā)現(xiàn)學(xué)生中還存在此類問題的。課堂上要及時的發(fā)現(xiàn)問題,及時給出反饋。
(三)評價結(jié)果
我們不但要注重評價過程,也要注重評價結(jié)果。我把學(xué)生把自己的網(wǎng)頁掛到我們學(xué)校內(nèi)網(wǎng)上,會讓學(xué)生總覺得自己出了成績,而這成績就存在電腦里,非常有成就感,增加了下次學(xué)習(xí)的主動投入性。
信息技術(shù)學(xué)習(xí)效果是即時顯現(xiàn)的,教師適時地讓學(xué)生打開以前的網(wǎng)頁比較一下自己的學(xué)習(xí)有沒有進步,哪些地方進步了?會讓他們有一種“學(xué)習(xí)會帶來進步”的認知。學(xué)生就會進一步探究的一種延續(xù)性,從而達到在信息技術(shù)課學(xué)習(xí)中實現(xiàn)一種質(zhì)的飛躍。
五、課后教學(xué)反思。
在教學(xué)活動中,我精心設(shè)計活動過程,詳細演示每個操作環(huán)節(jié),逐個指導(dǎo)操作中的問題,搜集整理各種可用課程資源。我和同學(xué)們一起體驗著美化主頁的快樂,因為有興趣這個最好的老師,在不斷的嘗試和感悟中,聰明的他們學(xué)會了很多很多,如:插入圖片文字、設(shè)置水平線、加入導(dǎo)航欄等等,每一次操作的成功都會給他們帶來極大的驚喜。我還鼓勵優(yōu)秀的學(xué)生設(shè)計有主題的個性化個人主頁,引導(dǎo)學(xué)生在網(wǎng)上搜索自己需要的文字、圖片、聲音、視頻和動畫等素材,進一步充實自己的主頁。但是,由于一些學(xué)生的技術(shù)不熟練,出現(xiàn)頁面丟失或不夠美觀的現(xiàn)象,可同學(xué)們不灰心,一遍不行就兩遍,幾次的反復(fù),終于精美的頁面出現(xiàn)了。“不經(jīng)一翻徹骨寒,怎得梅花撲鼻香。”我對同學(xué)們語重心長地說:“不經(jīng)一段辛苦日,怎有網(wǎng)頁人人夸”。“你們要有足夠的耐心、細心和決心中,有了這種良好的學(xué)習(xí)態(tài)度我堅信你們是最棒的!你們就是未來的設(shè)計師、工程師、科學(xué)家……”我在課堂上抓住有利時機不時地對學(xué)生進行鼓勵教育。遺憾的是,還是有個別同學(xué)沒有很好地掌握住本節(jié)課的學(xué)習(xí)內(nèi)容,只有在以后找機會對他們進行個別輔導(dǎo)
聯(lián)系客服