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