javascript表单验证大全,

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. 只能是数字
<script language=javascript>
function onlyNum()
{
if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
//考虑小键盘上的数字键
event.returnvalue=false;
}
</script>

<input onkeydown="onlyNum();">

5. 只能是英文字符和数字
<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. 屏蔽关键字(这里屏蔽***和****)
<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   表单项只能为数字和"_",用于电话/银行账号验证上,可扩展到域名注册等

<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   表单项输入数值/长度限定

<script   language="javascript">
<!--
function   CheckForm()  
{  
if   (document.form.count.value   >   100   ||   document.form.count.value   <   1)
{  
alert("输入数值不能小于零大于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   中文/英文/数字/邮件地址合法性判断

<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)   //数值检测
{  
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)//   字符串包含测试函数
{  
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. 检查一段字符串是否全由数字组成       
---------------------------------------       
<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. 邮箱格式验证    
---------------------------------------      
//函数名：chkemail     
//功能介绍：检查是否为Email Address     
//参数说明：要检查的字符串     
//返回值：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. 数字格式验证    
---------------------------------------      
//函数名：fucCheckNUM     
//功能介绍：检查是否为数字     
//参数说明：要检查的数字     
//返回值：1为是数字，0为不是数字     
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)     
{     
//说明有字符不是数字     
return 0;     
}     
}     
//说明是数字     
return 1;     
}     
    
6. 电话号码格式验证    
---------------------------------------      
//函数名：fucCheckTEL     
//功能介绍：检查是否为电话号码     
//参数说明：要检查的字符串     
//返回值：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. 判断输入是否为中文的函数   
---------------------------------------      
function ischinese(s){   
var ret=true;   
for(var i=0;i<s.length;i++)   
ret=ret && (s.charCodeAt(i)>=10000);   
return ret;   
}    
   
8. 综合的判断用户输入的合法性的函数  
---------------------------------------      
<script language="javascript">  
//限制输入字符的位数开始  
//m是用户输入，n是要限制的位数  
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. 判断用户名是否为数字字母下滑线
---------------------------------------      
function notchinese(str){
var reg=/[^A-Za-z0-9_]/g
     if (reg.test(str)){
     return (false);
     }else{
return(true);     }
}

11. form文本域的通用校验函数
---------------------------------------      
作用：检测所有必须非空的input文本，比如姓名，账号，邮件地址等等。
该校验现在只针对文本域，如果要针对form里面的其他域对象，可以改变判断条件。

使用方法：在要检测的文本域中加入title文字。文字是在提示信息，你要提示给用户的该字段的中文名。比如要检测用户名
html如下<input name="txt_1" title="姓名">,当然，最好用可视化工具比如dreamweaver什么的来编辑域。
如果要检测数字类型数据的话，再把域的id统一为sz.
javascript判断日期类型比较麻烦，所以就没有做日期类型校验的程序了.高手可以补充。

程序比较草，只是提供一个思路。抛砖引玉！ ：）
哦，对了，函数调用方法：< form   onsubmit="return dovalidate()">

function dovalidate()
{
fm=document.forms[0] //只检测一个form,如果是多个可以改变判断条件
     for(i=0;i<fm.length;i++)
     {  
     //检测判断条件，根据类型不同可以修改
     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")//数字校验
          {
                  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 表单项只能为数字和"_",用于电话/银行账号验证上,可扩展到域名注册等

<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 表单项输入数值/长度限定

<script language="javascript">
<!--
function CheckForm()
{
if (document.form.count.value > 100 || document.form.count.value < 1)
{
alert("输入数值不能小于零大于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 中文/英文/数字/邮件地址合法性判断

<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) //数值检测
{
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)// 字符串包含测试函数
{
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    发表于2009年

做了一个javascript表单验证，个人觉得还可以。基本效果是获得焦点显示提示信息，失去焦点进行验证。

1、用户名验证：匹配规则为4到16个字符（包括字母和数字）。代码如下：

function isNumberOrLetter(s)//判断是否是数字或字母,用于验证用户名，失去焦点验证。
            {
           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、密码验证：规则为6到16个字符、下划线，第一个字符为字母。

  

   function validatorPassword(s)//验证规则为6到16数字、字母、下划线组成，首字母为字母，用于验证密码。
               {
                 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个数字、下划线和英文字符,第一个必须为字母,不区分字母大小写");
               }

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)//注册信息规则提示信息（获得焦点验证）
           {
             if(s=="user")
             document.getElementById ("userIDCheck").innerHTML="(用户名由4-16个数字或字母组成)";
             if(s=="password")
             document.getElementById ("passwordCheck").innerHTML="(密码由6-16个数字、字母、下划线组成，首字母必须是字母,不区分大小写)";
             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博客，转载请标明出处：http://blog.csdn.net/diershi/archive/2009/04/16/4084981.aspx

JS表单验证

<script language="JavaScript">
/*
*--------------- 客户端表单通用验证CheckForm(oForm) -----------------
* 功能:通用验证所有的表单元素.
* 使用:
*    <form name="form1" onsubmit="return CheckForm(this)">
*    <input type="text" name="id" check="^\S+$" warning="id不能为空,且不能含有空格"/>
*    <input type="submit"/>
*    </form>
* author:wanghr100(灰豆宝宝.net)
* email:[e-mail]
* update:19:28 2004-8-23
* 注意:写正则表达式时一定要小心.不要让"有心人"有空子钻.
* 已实现功能:
* 对text,password,hidden,file,textarea,select,radio,checkbox进行合法性验证
* 待实现功能:把正则表式写成个库.
*--------------- 客户端表单通用验证CheckForm(oForm) -----------------
*/
////////////////////////////////////////////////////////////////////////////////

//主函数
function CheckForm(oForm)
{
    var els = oForm.elements;
    //遍历所有表元素
    for(var i=0;i<els .length;i++)
    {
        //是否需要验证
        if(els.check)
        {
            //取得验证的正则字符串
            var sReg = els.check;
            //取得表单的值,用通用取值函数
            var sVal = GetValue(els);
            //字符串->正则表达式,不区分大小写
            var reg = new RegExp(sReg,"i");
            if(!reg.test(sVal))
            {
                //验证不通过,弹出提示warning
                alert(els.warning);
                //该表单元素取得焦点,用通用返回函数
                GoBack(els)  
                return false;
            }
        }
    }
}

//通用取值函数分三类进行取值
//文本输入框,直接取值el.value
//单多选,遍历所有选项取得被选中的个数返回结果"00"表示选中两个
//单多下拉菜单,遍历所有选项取得被选中的个数返回结果"0"表示选中一个
function GetValue(el)
{
    //取得表单元素的类型
    var sType = el.type;
    switch(sType)
    {
        case "text":
        case "hidden":
        case "password":
        case "file":
        case "textarea": return el.value;
        case "checkbox":
        case "radio": return GetValueChoose(el);
        case "select-one":
        case "select-multiple": return GetValueSel(el);
    }
    //取得radio,checkbox的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
    function GetValueChoose(el)
    {
        var sValue = "";
        //取得第一个元素的name,搜索这个元素组
        var tmpels = document.getElementsByName(el.name);
        for(var i=0;i<tmpels .length;i++)
        {
            if(tmpels.checked)
            {
                sValue += "0";
            }
        }
        return sValue;
    }
    //取得select的选中数,用"0"来表示选中的个数,我们写正则的时候就可以通过0{1,}来表示选中个数
    function GetValueSel(el)
    {
        var sValue = "";
        for(var i=0;i<el.options.length;i++)
        {
            //单选下拉框提示选项设置为value=""
            if(el.options.selected && el.options.value!="")
            {
                sValue += "0";
            }
        }
        return sValue;
    }
}

//通用返回函数,验证没通过返回的效果.分三类进行取值
//文本输入框,光标定位在文本输入框的末尾
//单多选,第一选项取得焦点
//单多下拉菜单,取得焦点
function GoBack(el)
{
    //取得表单元素的类型
    var sType = el.type;
    switch(sType)
    {
        case "text":
        case "hidden":
        case "password":
        case "file":
        case "textarea": el.focus();var rng = el.createTextRange(); rng.collapse(false); rng.select();
        case "checkbox":
        case "radio": var els = document.getElementsByName(el.name);els[0].focus();
        case "select-one":
        case "select-multiple":el.focus();
    }
}
</script>
通用表单函数测试:
<form name="form1" onsubmit="return CheckForm(this)">
test:<input type="text" name="test"/>不验证<br />
账号:<input type="text" check="^\S+$" warning="账号不能为空,且不能含有空格" name="id"/>不能为空<br />
密码:<input type="password" check="\S{6,}" warning="密码六位以上" name="id"/>六位以上<br />
电话:<input type="text" check="^\d+$" warning="电话号码含有非法字符" name="number" value=""/><br />
相片上传:<input type="file" check="(.*)(\.jpg|\.bmp)$" warning="相片应该为JPG,BMP格式的" name="pic" value="1"/><br />
出生日期:<input type="text" check="^\d{4}\-\d{1,2}-\d{1,2}$" warning="日期格式2004-08-10"  name="dt" value=""/>日期格式2004-08-10<br />
省份:
<select name="sel" check="^0$" warning="请选择所在省份">
<option value="">请选择
</option><option value="1">福建省
</option><option value="2">湖北省
</option></select>
<br />
选择你喜欢的运动:<br />
游泳<input type="checkbox" name="c" check="^0{2,}$" warning="请选择2项或以上"/>
篮球<input type="checkbox" name="c"/>
足球<input type="checkbox" name="c"/>
排球<input type="checkbox" name="c"/>
<br />
你的学历:
大学<input type="radio" name="r" check="^0$" warning="请选择一项学历"/>
中学<input type="radio" name="r"/>
小学<input type="radio" name="r"/>
<br />
个人介绍:
<textarea name="txts" check="^[\s|\S]{20,}$" warning="个人介绍不能为空,且不少于20字"></textarea>20个字以上
<input type="submit"/>
</form>

---------------------------------------------

Javascript表单编程

    对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();  //设置焦点到第二个字段
        获得焦点：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);  //移除一个选项
      移动选项
      重新排序选项
    对复选框和单选框进行脚本编写
      得到单选框的值
        <input type="radio" id="male" name="gender" value="male">男</input>
        document.getElementById("male").value
      得到复选框的值
    表单验证
      使用submit事件在错误发生之后捕获错误
      使用change事件在错误发生时捕获
      使用keypress事件在错误发生之前捕获错误
      表单效验最佳实践
        必须对用户有帮助
        不要让人讨厌
        只要有可能，就用HTML功能代替javascript
        一次显示所有错误
        早点捕获错误
        如果拿不准，就不要太严格
------------------------------------------------代码实例：
 <script type="text/javascript">
 
  //function validate(){
 
  // var user = document.getElementById("user");
  // user.disabled="true";   //表示不可用
  // user.focus();  //得到焦点
  //      onfocus="validate();"  //当某个文本框得到焦点时触发
  //     onblur="validate()"    //当某个文本框失去焦点时触发
 
 
 
  ///}
 
 //获取表单的四种方式
  //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();  //选中文本框的内容
   //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)
  //  }
  // }
  //}
 
 //获取复选框的值
  /** 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对象在检验表单中的作用
在制作登录表单验证的过程中，我们经常要用到Document函数对象，这是JavaScript非常重要的函数。W3C把它纳入DOM文档模型对象中。可以说它是元素操作的一个十分重要的方法。
此函数的语法代码如下：
Document.ement.chosts.x   //x可表示为属性也可表示为方法。
如要表示表单reg中名字输入框name的文本内容：document.reg.name.value
要让输入框获得焦点：代码格式为document.reg.name.focus()
下面是一段典型的验证输入函数代码：
<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>
此段自定义函数的意思是验证输入框是不是空白，若不是空白则打开一个名为“chk”带有传递参数的窗口进一步验证用户名是不是合法。
 Document对象在检验表单中的作用

转载自 风之恋    转载于2009
asp链接sqlserver
 
在ASP中数据库链接2中方法

1、直接用字符串链接，代码如下：
<%
'连接数据库
Dim conn
Set conn = Server.CreateObject("ADODB.Connection")
conn.Open "driver={SQL Server};server=主机ip地址; uid=用户名;pwd=密码;database=数据库名"
%>

2、利用DSN（数据源）链接，这种方法你要先创建一个DSN，创建方法点击服务器/控制面板/管理工具/数据源 (ODBC)图标，打开数据源管理器，在系统DSN选项卡中创建一个SQL Server的数据源。链接代码如下：
<%
'连接数据库
Dim conn
Set conn=server.createobject("adodb.connection")
conn.Open "DSN=article;uid=用户名;pwd=密码;"
%>

然而在DW MX中系统采用的二种方法，具体步骤如下:
1、在Files面板中定义一个站点
2、点击Application面板中Database选项卡中的加号按钮，选择Custom Connecting String(自定义链接字符串，就是采用的一种方法链接)或者Data Source Name(DSN,就是的二种方法链接)，打开浮动面板，填入参数即可。

我觉得不管用DW MX 写的程序怎么样，对于数据库的连接文件（常用的是conn.asp)，我有两个建议，一是在网上最好使用手写的连接文件（下面详细讲如何写），二是引用数据库时要在文件开头使用<!--#include file="Connections/conn.asp" -->，调用数据库，这样数据库的名字或位置的改变就比较容易了。
其次，解释一下如何写一个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
%>
关于 server.mappath("data/database.mdb")解释一下。本例使用的是相对路径，意思是conn.asp与data目录在同一个目录下。如果conn.asp所在目录与data目录在同一个目录下，则为server.mappath("../data/database.mdb") 。
也可以使用绝对路径 server.mappath("/data/database.mdb")， 意思是data为根目录，与conn.asp在那里没有关系
具体的详细的例子可以看icefire 的例http://www./forum/data/2002/9/29/1111314071.htm

最后是关于使用sql数据库的问题，不同的主页服务商是不同的。下面是CHINADNS新网的解决方法，供大家参考。

1.安装一个SQLSERVER的客户端软件
2.点击在本机任务栏中开始－〉MicrosoftSqlServer2000－〉EnterpriseManager
3.在打开SQLSERVER客户端软件后，在文件栏中点击Action中的NewSqlServer
Registration，然后填写您的sqlserver的IP地址，用户名和密码（与FTP的用户名密码相同）在点击完成后，将会出现211.154.211.xx――RegisteredSuccessfully，这说明您的数据库已经开通。
4.在ConsoleRoot中选择您数据库的IP，点击鼠标右建选择Connect，正常网速下应出现一个连接成功的图标。
5.连接成功后，选择211.154.211.xx－〉Database－〉www_domainname_com,打开您的数据库
6.打开Tables,，将显示出所有类型为System的列表，您可以用鼠标右建中NewTable建表，或用OpenTable查看表内容。您也可以用选用步骤２中的import或output进行倒入，倒出表操作相关的操作请您查看相关网页和书籍。

附：
ASP连接数据库相关源代码参考
1.ASP连接Access数据库语句

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")为建立一个访问数据的对象server.mappath(aaa/bbspp1.mdb)是告诉服务器access数据库访问的路径

2.ASP连接Sqlserver数据库语句

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")为设置一个数据库的连接对象
driver=（）告诉连接的设备名是SQL-SERVER
server是连接的服务器的ip地址，Uid是指用户的用户名，pwd是指的用户的password，
database是用户数据库在服务器端的数据库的名称
HTML标签
Meta 标签之http-equiv属性详解2009年09月11日 星期五 17:43http-equiv，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容。
Meta标签的http-equiv属性语法格式：＜meta http-equiv="参数" content="参数变量值"＞

常用的HTTP-EQUIV类型有：

1. Content-Language
说明：设定页面使用的字符集
用法：<Meta http-equiv="Content-Language" Content="zh-CN">
注意：该META标签定义了HTML页面所使用的字符集为GB2132，就是国标汉字码。如果将其中的“charset=GB2312”替换成“BIG5”，则该页面所用的字符集就是繁体中文Big5码。当你浏览一些国外的站点时，IE浏览器会提示你要正确显示该页面需要下载xx语支持。这个功能就是通过读取HTML页面META标签的Content-Type属性而得知需要使用哪种字符集显示该页面的。如果系统里没有装相应的字符集，则IE就提示下载。其他的语言也对应不同的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个参数都可以帮助搜索引擎判断网页所使用的语言。

<!-- 搜索引擎怎样判断网页所使用的语言？

人们喜欢以他们所知道的语言列出的搜索结果，这对搜索营销人员是十分重要的。当一个搜索者输入上面图中的搜索请求时，只有用中文写的网页将被显示在搜索结果里面。

在有些国家，例如日本和中国，大部分搜索者想要结果限制在母语上。但是在其他地方例如瑞典，搜索可以采用瑞典语和英语来进行。不同国家的搜索者有不同的语言偏好。

对搜索营销人员而言，重要的是搜索引擎知道网页所使用的语言，如果网页没能被正确地识别，可能就会从本应发现它的搜索者面前消失，从而降低你的引荐访问。

那么搜索引擎是怎样判断网页所使用的语言呢？这里有很多不同的方法：

1. 语言meta标签。

很多网页通过一个HTML标签来表明网页使用的语言，例如<META http-equiv=”content-language” content="ja"> 表示使用的是日语，看起来简单，搜索蜘蛛程序读取标签，于是搜索引擎知道是什么语言了。但是相对多的语言meta标签是完全错误的，没有标签，句法错误，以及语言编码错误等等。搜索引擎确实查看这些标签，但是它们很少只从这些标签来判定网页的语言。

2. 字符编码

计算机文件（包括HTML网页）需要“对译本（Key）”正确翻译文件中的字符（字母，数字等等）。这种对译本被称为字符编码。由网页中meta标签里声明，例如<META http-equiv=content-type content="text/html; charset=GBK">。

网站浏览器和搜索蜘蛛程序假定网页按照西方语言编码，因此使用这些语言写的网页不需要这个标签。为了浏览器显示正确，亚洲、阿拉伯和古代斯拉夫语的文本确实需要这个标签。因此，当搜索引擎看到针对这些语言的表情，它对正确显示网页的语言有了很高的保证。

3. 内容分析

搜索引擎通过研究内容中的字符模式来最终判定网页的语言，哪怕是短到只有两句话的网页，内容分析的精确度也非常高。Meta标签只有在内容分析后还不确定的情况下才被使用。

多数情况下，搜索引擎会自行正确地判断网页的内容，对于只有很少几个词的网页，要保证网页被正确识别，正确的编码语言和meta语言标签很重要。-->

3. Refresh (刷新)
　说明：让网页多长时间（秒）刷新自己，或在多长时间后让网页自动链接到其它网页。
　用法：<Meta http-equiv="Refresh" Content="5; Url=http://www.">
　注意：其中的5是指停留5秒钟后自动刷新到URL网址。

<!-- 网络上常用的重定向方式有四种：Javascript 重定向，Meta refresh 重定向，301重定向，302重定向

重定向（redirect）——一个对浏览器的指导，让其显示不同的URL而不是当初浏览器所请求的。重定向允许旧的URL被重新指向到目前的URL上，因此当访客使用旧的URL时，不会得到一个“网页没有被找到”的消息（就是通常大家知道的HTTP404错误）。

1. Meta 更新重定向（Meta Refresh redirects）

HTML在<head>部分的meta标签页可以重新链接一个网页——通常被称为“meta”更新重定向例如：

<meta http-equiv="refresh" content="10; url=http://www.">

其中的“10”是告诉浏览器在页面加载10秒钟后自动跳转到。

这种方法常在论坛中见到。如果在论坛上发表帖子，先会看到一个确认页面，几秒后会自动重新跳转回当前的论坛页面中。

从搜索引擎优化的角度出发，一般不希望自动转向有延迟。不过，如果是用Meta Refresh标识进行转向，一定要注意把延迟时间设定成至少10秒以上。对于这种自动转向法，搜索引擎能够自动检测出来。因而无论网站的转向出于什么目的，都很容易被搜索引擎视为对读者的误导而受到惩罚。不过，如果跳转延迟时间设置合适，搜索引擎就不会视之为作弊。

meta 标签之NAME属性 详解>>

4. Expires (期限)
说明：指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新调阅。
用法：<Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT">
注意：必须使用GMT的时间格式，或直接设为0(数字表示多少时间后过期)。

5. Pragma (cach模式)
说明：禁止浏览器从本地机的缓存中调阅页面内容。
用法：<Meta http-equiv="Pragma" Content="No-cach">
注意：网页不保存在缓存中，每次访问都刷新页面。这样设定，访问者将无法脱机浏览。

6. Set-Cookie (cookie设定)
说明：浏览器访问某个页面时会将它存在缓存中，下次再次访问时就可从缓存中读取，以提高速度。当你希望访问者每次都刷新你广告的图标，或每次都刷新你的计数器，就要禁用缓存了。通常HTML文件没有必要禁用缓存，对于ASP等页面，就可以使用禁用缓存，因为每次看到的页面都是在服务器动态生成的，缓存就失去意义。如果网页过期，那么存盘的cookie将被删除。
用法：<Meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,21-Oct-98 16:14:21 GMT; path=/">
注意：必须使用GMT的时间格式。

7. Window-target (显示窗口的设定)

说明：强制页面在当前窗口以独立页面显示。
用法：<Meta http-equiv="Widow-target" Content="_top">
注意：这个属性是用来防止别人在框架里调用你的页面。
Content选项：_blank、_top、_self、_parent。

8.Pics-label (网页RSAC等级评定)

说明：在IE的Internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级

别就是通过该参数来设置的。

用法：<META http-equiv=”Pics-label” Contect=

“(PICS－1.1′http://www./ratingsv01.html’

I gen comment ‘RSACi North America Sever’ by ‘[e-mail]’

for ‘http://www.microsoft.com’ on ‘1997.06.30T14:21－0500′ r(n0 s0 v0 l0))”>

注意：不要将级别设置的太高。RSAC的评估系统提供了一种用来评价Web站点内容的标准。用户可以设置Microsoft Internet Explorer（IE3.0以上）来排除包含有色情和暴力内容的站点。上面这个例子中的HTML取自Microsoft的主页。代码中的（n 0 s 0 v 0 l 0）表示该站点不包含不健康内容。级别的评定是由RSAC，即美国娱乐委员会的评级机构评定的，如果你想进一步了解RSAC评估系统的等级内容，或者你需要评价自己的网站，可以访问RSAC的站点：http://www./。

9.Page-Enter、Page-Exit (进入与退出)

说明：这个是页面被载入和调出时的一些特效。

用法：<Meta http-equiv=”Page-Enter” Content=”blendTrans(Duration=0.5)”>

<Meta http-equiv=”Page-Exit” Content=”blendTrans(Duration=0.5)”>

注意：blendTrans是动态滤镜的一种，产生渐隐效果。另一种动态滤镜RevealTrans也可以用于页面进入与退出效果:

<Meta http-equiv=”Page-Enter” Content=”revealTrans(duration=x, transition=y)”>

<Meta http-equiv=”Page-Exit” Content=”revealTrans(duration=x, transition=y)”>

Duration表示滤镜特效的持续时间(单位：秒)

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中关闭 xp 的主题

用法：<Meta http-equiv=”MSThemeCompatible” Content=”Yes”>

注意：关闭 xp 的蓝色立体按钮系统显示样式，从而和win2k 很象。

11.IE6 (页面生成器)

说明：页面生成器generator，是ie6

用法：<Meta http-equiv=”IE6″ Content=”Generator”>

注意：用什么东西做的，类似商品出厂厂商。

12.Content-Script-Type (脚本相关)

说明：这是近来W3C的规范，指明页面中脚本的类型。

用法：<Meta http-equiv=”Content-Script-Type” Content=”text/javascript”>
美化主页
1）学会打开站点，是每位学生都必须要掌握的。在初步掌握了在网页中添加和编辑文字和图片之后，还要掌握另外四种编辑网页的方法：即“给网页添加横幅文本”、“编辑导航栏”、“在网页中插入水平线”和“在网页中插入滚动字幕”。可以用欣赏比较的方法导入新课，让学生观察发现，明确学习目的的同时，激发学习积极性。
(2)鼓励学生大胆探究，利用知识的迁移打开站点。
(3)由于保存文字网页和保存有图片的网页是不一样的，这里教师要提醒学生特别注意，也可适当的让学生比较一下两者的不同，再亲自实践，加深感受。
(4)由于给网页加图片，是学生爱学的内容，也是他们爱做的事，故要以此为突破口，激发学生学习兴趣，为深入学习奠定基础。
(5)教师应及时提醒学生添加图片需注意的问题（图片的格式、大小、效果等），给予正确的操作导向。
(6)其实，插入“水平线”的位置，也是很有讲究的，教学时可以演示几个不同的位置，让学生比较一下插在哪里最美观。本部分内容较简单易学，可以放手让学生自主学习。
(7) 为何刚才输入的字幕并不滚动呢？可以让学生讨论一下。之后，教师讲解，这是由于，我们是在“编辑”状态下制作网页的，要看实际效果，应该在“预览”状态下观看，单击“显示编辑状态”处的“预览”按钮，字幕才能动感十足的滚动起来。让学生输入自己想输入的文字，实际操作一下。
三、 教学活动过程：
教学
内容 教学
环节 活动时间（分钟） 教学活动 活动目的
教师活动 学生活动
一、引 入 引 入 5 同学们,主页是客人到访我们网站的第一,是让到访者了解站点的大门,是展示自我的第一舞台。同学们，你想怎样设计自己的第一舞台呢？请构思一下，然后大家交流交流。 学生先用两分钟时间参考书上的范例并构思自己的主页，然后用两分钟时间交流。 使学生对自己的主页设计有一个总体构想。
二、打开
主页 打开
主页 5 同学们，我们要编辑、美化主页就必须先把它打开，谁能又快又准地把主页打开？谁先做到，老师就请他上台来示范给同学们看，让他做我们的小老师。（教师在学生操作时巡视指导。） 学生先试着把主页打开，教师请个别学生上讲台边示范操作边讲解。未能打开主页的同学在看了示范操作后继续尝试打开主页，组长巡视指导。 通过操作让学生明确打开主页不编辑、美化主页的基础。
三、编辑、美化
主页 1、修改网页横幅文本 5 同学们，你想不想自己的主页有一个醒目的名字呢？赶快给自己的主页起一个醒目的名字吧！请阅读书上的操作步骤来完成，我相信你们都是很棒的！（在学生操作时教师巡视指导。） 学生先阅读书上的操作步骤，然后尝试给自己的主页取一个有特色的名字。做的时候小组成员互相帮助。 通过操作让学生知道怎样修改网页横幅，为自己的主页取一个有个性的名字。
2、编辑网站导航栏 5 同学们，我们做的网站除了内容精彩、设计漂亮外，还要有良好的交互性，以方便浏览的人在各个页面之间跳转穿梭。这就需要一个导航栏来支持。我们可以根据自己的需要来编辑网页的导航栏。（教师边示范边讲解。在学生操作时还要对学生进行个别辅导。） 先看教师操作，听讲解，然后动手编辑导航栏。还可以根据自己主页的设计需要，在合适的地方添加导航栏。在操作过程中，同组同学可以互相讨论，交流合作。 通过操作活动让学生掌握编辑导航栏的方法，并且可以按需要计主页的导航栏的位置或内容。
3、插入滚动字幕 5 同学们，如果我们在主页中插入滚动字幕，可以使主页看起来更有动感，使人觉得生动有趣。我们还可以利用“滚动字幕”来广播一些重要信息。大家可以先阅读一下书上的方法，然后尝试在自己的主页里找个合适的地方插入滚动字幕。不明白的话可以边讨论边操作，也可以举手让老师帮助你。（在学生操作时教师相机对个别学生进行辅导。） 学生先阅读书上的方法，然后在主页里尝试插入滚动字幕，在操作过程中注意组内同学互相合作交流。 通过操作使学生掌握插入滚动字幕的方法，并能将其恰当地运用到自己的主页里。
4、添加图片和文字 5 同学们，我们的主页应该有些文字来简单介绍自己，还可以有一些图片或相片，你们知道怎样添加上去吗？大家可以试一试。（在学生操作时教师对个别学生进行辅导。） 学生先学习“小锦囊”的方法，然后自己尝试在主页上插入文字和图片。 通过学习活动使学生掌握了在网页中插入文字和图片的方法。
5、插入“水平线” 5 同学们，当我们的主页放进太多的文字和图片时，会显得凌乱。这时我们可以给网页插入“水平线”，使主页看起来清晰有序。书上教了我们怎插入“水平线”，还告诉我们怎样修改、调整“水平线”。大家好好阅读，然后给我们的主页插入各种漂亮的“水平线”。（在学生进行操作时教师巡视并指导需要帮助的学生。） 学生先阅读书上的内容，然后上机操作，根据自己的需要，在恰当的地方插入“水平线”，合理布局主页。 通过操作学生掌握插入“水平线”的方法，并能合理使用它，使自己的主页看起来美观大方，整齐有序。
四、小论坛 小论坛 2 同学们，你可以从“小论坛”里小华的身上得到什么启示？大家讨论讨论。 同学们结合自己的实际展开讨论。 通过讨论使学生懂得要通过互评互学才能不断提高自己的网页制作水平，为我们的学习服务。

四、小论坛 小论坛 2 同学们，你可以从“小论坛”里小华的身上得到什么启示？大家讨论讨论。 同学们结合自己的实际展开讨论。 通过讨论使学生懂得要通过互评互学才能不断提高自己的网页制作水平，为我们的学习服务。
四、教学评价。
在教学中，为了激发学生的学习兴趣,使学生更好的掌握其中的操作技巧，提高技术水平，在学生的制作的整个过程中，我把评价机制就引入到了课堂。主要是以下几个方面。
（一）学生的自评与互评 。我请学生参照评价表作自我评价，再由本小组内其他同学打上分。再由别的小组同学组成评委进行评价打分。最后我和班级评委一块点评而不打分。
教学评价，必须以欣赏为基础，包括自我欣赏及相互欣赏。在整个作品的制作过程中,都得到了充分的体验。学生在自评与互评中，一直处在欣赏和被欣赏之中，他们学会欣赏他人,也相信了自己，养成了积极向上的品格。
（二）评价过程。
只有评价过程，学生技能和能力在作品的制作过程中可以清晰的体现出来。才能让教师真正了解学生，并针对学生中出现的各种问题进行指导，以利于学生更好的掌握知识和技能。在网页布局时，导航栏的使用，水平线的插入、滚动字幕的插入、添加图片和文字等等，都需要过程的评价。我在巡视过程中发现此类的问题，立即指出，学生马上就改正好。
要做到这一点，教师在教学时应做个有心人，等到学生的网页制作完成了以后，教师一般很难发现学生中还存在此类问题的。课堂上要及时的发现问题，及时给出反馈。
（三）评价结果
我们不但要注重评价过程，也要注重评价结果。我把学生把自己的网页挂到我们学校内网上，会让学生总觉得自己出了成绩，而这成绩就存在电脑里，非常有成就感，增加了下次学习的主动投入性。
信息技术学习效果是即时显现的，教师适时地让学生打开以前的网页比较一下自己的学习有没有进步，哪些地方进步了？会让他们有一种“学习会带来进步”的认知。学生就会进一步探究的一种延续性，从而达到在信息技术课学习中实现一种质的飞跃。
五、课后教学反思。
在教学活动中，我精心设计活动过程，详细演示每个操作环节，逐个指导操作中的问题，搜集整理各种可用课程资源。我和同学们一起体验着美化主页的快乐，因为有兴趣这个最好的老师，在不断的尝试和感悟中，聪明的他们学会了很多很多，如：插入图片文字、设置水平线、加入导航栏等等，每一次操作的成功都会给他们带来极大的惊喜。我还鼓励优秀的学生设计有主题的个性化个人主页，引导学生在网上搜索自己需要的文字、图片、声音、视频和动画等素材，进一步充实自己的主页。但是，由于一些学生的技术不熟练，出现页面丢失或不够美观的现象，可同学们不灰心，一遍不行就两遍，几次的反复，终于精美的页面出现了。“不经一翻彻骨寒，怎得梅花扑鼻香。”我对同学们语重心长地说：“不经一段辛苦日，怎有网页人人夸”。“你们要有足够的耐心、细心和决心中，有了这种良好的学习态度我坚信你们是最棒的！你们就是未来的设计师、工程师、科学家……”我在课堂上抓住有利时机不时地对学生进行鼓励教育。遗憾的是，还是有个别同学没有很好地掌握住本节课的学习内容，只有在以后找机会对他们进行个别辅导