1.表单提交验证的几种方法
一、 submit 按钮和 onsubmit 事件实现验证
<form name=“form1”onsubmit=“return checkForm()”>
用户名：<input type=“text”name=“username” />
<input type=“submit” value=“提交表单” />
</form>
二、 button 按钮和 onclick 事件实现验证
<form name=“form1” >
用户名：<input type=“text”name=“username” />
<input type=“button” value=“提交表单”onClick=“checkForm()” />
注意：普通按钮的onclick的返回值，不会阻止普通按钮的默认动作
</form>
<script>
function checkForm()
{
var flag; //局部变量
//先做表单验证
If(document.form1.username.value==””)
{
flag = false;
}else
{
flag = true;
}
//判断flag的值，如果为true，则提交表单
if(flag==true)
{
//如果为true，则提交表单，使用form对象的提交方法submit()
Window. alert (“表单验证通过”);
document.form1.submit();
}else
{
//如果为false，则弹出一个提示信息
Window.alert(“表单验证失败”);
}
}
</script>
三、 submit 按钮和 onclick 事件实现验证
<form name=“form1” >
用户名：<input type=“text”name=“username” />
<input type=“submit” value=“提交表单”onClick=“return checkForm()” />
</form>
2. 复选框 对象 checkbox
checkbox 对象的属性
name：复选框的名称
value：复选框的值
type：复选框的类型
form：复选框所在的表单对象。如：this.form
checked：复选框是否选中
注意：在表单中，多个name的值一样，将产生一个数组。
实例：全选和反选
<script>
//定义函数：当“全选”复选框被“选中”时，所有的name=hobby都勾选
//如果“全选”复选框取消“选中”时，所有的name=hobby都取消勾选
function select_all(obj)
{
//取到name=hobby的对象，构成的一个数组
var arr = document.form1.hobby;
//判断“全选”的状态
if(obj.checked)
{
//遍历所有name=hobby对象的checked的值，并将其值设为true
for(var i=0;i<arr.length;i++)
{
arr[i].checked = true;
}
}else
{
//遍历所有name=hobby对象的checked的值，并将其值设为false
for(var i=0;i<arr.length;i++)
{
arr[i].checked = false;
}
}
}
//定义函数：选中的项，变成取消；没有选中的项，被选中
function select_no_all()
{
//先获得name=hobby的所有对象
var arr = document.form1.hobby; //checked
//遍历所有的hobby对象
for(var i=0;i<arr.length;i++)
{
if(arr[i].checked)
{
arr[i].checked = false;
}else
{
arr[i].checked = true;
}
}
}
</script>
3.上传文件域file
对于上传的文件要做两方面的判断：文件的类型( 扩展名 )、文件的大小(PHP中再讲)。
<script>
//定义：对上传文件的扩展名进行判断
function check_file_type(fileName)
{
//定义状态变量
var flag = false;
//定义一个图片扩展名的数组
var arr = [“jpg”,”jpeg”,”png”,”gif”]; //dedeCMS
//重蔚自留地的今日头条.xls
//先找到最后一个小点的位置
//提取子字符串substr(startIndex)、substring(startIndex)
//取出上传文件的扩展名
var ext = fileName.substr(fileName.lastIndexOf(“.”)+1).toLowerCase();
//遍历图片数组，与取到的扩展名，进行比对，如果找到，则返回true
for(var i=0;i<arr.length;i++)
{
if(arr[i]==ext)
{
flag = true;
break;
}
}
//根据flag的值，弹出相应的提示信息
if(flag)
{
alert(“文件可以上传”);
}else
{
alert(“文件类型不允许上传”);
}
}
</script>
4.下拉菜单对象select和option对象
<select name=“edu”>
<option value=“ 大专 ”>大专</option>
<option value=“大本”>大本</option>
<option value=“研究生”>研究生</option>
</select>
select 对象的属性
options[]：所有的option构成的一个数组。
如：edu.options[0].value = “大专”
edu.options[0].text = “大专”;
selectedIndex：默认选中的option对象的索引号(下标)
length：指一共有多少个option对象
name：select对象的名称
option 对象的属性
value：指option对象的值
text：指<option></option>之间的文本内容
以上就是我今天学到的表单提交的几种方法。跟大家一起交流。写的不好，望大神多多指教。
