<form name=“form1”onsubmit=“return checkForm()”>

用户名:<input type=“text”name=“username” />

<input type=“submit” value=“提交表单” />

html先选择验证条件再搜索模版html进修第十七天JS表单提交验证的几种办法附代码 jQuery

</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>之间的文本内容

以上便是我本日学到的表单提交的几种方法。
跟大家一起互换。
写的不好,望大神多多指教。