一.获取表单
1. document.表单名称 |
前两种常用
<body>
<form id='myform' name="myform" action="" method="post"></form>
<form id='myform2' name="myform2" action="" method="post"></form>
</body>
<script>
//四种方式
var form =document.getElementById("myform");
form =document.myform;
form =document.forms["myform"];
form =document.forms[0];
console.log(form);
</script>二.获取元素
1.获取 input 的元素
如 text password hidden textarea 等， 前两种常用
1)、通过 id 获取： document.getElementById(元素 id); |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>给某张图片加评论</title>
<!--
利用
innerHTML
createElement
createTextNode
appendChild
insertBefor
setAttribute
obj.value
给某张图片加评论
--、html骨架
--、给按钮+事件（按钮、单击事件、将评论内容放入评论区）
-- 获取评论框的输入内容
-- 创建一个含有评论内容的节点
-- 将含有评论内容的节点添加到指定位置
--指定位置 container.innerHTML = "<div class='pl'>"+ "abc" +"</div>"+ container.innerHTML
-- container.insertBefore(newObj,)
-->
</head>
<body>
<div> <img src="img/baby.jpg" alt="" style="width: 300px;"/></div>
<div>
<textarea name="" rows="5" cols="30" placeholder="说句话吧"></textarea>
<button onclick="subPl();">提交评论</button>
</div>
<div id="container">
</div>
<script type="text/javascript">
var i = 0;
function subPl(){
// 1、获取数据
var plStr = document.getElementsByTagName('textarea')[0].value;
if(plStr!=null && plStr.length>0){
// 2、添加接点
var container = document.getElementById('container');
container.innerHTML = "<div>你是第 "+(++i) +" 条：" + plStr + "</div>" + container.innerHTML ;
document.getElementsByTagName('textarea')[0].value = "";
}
}
</script>
</body>
</html>
2. 获取 单选按钮
(1)获取单选按钮组：document.getElementsByName("name 属性值");
(2)遍历每个单选按钮，并查看单选按钮元素的 checked 属性若属性值为 true 表示被选中，否则未被选中选中状态设定： checked=’checked’ 或 checked=’true’ 或 checked未选中状态设定： 没有 checked 属性 或 checked=’false’.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>切换男女性别</title>
</head>
<body>
性别:<input type="radio" name="gender" checked='true' value="nan"/>男
<input type="radio" name="gender" value="nv"/>女
<button id= "Btn" onclick="change();">切换</button>
<script type="text/javascript">
function change(){
var gender = document.getElementsByName("gender");
console.log(gender);
console.log(gender[0].checked);
console.log(gender[1].checked);
var arr = new Array(gender.length);
for(var i=0; i<gender.length; ++i){
arr[i] = !gender[i].checked;
}
for (var i=0; i<gender.length; ++i) {
gender[i].checked = arr[i];
}
}
</script>
</body>
</html>
3. 获取 多选按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="radio" name="gender" value="nan"/> 男
<input type="radio" name="gender" value="nv"/> 女
<button onclick="getV()">获取选项单选</button>
<hr />
爱好：
<input type="checkbox" name="fav" value="reading" />看书
<input type="checkbox" name="fav" value="writing" />写作
<input type="checkbox" name="fav" value="cooking" />烹饪
<input type="checkbox" name="fav" value="coding" />敲代码
<button onclick="getVs()">获取选项复选</button>
<hr />
<select name="from" id="from" multiple="multiple" size="4">
<option value="sh">上海</option>
<option value="anh">安徽</option>
<option value="sxi">山西</option>
<option value="sx">陕西</option>
</select>
<button onclick="getVSelect()">获取选项下拉</button>
<script type="text/javascript">
function getVSelect(){
var str = "";
// 获取下拉列表
var sel = document.getElementById('from');
// 选中项的索引
var idx = sel.selectedIndex;
// 通过索引获取下拉项
var v = sel.options[idx].value;
//console.log(v);
// console.log(sel.options.length);
for(var i=0; i<sel.options.length; i++){
//console.log(sel.options[i].selected);
if(sel.options[i].selected){
str += sel.options[i].value + " " ;
}
}
console.log(str);
}
function getVs(){
var str = "";
// 获取所有的复选框 name
var favs = document.getElementsByName('fav');
for(var i in favs){
if(favs[i].checked){
str+= favs[i].value + ",";
}
}
//str = str.substr(0,str.length-1)
str = str.substring(0,str.length-1);
console.log(str);
}
function getV(){
var gs = document.getElementsByName("gender");
for(var i=0 ;i<gs.length; i++){
if(gs[i].checked){
console.log(gs[i].value);
}
}
}
</script>
</body>
</html>
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 属性
三.提交表单
（1）使用普通 button 按钮+onclick 事件+事件中编写代码:获取表单.submit();
（2）使用 submit 按钮 + οnclick="return 函数()" +函数编写代码:
最后必须返回： return true|false;
（3）使用 submit 按钮/图片提交按钮 + 表单 οnsubmit="return 函数();" +函数编写代码:最后必须返回： return true|false;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单提交</title>
</head>
<body>
<form action="" method="post" name="myform">
<input type="text" name="userName" id="userName" value="" />
<!--<button onclick="subForm1();"> 提交表单</button>-->
<input type="button" onclick="subForm1();" value="提交表单" />
<input type="submit" name="" id="" value="sub提交表单" onclick="return subForm2();" />
</form>
<form action="" method="post" name="myform2" onsubmit="return subForm3();">
<input type="text" name="userName" id="userName" value="" />
<input type="submit" name="" id="" value="sub提交表单" />
</form>
<script type="text/javascript">
function subForm3(){
return true;
}
function subForm2(){
var form = document.myform;
var username = form.userName.value;
// 6~12之间 合法（提交表单）， 否则不合法（不提交）
if(username!=null && username.length>=6 && username.length<=12){
return true;
}else{
//alert('数据不合法，请重填');
return false;
}
//return false;
}
function subForm1(){
var form = document.myform;
var username = form.userName.value;
// 6~12之间 合法（提交表单）， 否则不合法（不提交）
if(username!=null && username.length>=6 && username.length<=12){
form.submit();
}else{
alert('数据不合法，请重填');
}
}
</script>
</body>
</html>
四.表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单的验证</title>
</head>
<body>
<form id='myform' name="myform" method="post">
姓名:<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="蹦极" />蹦极
<input type="checkbox" name="ufav" value="跳伞" />跳伞
<input type="checkbox" name="ufav" value="跳楼机" />跳楼机
<input type="checkbox" name="ufav" value="过山车" />过山车
<input type="checkbox" name="ufav" value="代码" />代码
<input type="button" value="全都喜欢" onclick="selectAll();" />
<input type="button" value="全都不喜欢" onclick="selectNone();" />
<input type="button" value="选的都是不喜欢的" onclick="selectNot();" />
<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="submit" onclick="return checkForm();">提交</button>
<button type="reset" onclick="resetForm();">重置</button>
<button type="button" onclick="test();">test</button>
</form>
<script type="text/javascript">
function $(info){
// 如果 #pwd .class div
//return document.getElementById(id);
var firstLetter = info.substr(0,1);
if(firstLetter=='#'){
return document.getElementById(info.substr(1));
}else if(firstLetter=='.'){
return document.getElementsByClassName(info.substr(1));
}else{
return document.getElementsByTagName(info);
}
}
//
function test(){
// alert(document.getElementById('uname'));
alert($('input'));
//alert('#uname'.substr(1));
}
function selectNot(){
var favs = document.getElementsByName('ufav');
for(var i in favs){
favs[i].checked = !favs[i].checked;
}
}
function selectNone(){
var favs = document.getElementsByName('ufav');
for(var i in favs){
favs[i].checked = false;
}
}
// 全选的功能
function selectAll(){
var favs = document.getElementsByName('ufav');
for(var i in favs){
favs[i].checked = true;
}
}
function checkForm(){
var flag = true;
var msg = "";
// 有问题的地方 flag = false;
var uname = myform.uname;
// 获取到用户名
var unameValue = uname.value;
// 如果不合法
if(unameValue==null || unameValue.length<6 || unameValue.length>12){
msg = "用户名有问题<br/>";
flag = false;
}
var pwd = myform.upwd;
var pwdValue = pwd.value;
if(pwdValue==null || pwdValue.length<6|| pwdValue.length>12 || pwdValue.indexOf(unameValue)!=-1){
msg += "密码有问题<br/>";
flag = false;
}
// 获取所有年龄的单选项
var ages = document.getElementsByName('uage');
var age;
for(var i=0;i<ages.length; i++){
if(ages[i].checked){
// 获取选中的哪一个单选项的值
age = ages[i].value;
break;
}
}
// 年龄不合法
if(age==undefined || age=="0"){
msg += "年龄有问题<br/>";
flag = false;
}
// 爱好
// 所有复选框
var favs = document.getElementsByName('ufav');
var favsStr = "";
for(var i=0;i<favs.length;i++){
if(favs[i].checked){
// 存储的所有选中的项的值
favsStr += favs[i].value;
}
}
if(favsStr==""){
msg += "爱好有问题<br/>";
flag = false;
}
//来自
// 下拉框
var cfrom = document.getElementById('ufrom');
var idx = cfrom.selectedIndex;
var cfromValue = cfrom.options[idx].value;
var cfromStr = cfrom.options[idx].text;
if(cfromValue=="-1"){
msg += "来自哪里有问题<br/>";
flag = false;
}
if(flag){
alert(unameValue + "=" + pwdValue + "=" + age + "=" + favsStr + "=" + cfromStr );
}
document.getElementById('validate').innerHTML = msg;
return flag;
}
</script>
</body>
</html>
1751
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
