Html怎么使用JS

杞文明

在Html视频的学习过程中,由于黑马入学时间紧迫,没有涉及到JS这一块内容,想问一下,怎么使用JS?(就是在哪里输入代码),JS输入代码有C#有什么区别?如何用JS判断用户名,密码和验证邮箱?(有代码最好)

许大虾 · 许大虾

http://www.cnblogs.com/FollowIT/archive/2008/02/26/456339.html 认真看下 ~

许庭洲 · 许庭洲

本帖最后由许庭洲于 2013-5-24 07:02 编辑

1.HTML只是描述网页长相的标记语言，没有计算，判断能力；
2.如果所有计算，判断（比如判断文本框是否为空，判断两次密码是否输入一致）都放到服务器执行的话网页的话页面会非常慢，用起来也很难用，对服务器的压力也很大；
3.因此要求在浏览器中执行一些简单的运算，判断；
4. JavaScript就是一种在浏览器端执行的语言。

举个例子如下：
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
<html>

   <head>

      <title>Test_Login</title>

<style type="text/css">

#tb{

      border-bottom:1px solid #ADADAD;

      border-right: 1px solid  #ADADAD;

      background: #F0F0F0;

      font:normal 12px/22px "宋体";

}

#tb td,th

{

      border-top: 1px solid  #ADADAD;

      border-left: 1px solid  #ADADAD;

}

.centerz{text-align:center;}

.left{text-align:right;}

</style>

<script type="text/javascript">

         function IsDigit(cCheck)

      {

         return(('0'<=cCheck)&&(cCheck<='9'));

      }

      function IsAlpha(cCheck)

      {

         return((('a'<=cCheck)&&(cCheck<='z'))||(('A'<=cCheck)&&(cCheck<='Z')));

      }

      function checkUser()

      {

         var name=document.getElementById('name').value;//获取form表单里用户填入的登录名

         var namemsg=document.getElementById('namemsg');

            if(name=='')

            {

                  namemsg.innerHTML="(登录名不得为空！)";

            }

            for(nIndex=0;nIndex<name.length;nIndex++)

            {

                  cCheck=name.charAt(nIndex);

                  if(IsDigit(cCheck))

                  {

                     namemsg.innerHTML="(登录名不能以数字开头！)";

                  }

                  if(!(IsDigit(cCheck)||IsAlpha(cCheck)||cCheck=='_'))

                  {

                     namemsg.innerHTML="(登录名必须是字母数字或下划线！)";



                  }

               }

      }

      function  checkPwdSame()

      {

            var value1=document.getElementById("pwd").value;

            var value2=document.getElementById("repwd").value;

            if(value1!=value2)

            {

                  pwdsamemsg.innerHTML="(两次输入的密码必须必须相同！)";

            }

            else  pwdsamemsg.innerHTML=' ';

      }

      function checkPwd()

      {

            var pwd=document.getElementById('pwd').value;//获取form表单里用户填入的密码

            var pwdmsg=document.getElementById('pwdmsg');

            if(pwd=='')

            {

               pwdmsg.innerHTML="(密码不得为空！)";

            }

            else

            {

               if(pwd.length<6)

                  {

                     pwdmsg.innerHTML="(密码必须大于5位！)";

                  }



                  else

                  {

                           pwdmsg.innerHTML='';

                  }

            }

      }

      function checkemail()

      {

      var str=document.getElementById('email').value;

      var reg =/^[0-9a-zA-Z_]{1,12}@(163|126|qq|yahoo|gmail|sina)\.(com|com\.cn|cn|la)$/;

      if(str.search(reg) <0)

      {

            document.getElementById('emailmsg').innerHTML= "(输入电子邮箱错误！)";

         }

      else

      {

            document.getElementById('emailmsg').innerHTML= "(电子邮箱正确！)";

         }

      }

      function  checkEmailSame()

      {

            var value3=document.getElementById('email').value;

            var value4=document.getElementById('reemail').value;

            if(value3!=value4)

            {

                  emailsamemsg.innerHTML="(两次输入的电子邮箱必须必须相同！)";

            }

            else emailsamemsg.innerHTML=' ';

      }

</script>

</head>

<body>

<formaction="" method="post">

<table cellspacing=0 cellpadding=5 id="tb">

<tr >

<td  colspan="2"style="font-weight:bold;background: #97CBFF">必填信息</td>

</tr>

<tr >

<tdclass="left">登录名

</td>

<td><input name="name" id="name" type="text"onBlur="checkUser()"/><spanid="namemsg"></span>

</td>

</tr>

<tr >

<tdclass="left">密码</td>

<td><input name="pwd" id="pwd" type="password"onBlur="checkPwd()" style="width:110px";/><spanid="pwdmsg"></span>

</td>

</tr>

<tr >

<td class="left">确认密码</td>

<td><input type="password" id="repwd" name="repwd"style="width:110px";/><spanid="pwdsamemsg"></span>

</td>

</tr>

<tr >

<tdclass="left">邮件地址</td>

<td><input type="text" id="email" name="email"style="width:300px";/><spanid="emailmsg"></span>

</td>

</tr>

<tr >

<tdclass="left">确认邮件地址</td>

<td><input type="text" id="reemail" name="reemail"style="width:300px";/><spanid="emailsamemsg"></span>

</td>

</tr>

<tr >

<tdcolspan="2" class="centerz">

<input type="submit" style="width:90px";value="提交"/>    <input type="reset"style="width:70px" value="重填"/>

</td>

</tr>

</table>

</form>

</body>

</html>

帐号		自动登录	找回密码
密码			加入黑马

Html怎么使用JS

评分

2 个回复

黑马骑士勋章