全新java大数据教程之JavaScript表单

全新java大数据教程之JavaScript表单

表单是我们页面向后台传输数据的一种非常常见的方式，在进行数据发送（请求发出）之前，我们应该现在页面进行一系列数据合法性的验证，节省不必要的错误数据的传输，以及提高用户的体验度。

一、获取表单

前两种常用

1、document.表单名称
2、document.getElementById(表单 id);
3、document.forms[表单名称]
4、document.forms[索引]; //从 0 开始

例如：

二、获取表单元素 1、获取input元素三

如 text password hidden textarea等，前两种常用。

1)、通过 id 获取：document.getElementById(元素 id);
2)、通过 form.名称形式获取: myform.元素名称; name属性值
3)、通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
4)、通过 tagName 数组 :document.getElementsByTagName(‘input’)[索引] // 从0开始

	


本文是java大数据教程里Javascript部分教学课件文档，如需全套java架构 大数据学习教程和资料请+V：xiaole888899999

2、获取单选按钮

前提：将一组单选按钮设置相同的name属性值

(1)获取单选按钮组：

document.getElementsByName("name属性值");

(2)遍历每个单选按钮，并查看单选按钮元素的checked属性：

若属性值为true表示被选中，否则未被选中

选中状态设定： checked=‘checked’ 或 checked=‘true’ 或 checked

未选中状态设定： 没有checked属性 或 checked=‘false’

		

本文是java大数据教程里Javascript部分教学课件文档，如需全套java架构 大数据学习教程和资料请+V：xiaole888899999

3、获取多选按钮

*** 作方式与单选同理，不同之处在于可以多选

var ufav = document.getElementsByName("ufav");
var favstr = "";
    for (i = 0;i < ufav.length; i++){
        if(ufav[i].checked){
            favstr += ufav[i].value+",";
        }
    }
favstr = favstr.substr(0,favstr.length-1);

4、获取下拉选项

（1）获取 select 对象：

var ufrom = document.getElementById("ufrom");

（2）获取选中项的索引：

var idx = ufrom.selectedIndex;

（3）获取选中项 options 的 value属性值：

var val = ufrom.options[idx].value;

注意：当通过options获取选中项的value属性值时，

若没有value属性，则取option标签的内容

若存在value属性，则取value属性的值

（4）获取选中项 options 的 text：

var txt = ufrom.options[idx].text;

选中状态设定：selected=‘selected’、selected=true、selected

未选中状态设定：不设selected属性

	


本文是java大数据教程里Javascript部分教学课件文档，如需全套java架构 大数据学习教程和资料请+V：xiaole888899999

三、提交表单

（1）使用普通button按钮+onclick事件+事件中编写代码:

获取表单.submit();

​
（2）使用submit按钮 + οnclick=“return 函数()” +函数编写代码:
最后必须返回：return true|false;

（3）使用submit按钮/图片提交按钮 + 表单οnsubmit=“return 函数();” +函数编写代码:
最后必须返回：return true|false;

四、表单校验

 姓名:

 密码:

 年龄:小屁孩
      你懂得 

 爱好:篮球
      爬床
      代码

 来自:
          请选择
          北京
          上海
      
					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: https://outofmemory.cn/zaji/5687972.html