.表單提交驗證的幾種方法

一、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>