扫一扫,加我们为好友有惊喜哦~
-->

核心课程
开班动态
专题服务

您当前所在位置:首页 > 中心动态 >>
javascript学习笔记:js的验证与正则表达式

javascript学习课程报名咨询:常州文化宫校区:0519-69886161、新北校区:0519-68877558!

1、window对象:
window.open()、close()、alert()、confirm()

window.open():打开新窗口
如:在body上添加onload="window.open('http://www.baidu.com')"
打开页面时,同时打开另一个页面!

例子:
     <input type="button" value="关闭窗口" onclick="window.close()">

window:窗口
document:文档

2、js跳转:location.href、location.replace
     <input type="button" value="跳转到百度" onclick="location.href='http://www.baidu.com'"/>
     <br />
     <input type="button" value="跳转到新浪" onclick="location.replace('http://www.sina.com.cn')"/>

location.href:可以保留历史页面,可以后退
location.replace():不能后退!

3、js时间判断
A、setTimeout():当计时时间到了之后做一件事情
    3秒后跳转到百度首页!
    <script type="text/javascript">
       setTimeout("location.href='http://www.baidu.com'",3000);
    </script>

B、setInterval():每隔一个时间周期,做一件事情
     clearInterval():停止某个id对应的计时器
思路:每隔1秒获取计时器中间的数字,并且+1

例子:简单计时器

 <style type="text/css">
     .content{
        width:300px;
        height:100px;
        font-size:60px;
        text-align:center;
        font-family:'微软雅黑';
        margin:0px auto;
        background-color:green;
        color:#FFF;
     }  
 </style>
 
 <script type="text/javascript">
    var id;
   
    //计时函数
    function gettime(b){
       if(b.value == "开始计时"){
          id = setInterval("getnum()",1000);
          b.value = "暂停计时";
       }else{
          clearInterval(id);
          b.value = "开始计时";
       }
    }
   
    //获取div中间的数字,加1,替换原来的数字
    function getnum(){
        var div = document.getElementById("content");//获取div
        var n = div.innerHTML;
        n++;
        div.innerHTML = n;     
    }
   
    //清零
    function restart(){
       document.getElementById("content").innerHTML = 0;
       var bt = document.getElementById("bt01");//开始/停止计时的按钮
       //如果计时器处于计时的状态,则需要停止计时
       if(bt.value == "暂停计时"){
          clearInterval(id);
          bt.value = "开始计时";
       }
      
    }
 </script>

     <div class="content" id="content">0</div>
     <p align="center">
     <input type="button" value="开始计时" onclick="gettime(this)" id="bt01"/>
     <input type="button" value="清零" onclick="restart()"/>
     </p>

4、js表单验证

 <style type="text/css">
   body{
       font-family:'微软雅黑';
    }
   
    h1{
      font-size:24px;
      text-align:center;
    }
   
    .error{
       color:#F00;
    }
   
    /* 不满足要求的输入框的样式 */
    .error_input{
        background-color:pink;
        border:1px solid #F00;
    }
 </style>
 <script type="text/javascript">
    //检验表达内容是否满足要求
    function check(){
       var r = true;
      
       //获取元素:document.表单名.控件名
       var u = document.regform.username;//用户名输入框
       var p = document.regform.password;//密码框
       var p2 = document.regform.password2;//密码框
      
       //如果用户名没有填写
       if(u.value == ""){
          r = false;
          document.getElementById("namemsg").innerHTML = "用户名不能为空";
          u.className = "error_input";//修改用户名输入框对应的class的值
       }else{
          document.getElementById("namemsg").innerHTML = "";
          u.className = "";
       }
      
       //如果密码不是6~12位
       if(p.value.length < 6 || p.value.length > 12){
          r = false;
          document.getElementById("passmsg").innerHTML = "请输入6~12位的密码";
          p.className = "error_input";
       }else{
          document.getElementById("passmsg").innerHTML = "";
          p.className = "";
       }
      
       //如果密码不一致
       if(p.value != p2.value){
          r = false;
          document.getElementById("passmsg2").innerHTML = "密码不一致";
          p2.className = "error_input";
       }else{
          document.getElementById("passmsg2").innerHTML = "";
          p2.className = "";
       }
      
       //获取需要检验的一组checkbox
       var colors = document.getElementsByName("colors");//获取checkbox的数组
       var c = 0;//标示选择了几项
       //循环数组,判断是否有至少一项的checked是为true的
       for(var i = 0;i < colors.length;i++){
          if(colors[i].checked == true){
              c++;
              break;
          }
       }
      
       //如果一项都没选中
       if(c == 0){
          r = false;
          document.getElementById("colorsmsg").innerHTML = "请选择您喜欢的颜色";
       }else{
          document.getElementById("colorsmsg").innerHTML = "";
       }
      
       return r;
    }
 </script>

     <h1>欢迎注册</h1>
     <form action="a.jsp" method="post" name="regform">
     <p>
                           用户名:<input type="text" name="username"/>
        <span id="namemsg" class="error"></span>
     </p>
    
     <p>
                           密码:<input type="password" name="password"/>
        <span id="passmsg" class="error"></span>
     </p>
    
     <p>
                           确认密码:<input type="password" name="password2"/>
        <span id="passmsg2" class="error"></span>
     </p>
    
     <p>
                          颜色:
         <input type="checkbox" name="colors" value="A"/>A、红色
         <input type="checkbox" name="colors" value="B"/>B、蓝色
         <input type="checkbox" name="colors" value="C"/>C、紫色
         <input type="checkbox" name="colors" value="D"/>D、绿色
        <span id="colorsmsg" class="error"></span>
     </p>
    
     <p>
        <input type="submit" value="提交" onclick="return check()"/>
        <input type="reset" value="重置"/>
     </p>
     </form>

5、正则表达式校验
 <style type="text/css">
   body{
       font-family:'微软雅黑';
    }
   
    h1{
      font-size:24px;
      text-align:center;
    }
   
    .error{
       color:#F00;
    }
   
    /* 不满足要求的输入框的样式 */
    .error_input{
        background-color:pink;
        border:1px solid #F00;
    }
 </style>
 <script type="text/javascript">
    //检验表达内容是否满足要求
    function check(){
       var r = true;
      
       //获取元素:document.表单名.控件名
       var u = document.regform.username;//必须是字母数字下划线,必填
       var a = document.regform.age;//必须是数字,但可以不填
       var f = document.regform.favor;//必填
      
       //必须是字母数字下划线
       var reg_name = /^[A-Za-z0-9_]+$/;//数字字母下划线
       var reg_age = /^[0-9]*$/;//数字出现0次或多次
       var reg_null = /^[ ]+$/;//空格出现1次或多次
      
       //判断用户名是否满足
       if(reg_name.test(u.value) == false){
           r = false;
           document.getElementById("namemsg").innerHTML = "用户名只能由字母、数字、下划线组成";
           u.className = "error_input";
       }else{
           document.getElementById("namemsg").innerHTML = "";
           u.className = "";
       }
      
       //判断年龄是否满足要求
       if(reg_age.test(a.value) == false){
           r = false;
           document.getElementById("agemsg").innerHTML = "请输入数字";
           a.className = "error_input";
       }else{
           document.getElementById("agemsg").innerHTML = "";
           a.className = "";
       }
      
       //判断爱好是否满足
       if(f.value == "" || reg_null.test(f.value)){
           r = false;
           document.getElementById("favormsg").innerHTML = "爱好不能为空";
           f.className = "error_input";
       }else{
           document.getElementById("favormsg").innerHTML = "";
           f.className = "";
       }
      
      
       return r;
    }
 </script>

     <h1>欢迎注册</h1>
     <form action="a.jsp" method="post" name="regform">
     <p>
                           用户名:<input type="text" name="username"/>
        <span id="namemsg" class="error"></span>
     </p>
    
     <p>
                         年龄:<input type="text" name="age"/>
        <span id="agemsg" class="error"></span>
     </p>
    
     <p>
                       爱好:<input type="text" name="favor"/>
        <span id="favormsg" class="error"></span>
     </p>
    
    
    
     <p>
        <input type="submit" value="提交" onclick="return check()"/>
        <input type="reset" value="重置"/>
     </p>
     </form>


精彩文章推荐
室内设计就业前景分析[2014-11-9]
【常州电脑培训】做好seo的九大要点[2014-4-4]
【常州网络营销培训】网络营销定位是灵魂[2014-4-2]
网页中的表格布局【常州电脑培训】[2013-6-18]
Android中的提示信息—常州电脑培训[2012-6-21]
Java素数判断——常州Java培训[2012-6-20]
【常州电脑培训】Java面向对象进阶[2012-6-7]
外贸市场的next主流-----整合营销[2012-4-17]


返回顶部