.表单提交验证的几种方法

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

以上就是我今天学到的表单提交的几种方法。跟大家一起交流。写的不好，望大神多多指教。

束验证 DOM 方法

setCustomValidity('') setCustomValidity(null) setCustomValidity(undefined)

以下实例如果输入信息不合法，则返回错误信息：

checkValidity() 方法

<inputid="id1"type="number"min="100"max="300"required><buttononclick="myFunction()">验证</button><pid="demo"></p><script>

functionmyFunction(){varinpObj = document.getElementById("id1"); if(inpObj.checkValidity() == false){document.getElementById("demo").innerHTML = inpObj.validationMessage; }}

</script>