Javascript系列之表单
Javascript系列之表单。
1、获取表单
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取表单</title>
</head>
<body>
<form id="form1" name="form1" method="get" action="">
</form>
<form id="form2" name="form2" method="get" action="">
</form>
</body>
<!--
获取表单
1、document.表单名称
2、document.getElementById(表单 id);
3、document.forms[表单名称]
4、document.forms[索引]; //从 0 开始
-->
<script type="text/javascript">
// 1、document.表单名称
var form1 = document.form1;
console.log(form1);
// 2、document.getElementById(表单 id);
var form2 = document.getElementById("form2");
console.log(form2);
// 得到当前文档中的表单集合
var forms = document.forms;
console.log(forms);
// 3、document.forms[表单名称]
var form3 = forms['form1'];
console.log(form3);
// 4、document.forms[索引]; //从 0 开始
var form4 = forms[0];
console.log(form4);
</script>
</html>
2、获取input元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取input元素</title>
</head>
<body>
<form id='myform' name="myform" action="" method="get">
姓名:<input type="text" id="uname" name="uname" value="zs"/><br />
密码:<input type="password" id="upwd" name="upwd" value="1234"/><br />
<input type="hidden" id="uno" name="uno" value="隐藏域" />
个人说明:<textarea name="intro"></textarea>
<button type="button" onclick="getTxt();" >获取元素内容</button>
</form>
</body>
<!--
获取input元素
1)、通过 id 获取：document.getElementById(元素 id);
2)、通过 form.名称形式获取: myform.元素名称; name属性值
3)、通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] // 从0开始
-->
<script type="text/javascript">
function getTxt(){
// 1)、通过 id 获取：document.getElementById(元素 id);
var uname = document.getElementById("uname").value;
console.log(uname);
// 2)、通过 form.名称形式获取: myform.元素名称; name属性值
var myform = document.getElementById("myform");
var upwd = myform.upwd.value;
console.log(upwd);
// 3)、通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
var uno = document.getElementsByName("uno")[0].value;
console.log(uno);
// 4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] // 从0开始
var intro = document.getElementsByTagName("textarea")[0].value;
console.log(intro);
}
</script>
</html>
3、获取单选按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取单选按钮</title>
</head>
<body>
<input type="radio" name="rad" value="1" /> 1
<input type="radio" name="rad" value="2" /> 2
<button type="button" onclick="getRadio()">获取</button>
</body>
<!--
(1)获取单选按钮组
document.getElementsByName("name属性值");
(2)遍历每个单选按钮，并查看单选按钮元素的checked属性
选中状态： checked='checked' checked cheked=true
未选中状态： 未设置checked属性或checked=false
-->
<script type="text/javascript">
function getRadio(){
// (1)获取单选按钮组
var radios = document.getElementsByName("rad");
// (2)遍历每个单选按钮，并查看单选按钮元素的checked属性
for (var i = 0; i < radios.length; i++) {
console.log(radios[i].checked);
if (radios[i].checked) {
// 获取值
console.log(radios[i].value);
}
}
}
</script>
</html>
4、获取多选按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取多选按钮</title>
</head>
<body>
<input type="checkbox" name="hobby" value="sing" /> 唱歌
<input type="checkbox" name="hobby" value="dance" /> 跳舞
<input type="checkbox" name="hobby" value="rap" /> 说唱
<button type="button" onclick="getCheckbox()">获取</button>
</body>
<!--
(1)获取多选按钮组
document.getElementsByName("name属性值");
(2)遍历每个多选按钮，并查看多选按钮元素的checked属性
选中状态： checked='checked' checked cheked=true
未选中状态： 未设置checked属性或checked=false
-->
<script type="text/javascript">
function getCheckbox(){
// (1)获取多选按钮组
var checkboxs = document.getElementsByName("hobby");
var str = '';
// (2)遍历每个多选按钮，并查看多选按钮元素的checked属性
for(var i = 0; i < checkboxs.length; i++){
// 如果被选中，则获取对应的值
if (checkboxs[i].checked) {
str += checkboxs[i].value + ",";
}
}
// 通过截取，去除最后一个多余的问号
str = str.substring(0,str.length-1);
console.log(str);
}
</script>
</html>
5、获取下拉选项
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取下拉选项</title>
</head>
<body>
来自:
<select id="ufrom" name="ufrom">
<option value="" >请选择</option>
<option value="beijing" selected="selected">北京</option>
<option value="shanghai">上海</option>
<option >深圳</option>
</select><br />
<button type="button" id="sub" >获取</button>
</body>
<!--
获取下拉选项
1. 获取下拉框（id属性值、name属性值、class属性值、元素）
2. 获取下拉框的所有下拉选项
下拉框对象.options
3. 获取下拉框被选中项的索引
下拉框对象.selectedindex
4. 获取被选中项的值
注意：当通过options获取选中项的value属性值时，
若没有value属性，则取option标签的内容
若存在value属性，则取value属性的值
5. 获取被选中项的文本
选中状态设定：selected='selected'、selected=true、selected
未选中状态设定：不设selected属性
-->
<script type="text/javascript">
document.getElementById("sub").onclick = function(){
// 1. 获取下拉框（id属性值、name属性值、class属性值、元素）
var ufrom = document.getElementById("ufrom");
// 2. 获取下拉框的所有下拉选项
var selectoptions = ufrom.options;
console.log(selectoptions);
// 3. 获取下拉框被选中项的索引
var index = ufrom.selectedIndex;
console.log(index);
// 4. 获取被选中项的值
var val = selectoptions[index].value;
console.log(val);
// 5. 获取被选中项的文本
var txt = selectoptions[index].text;
console.log(txt);
// 获取当前被选中项的值
var selectedvalue = ufrom.value;
console.log(selectedvalue);
// 设置下拉选项被选中
selectoptions[2].selected = true;
}
</script>
</html>
6、提交表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>提交表单</title>
</head>
<body>
<form id='myform1' name="myform2" action="http://www.baidu.com" method="get" >
姓名：<input type="text" id="uname"/>
<input type="button" value="提交表单" onclick="submitForm()" />
</form>
<hr >
<form id='myform2' action="http://www.baidu.com" method="get" >
姓名：<input type="text" id="uname2"/>
<input type="submit" value="提交表单" onclick="return submitForm2();" />
</form>
<hr >
<form id='myform2' action="http://www.baidu.com" method="get" onsubmit="return submitForm3();">
姓名：<input type="text" id="uname3"/>
<input type="submit" value="提交表单" />
</form>
</body>
<!--
提交表单
（1）使用普通button按钮+onclick事件+事件中编写代码:
获取表单.submit();
（2）使用submit按钮 + onclick="return 函数()" +函数编写代码:
最后必须返回：return true|false;
（3）使用submit按钮/图片提交按钮 + 表单onsubmit="return 函数();" +函数编写代码:
最后必须返回：return true|false;
trim()
去除字符串前后空格（不去除字符串中间的空格）
-->
<script type="text/javascript">
/*
（1）使用普通button按钮+onclick事件+事件中编写代码:
获取表单.submit();
*/
function submitForm(){
// 获取姓名文本框的值
var uname = document.getElementById("uname").value;
if (uname == null || uname.trim() == "") {
// 结束
return;
}
// 提交表单
document.getElementById("myform1").submit();
}
/*
（2）使用submit按钮 + onclick="return 函数()" +函数编写代码:
最后必须返回：return true|false;
*/
function submitForm2(){
// 获取姓名文本框的值
var uname = document.getElementById("uname2").value;
if (uname == null || uname.trim() == "") {
// 结束
return false;
}
// 提交
return true;
}
/*
（3）使用submit按钮/图片提交按钮 + 表单onsubmit="return 函数();" +函数编写代码:
最后必须返回：return true|false;
*/
function submitForm3(){
// 获取姓名文本框的值
var uname = document.getElementById("uname3").value;
if (uname == null || uname.trim() == "") {
// 结束
return false;
}
// 提交
return true;
}
</script>
</html>
7、表单校验
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单校验</title>
</head>
<body>
<form id='myform' name="myform">
姓名:<input type="text" id="uname" name="uname" /><br />
密码:<input type="password" id="upwd" name="upwd" /><br />
年龄:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩
<input type="radio" name="uage" value="1"/>你懂得 <br />
爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
<input type="checkbox" name="ufav" value="爬床"/>爬床
<input type="checkbox" name="ufav" value="代码"/>代码<br />
来自:<select id="ufrom" name="ufrom">
<option value="-1" selected="selected">请选择</option>
<option value="0">北京</option>
<option value="1">上海</option>
</select><br />
<div id="validate" style="color: red;"></div>
<button type="button" onclick="checkForm();">提交</button>
<button type="reset" onclick="resetForm();">重置</button>
</form>
</body>
<script type="text/javascript">
/**
* 通过 id通过id参数，返回dom对象
* @param {Object}
*/
function $(id) {
return document.getElementById(id);
}
/**
* 重置表单
*/
function resetForm() {
$("myform").reset();
}
/**
要求：
1、验证用户名
1)不能为空
2)长度为 6-12 位
2、验证密码
1)不能为空 *
2)长度为 6-12 位
3)不能包含用户名
3、年龄: 必须选择 你懂得
4、爱好: 必须选择一项
5、来自: 必须选择一项
满足以上条件
1、弹出所有的内容
2、提交表单
否则
1、说明错误原因
2、不能提交表单
*/
function checkForm() {
// 获取用户名
var uname = $("uname").value;
if (isEmpty(uname)) {
// 通过innerHTML赋值
$("validate").innerHTML = '用户名不能为空！';
return;
}
if (uname.length < 6 || uname.length > 12) {
$("validate").innerHTML = '用户名长度在6-12位之间！';
return;
}
// 获取密码
var upwd = $("upwd").value;
if (isEmpty(upwd)) {
// 通过innerHTML赋值
$("validate").innerHTML = '密码不能为空！';
return;
}
if (upwd.length < 6 || upwd.length > 12) {
$("validate").innerHTML = '密码长度在6-12位之间！';
return;
}
if (upwd.indexOf(uname) > 0) {
$("validate").innerHTML = '密码不能包含用户名！';
return;
}
// 获取年龄
var ages = document.getElementsByName("uage");
// 获取第二个单选框是否被选中
var cked = ages[1].checked;
if (!cked) {
$("validate").innerHTML = '年龄必须选择你懂得！';
return;
}
// 获取爱好
var ufavs = document.getElementsByName("ufav");
var favs = '';
// 遍历
for (var i = 0; i < ufavs.length; i++) {
if (ufavs[i].checked){
favs += ufavs[i].value + ",";
}
}
// 判断是否选中
if (isEmpty(favs)) {
$("validate").innerHTML = '必须选择一项爱好！';
return;
}
favs = favs.substring(0,favs.length);
// 获取下拉框
var city = $("ufrom").value;
if (city == -1){
$("validate").innerHTML = '请选择你的城市！';
return;
}
$("validate").innerHTML = '';
// 设置表单提交的地址
$("myform").action = "http://www.baidu.com";
// 提交表单
$("myform").submit();
}
/**
* 判断字符串是否为空
* 如果为空，返回true
* 如果不为空，返回false
* @param {Object}
*/
function isEmpty(str) {
if (str == null || str.trim() == "") {
return true;
}
return false;
}
</script>
</html>
————————————————
版权声明：本文为CSDN博主「喜欢与撩」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_61938171/article/details/122902418
