第一次用js

本周第一次了解一下js是什么东西，感觉全是手打一不小心就出错。例如一个分号，就导致了我两个函数没法运行，应该使用的是英文的分号，而不是拼音输入时的分号。还有小细节如document.getElementById("");

和document.getElementsByName("")的小差异，这一点点细节决定了整个js代码能不能正常发挥作用。

css写<form>表单，里面能包括input元素，包括文本，复选框，单选框，提交按钮，文本域：textfield和textarea的区别是前者只限一行，而后者可以允许多行，设置后者的框大小时，可以用col和row，但建议使用一般div设置宽高。

fieldset元素可以将表单内相关元素分组，一个框把相关的内容框住。

表单还能含有menus,textarea,fieldset,legend,label,注意form元素块级元素，其前后会产生折行。

onblur事件会在对象失焦时发生，相反有一个onfocus事件。input框常用的type：①button，定义可点击的按钮（一般由js启动）；②checkbox，定义复选框；三，password，密码框，会被掩码；四，reset：重置，重置按钮会清除表单中所有数据；

五，submit，提交；六，text，默认为20个字符。

第一周的浅尝辄止我还没有搞清楚应该用什么东西写js会比较方便，所以仅仅是用了sublime写，在网页上看效果。

检查有没有留空的函数

  function Cmd(){

var ipt = document.getElementById("divbox").getElementsByTagName("input") ;

      for(var i = 0; i < ipt.length; i++){
       if(ipt[i].value.length == 0){
        alert("所有资料都需要填写");    //alert弹框出来提示。
        ipt[i].focus();
        return false;
       }
     }
     return true;

    }

检验长度，用value：

function test()
 {
            if(document.a.fname.value.length > 7)
            {
                alert("请输入七个字以内的姓名");
                return false;
            }
            if(document.a.intro.value.length > 100)
            {
             alert("请输入100个字以内的自我介绍");
             return false;
            }
}   

检查电话号码的正则表达式，以及限制11位手机号：

 function validatemobile(mobile)
{
if(phonenum.length!=11)
{
alert("请输入有效的手机号码，需是11位");
return false;
}
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
if(!myreg.test(mobile))
{
alert("请输入有效的手机号码!");
return false;
}             
}

检验邮箱的正则表达式：

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
  {alert(alerttxt);return false}
else {return true}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"请输入正确的邮箱地址!")==false)
  {email.focus();return false}
}
}

本周题目要求仅限输入的年级数据是2010--2014级，我还不懂用正则，所以把这个问题看作是一般的数字大小来判断。

function check(){
 var x=document.getElementById("grade");
 if(x.value>2014)
 {
  alert("仅接受2010-2014级！");
  return false;
 }
 if(x.value<2010)
 {
  alert("仅接受2010-2014级！");
  return false;
 }
}    //把年级看作一个数字，限制大小为2010---2014，但我使用   ||  没有成功，所以最后把这个范围分开写了。

 

<form action="fir.html" name="a" οnsubmit="validate_form(this);test(); validatemobile();check();" method="get">

onsubmit事件，后接不同的函数，（）里面不要有参数，否则没法运行，

<input type="submit" id="buttoncon" value="提交" οnclick="Cmd();" >不明不白地加了一个onclick事件，都可以加多个函数，不过应该是可以函数数量减少合并在一起。

 

 

还没解决的疑问是，提交后，自己乱输入的数据会出现在网址栏，很丑陋..可是用网上的随便一段代码试验却没有这个问题，要弄清楚action具体怎么回事。

 

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/huzixuan/p/9942712.html