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>
  • 相关阅读:
    Linux用户配置sudo权限(visudo)
    Memcached 实战
    安装完centos7 root目录下的文件anaconda-ks.cfg
    通过命令查看centos机器公网ip
    .env修改后不生效
    laravel事务回滚失败
    windows10 PHP7 Sqlserver 扩展
    PHP生成html格式数据字典
    服务器初始化脚本
    PHP导出Excel表格实例
  • 原文地址:https://www.cnblogs.com/letben/p/5185309.html
Copyright © 2011-2022 走看看