一、 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>
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>
对于上传的文件要做两方面的判断:文件的类型( 扩展名 )、文件的大小(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>
<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>之间的文本内容
以上就是我今天学到的表单提交的几种方法。跟大家一起交流。写的不好,望大神多多指教。