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 就会获得输出框中的值。

7、docuemnt.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语言中是有区别的。

Java：String 待测字符串 = "";

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>

秒客网

js函数、表单验证

相关文章