JavaScript實作表單驗證功能的簡單範例-js教程-PHP中文網

首頁

web前端

js教程

JavaScript實作表單驗證功能的簡單範例

May 14, 2018 pm 04:13 PM

javascript js 功能

這篇文章主要介紹了JS實現的簡單表單驗證功能,涉及javascript針對表單提交內容的獲取、判斷、焦點設定等相關操作技巧,需要的朋友可以參考下

本文實例講述了JS實作的簡單表單驗證功能。分享給大家供大家參考，具體如下：

原始程式碼：

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;无标题文档&lt;/title&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;myjs1.js&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;myfile-2.css&quot; rel=&quot;external nofollow&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form name=&quot;f1&quot;&gt;
姓名:&lt;input type=&quot;text&quot; name=&quot;xm&quot; /&gt;
&lt;br/&gt;
年龄:&lt;input type=&quot;text&quot; name=&quot;nl&quot; /&gt;
爱好:&lt;input type= &quot;checkbox&quot; name=&quot;ah&quot; /&gt;爬山
&lt;input type= &quot;checkbox&quot; name=&quot;ah&quot; /&gt;游泳
&lt;input type= &quot;checkbox&quot; name=&quot;ah&quot; /&gt;网球
&lt;input type= &quot;checkbox&quot; name=&quot;ah&quot; /&gt;乒乓球
&lt;br/&gt;
密码：&lt;input type=&quot;password&quot; name=&quot;mm&quot;/&gt;
&lt;br/&gt;
重复密码:&lt;input type=&quot;password&quot; name=&quot;cfmm&quot;/&gt;
&lt;br/&gt;
备注:&lt;textarea name=&quot;bz&quot; rows=&quot;10&quot; cols=&quot;20&quot;&gt;&lt;/textarea&gt;
&lt;br/&gt;
&lt;input type=&quot;button&quot; value=&quot;提交&quot; onclick=&quot;checkit();&quot;/&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

登入後複製

myjs1.js檔案程式碼:

// JavaScript Document
function checkit()
{ var flag = false;
 for(var i=0;i&lt;document.forms[0].ah.length;i++)
{
if(document.forms[0].ah[i].checked)//checked 表示被选中
{
flag = true;
break;
}
}
if(!flag)//没有一个爱好被选中
{
alert(&quot;请至少选择一个爱好！&quot;);
return;//假如没有找到，又返回去，直到找到!
}
if(document.forms[0].mm.value.length&lt;9)
{
alert(&quot;密码长度必须在8位数以上！&quot;);
document.forms[0].mm.focus();//让密码框获取焦点，焦点是 可以根据应用配合完成一些自动化操作，比如登录时输入了错误的用户名和密码，回转登录页后，可以让用户名输入框自动获得焦点，避免用户重新定位。
return;
}
if(document.forms[0].mm.value!=document.forms[0].cfmm.value)
{
alert(&quot;两次密码输入不一致，请重新输入密码！&quot;);
return;
}
if(document.forms[0].bz.value==&quot;&quot;)
{
alert(&quot;请输入备注！&quot;);
}
}

登入後複製

#注意：

#########################################在js中宣告變數用var，定義函數用function,#########這個例子可以實現愛好的驗證(不能為空) ，密碼是否一致，而且密碼的長度要大於8，備註是否為空!######另外，css檔就交給讀者自己美化了~###

以上是JavaScript實作表單驗證功能的簡單範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn