zoukankan      html  css  js  c++  java
  • js函数、表单验证

    惊天bug!!!在script里面只要有一点点错误,就都不执行了!!!所以每写一个方法,就跑一下,因为这个书写疏忽导致的bug不可估量!!!

    【笑哭,所以我才这么讨厌js么,后来真心的是一点都不想再看见js这堆东西了。可能因为先接触的java吧。就觉得javascript万分不好。】

     

    举例:

    <script type="text/javascript">
        function check(){
            if(form.passwor1.value.length<6){
                alert("密码不符合规范");
                return false;
            }
            if(form.name.value==""){
                alert("用户名不能为空");    
                return false;
            }
        }
    </script>
    </head>
    <body>
    <form name="form"action="鼠标事件.html" onsubmit="return check()">
        用户名:<input type="text" name="name"/>
        密码:<input type="password" name="password1"/>
        确认密码:<input type="password" name="password2"/>
        <input type="submit" value="提交"/>
    </form>
    
    <script type="text/javascript">
        function check(){
            if(form.password1.value.length<6){
                alert("密码不符合规范");
                return false;
            }
            if(form.name.value==""){
                alert("用户名不能为空");    
                return false;
            }
        }
    </script>
    </head>
    <body>
    <form name="form"action="鼠标事件.html" onsubmit="return check()">
        用户名:<input type="text" name="name"/>
        密码:<input type="password" name="password1"/>
        确认密码:<input type="password" name="password2"/>
        <input type="submit" value="提交"/>
    </form>
    就差一个字母d,就可以让js作废!!!

    2015.11.30 js函数 +表单验证

    复习:

    1、js javascript 客户端脚本语言

    他是运行在客户端浏览器的,它不是独立运行的,需要嵌入到html页面中运行。

    有数据类型,但是在使用的时候不知名数据类型,因此属于弱数据类型。

    2、js嵌入到html的页面中:

    1)行级 2)业内 3)外部文件

    onclick:事件触发,对js函数的调用

    Script type text:javascript

    Script: src 引入另外一个js文件

    3、js数据类型:数字类型,字符、字符串类型,对象类型(js 是吧页面中所有的标签都看作是节点对象)

    4、变量:声明 变量 命名规范,js区分大小写,不能用数字开头

    Var i= 23//弱数据类型语言

    Var s = "";

    全局变量 局部变量 (js 只有方法体 才是局部参数也算是局部

    在方法体中,必须加var 如果不加,方法调用以后就会变成全局变量

    5、方法的定义和调用

    Function test(){}

    Function test(number1,nubmer2){}

    Var test3 = function(){return ;}

    方法的调用,可以在script标签体中直接调用,也可以是行级引入的方式,来通过事件条用自定义函数。

     

    6、alert() prompt() document write() paresInt() parseFloat()

    document.getElementById();//得到页面中某个标签对象, 如果这个标签是 input 那么当前对象.value 就会获得 输出框中的值。

    7docuemnt.f.username 通过表单的名称获得表单对象,通过输入框的名称得到输入框对象

    .value)

    8、document.getElementById(),获得一个标签对象,innerText innerHTML也可以赋值

    9、简单计算器:获得select 的对象,并且再获得 被选中的option value

    10、Js中的数组: array

    Var s = new Array();

    Var s2 = new Array(5);

    Var s3 = new Array(3,4,5,);

    Var s4 = new Array("nihao");

    对数组的操作,s[2]=34;s2[0];

     

    新的知识点:

    1、js中函数,eval isNaN

    2、Js中事件:鼠标;

    3、表单验证(正则表达式)

     

    作业:

     

    1、表单验证;

    2、把验证时候的警告框换成在对应输入框后面显示。

     

    eval 计算表达式的值,言外之意,只要是表达式,就可以进行计算。

    举例:

    var s = "1+2+3+4+5";

    alert(s);//结果:1+2+3+4+5

    s = eval(s);

    alert(s);//结果:15

    举例:

    var a = "1*2*3*4*5";

    eval("result="+a);

    alert("result");

    alert(result);

    这段代码还是要注意一下:

    第一个只输出result

    第二个输出:120.

    他把结果计算完毕后赋给result。所以eval里面是一个表达式。不仅完成了计算,并完成了赋值,再次说明eval进行的是一个表达式的运算。

     

    isNaN运算一个变量是否是不是一个数字。

    var a="34";是数字,

    isNaN(a)    ->false

    var b = "asdf"//不是数字

    isNaN(b)    ->true

     

    onload()body正在加载的时候会调用此函数,所以他放在body体上。

    onchange() 当前对象发生更改的时候调用此函数。

    onclick()鼠标点击事件。

    onfocus()获得焦点事件

    onblur()失去焦点事件

     

    经典片段:

    <script type="text/javascript">
        function test(obj){
                if(obj.value==""){
                    obj.value="请输入要查询的东西";    
                }else if(obj.value=="请输入要查询的东西"){
                    obj.value="";
                }
        }
    </script>
    </head>
    <body>
    <input type="text" value="请输入要查询的东西" onfocus="test(this)" onblur="test(this)"/>
    </body>

    然后注意一下关于正则表达式的使用。

    正则表达式在java语言里面和在js语言中是有区别的。

    JavaString 待测字符串 = "";

    String regex = "";

    待测字符串.matches(regex);

     

    javaScript

    var regex = ^    $;

    var 待测字符串="";

    regex.test(待测字符串);

     

    两者返回的结果是一致的。表单验证的部分可以看看作为示例代码。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
        function  checkUser(){
             var   email = document.getElementById("email").value;
             var myreg = /^([a-zA-Z0-9]+[_|\_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/;
             if(!myreg.test(email)){
                 alert("邮箱的格式不正确!");
                 return false;
             }
            
            
            var   boxs  = document.getElementsByName("box");
            var  number = 0;
            for(var i = 0;i<boxs.length;i++){
                   if(boxs[i].checked == true){
                      number++;   
                    }
            }
            if(number <3){
                alert("至少选择3个以上包含3!");
                return false;
            }
            
            //var   sexs = document.f.sex;
            var   sexs = document.getElementsByName("sex");
            if(sexs[0].checked == false && sexs[1].checked == false){
                  alert("请选择性别");
                  return false;
            }
            
            var   username = document.getElementById("username");
            if(username.value.length ==0){// username ==""  username == null
               alert("用户名不能空!");
               username.focus();// 自动让你的输入框获得焦点
               return false;
            }
            var  ps = document.getElementById("ps");
            if(ps.value.length<6 || ps.value.length > 12 ){
                  alert("密码规则不符!6----12");
                  ps.select();
                  return false;
              }
            var ps2 = document.getElementById("ps2");
            if(ps2.value!= ps.value){
                alert("两次输入的不一致!");
                return  false;
            }
            var   age =  document.getElementById("age");
            if(isNaN(age.value)){
                  alert("你的年龄是非法的!");
                  return  false;
            }
            
            
            
        }
    </script>
    </head>
    
    <body>
       <form name="f"  action="demo.html"  onsubmit="return checkUser()">
          用户名:<input type="text" name="username" id="username"/>
          <br/>
          密码:<input type="password" name="ps" id="ps"/>
          <br/>
          确认密码:<input type="password" name="ps2" id="ps2"/>
          <br/>
          年龄:<input type="text" name="age" id="age"/>
          <br/>
          性别:<input type="radio" name="sex" value="0" /><input type="radio" name="sex" value="1"/><br/>
          爱好:<input type="checkbox" name="box" value="0"/>篮球
          <input type="checkbox" name="box" value="1"/>足球
          <input type="checkbox" name="box" value="2"/>排球
          <input type="checkbox" name="box" value="3"/>网球
          <input type="checkbox" name="box" value="4"/>羽毛球
          <br/>
          E-mail:<input type="text" id="email"/>
          <br/>
          <input  type="submit" value="提交"/>
       </form>
    </body>
    </html>
  • 相关阅读:
    我要好offer之 二叉树大总结
    我要好offer之 字符串相关大总结
    楼层扔鸡蛋问题[转]
    Linux System Programming 学习笔记(十一) 时间
    Linux System Programming 学习笔记(十) 信号
    Linux System Programming 学习笔记(九) 内存管理
    Linux System Programming 学习笔记(八) 文件和目录管理
    Linux System Programming 学习笔记(七) 线程
    Linux System Programming 学习笔记(六) 进程调度
    APUE 学习笔记(十一) 网络IPC:套接字
  • 原文地址:https://www.cnblogs.com/letben/p/5185309.html
Copyright © 2011-2022 走看看