欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實(shí)現(xiàn)的簡(jiǎn)單表單驗(yàn)證功能示例

 更新時(shí)間：2017年10月13日 11:52:51   作者：弗蘭隨風(fēng)小歡  
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單表單驗(yàn)證功能,涉及javascript針對(duì)表單提交內(nèi)容的獲取、判斷、焦點(diǎn)設(shè)置等相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)的簡(jiǎn)單表單驗(yàn)證功能。分享給大家供大家參考，具體如下：

源代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<script type="text/javascript" src="myjs1.js"></script>
<link rel="stylesheet" type="text/css" href="myfile-2.css" rel="external nofollow" />
</head>
<body>
<form name="f1">
姓名:<input type="text" name="xm" />
<br/>
年齡:<input type="text" name="nl" />
愛(ài)好:<input type= "checkbox" name="ah" />爬山
<input type= "checkbox" name="ah" />游泳
<input type= "checkbox" name="ah" />網(wǎng)球
<input type= "checkbox" name="ah" />乒乓球
<br/>
密碼：<input type="password" name="mm"/>
<br/>
重復(fù)密碼:<input type="password" name="cfmm"/>
<br/>
備注:<textarea name="bz" rows="10" cols="20"></textarea>
<br/>
<input type="button" value="提交" onclick="checkit();"/>
</form>
</body>
</html>

myjs1.js文件代碼:

// JavaScript Document
function checkit()
{ var flag = false;
 for(var i=0;i<document.forms[0].ah.length;i++)
{
if(document.forms[0].ah[i].checked)//checked 表示被選中
{
flag = true;
break;
}
}
if(!flag)//沒(méi)有一個(gè)愛(ài)好被選中
{
alert("請(qǐng)至少選擇一個(gè)愛(ài)好！");
return;//假如沒(méi)有找到，又返回去，直到找到!
}
if(document.forms[0].mm.value.length<9)
{
alert("密碼長(zhǎng)度必須在8位數(shù)以上！");
document.forms[0].mm.focus();//讓密碼框獲取焦點(diǎn)，焦點(diǎn)是 可以根據(jù)應(yīng)用配合完成一些自動(dòng)化操作，比如登錄時(shí)輸入了錯(cuò)誤的用戶(hù)名和密碼，回轉(zhuǎn)登錄頁(yè)后，可以讓用戶(hù)名輸入框自動(dòng)獲得焦點(diǎn)，避免用戶(hù)重新定位。
return;
}
if(document.forms[0].mm.value!=document.forms[0].cfmm.value)
{
alert("兩次密碼輸入不一致，請(qǐng)重新輸入密碼！");
return;
}
if(document.forms[0].bz.value=="")
{
alert("請(qǐng)輸入備注！");
}
}

注意：在js中聲明變量用var，定義函數(shù)用function,

這個(gè)例子可以實(shí)現(xiàn) 愛(ài)好的驗(yàn)證(不能為空) ，密碼是否一致，而且密碼的長(zhǎng)度要大于8，備注是否為空!

另外，css文件就交給讀者自己美化了~

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript表單(form)操作技巧大全》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • 瀏覽器兼容console對(duì)象的簡(jiǎn)要解決方案分享

    瀏覽器兼容console對(duì)象的簡(jiǎn)要解決方案分享

    不同瀏覽器或者版本之間對(duì)于console對(duì)象的支持不盡相同，而console方法在開(kāi)發(fā)調(diào)試過(guò)程中都是不錯(cuò)的工具。難道要在上線(xiàn)前把所有console.xxxx去掉以保證某些瀏覽器不報(bào)錯(cuò)么。其實(shí)可以變通解決
    2013-10-10
  • Bootstrap3學(xué)習(xí)筆記(二)之排版

    Bootstrap3學(xué)習(xí)筆記(二)之排版

    這篇文章主要介紹了Bootstrap3學(xué)習(xí)筆記(二)之排版的相關(guān)資料,非常具有參考價(jià)值，特此分享腳本之家平臺(tái)，供大家參考
    2016-05-05
  • JavaScript中 DOM操作方法小結(jié)

    JavaScript中 DOM操作方法小結(jié)

    本篇文章主要介紹了JavaScript中 DOM操作方法小結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-04-04
  • bootstrap 下拉多選框進(jìn)行多選傳值問(wèn)題代碼分析

    bootstrap 下拉多選框進(jìn)行多選傳值問(wèn)題代碼分析

    項(xiàng)目開(kāi)發(fā)遇到個(gè)問(wèn)題，就是引入bootstrap下拉多選框進(jìn)行多選的時(shí)候，用form表單提交到后臺(tái)，獲取不到多選的值，只能獲取的選擇的第一個(gè)值，怎么回事呢？下面小編給大家分析下bootstrap 下拉多選框進(jìn)行多選傳值問(wèn)題，一起看看吧
    2017-02-02
  • 正則表達(dá)式校驗(yàn)身份證號(hào)碼完整代碼示例

    正則表達(dá)式校驗(yàn)身份證號(hào)碼完整代碼示例

    在做用戶(hù)實(shí)名驗(yàn)證時(shí),常會(huì)用到身份證號(hào)碼的正則表達(dá)式及校驗(yàn)方案,下面這篇文章主要給大家介紹了關(guān)于正則表達(dá)式校驗(yàn)身份證號(hào)碼的相關(guān)資料,需要的朋友可以參考下
    2024-04-04
  • 使用Post提交時(shí)須將空格轉(zhuǎn)換成加號(hào)的解釋

    使用Post提交時(shí)須將空格轉(zhuǎn)換成加號(hào)的解釋

    參數(shù)有中包含空格且使用Post提交時(shí)須將空格轉(zhuǎn)換成加號(hào),這樣后臺(tái)程序接受到的才是真正的空格,感興趣的朋友可以了解下
    2013-01-01
  • 微信小程序wx.request實(shí)現(xiàn)后臺(tái)數(shù)據(jù)交互功能分析

    微信小程序wx.request實(shí)現(xiàn)后臺(tái)數(shù)據(jù)交互功能分析

    這篇文章主要介紹了微信小程序wx.request實(shí)現(xiàn)后臺(tái)數(shù)據(jù)交互功能,分析微信小程序wx.request在后臺(tái)數(shù)據(jù)交互過(guò)程中遇到的問(wèn)題與相關(guān)的解決方法,需要的朋友可以參考下
    2017-11-11
  • 1分鐘快速了解js實(shí)現(xiàn)下載文件功能的4種方式

    1分鐘快速了解js實(shí)現(xiàn)下載文件功能的4種方式

    在前端開(kāi)發(fā)中,我們經(jīng)常需要實(shí)現(xiàn)文件下載功能,例如下載用戶(hù)上傳的圖片、用戶(hù)生成的文件等,這篇文章主要給大家介紹了關(guān)于如何通過(guò)1分鐘快速了解js實(shí)現(xiàn)下載文件功能的4種方式,需要的朋友可以參考下
    2024-03-03
  • 基于JavaScript實(shí)現(xiàn)數(shù)碼時(shí)鐘效果

    基于JavaScript實(shí)現(xiàn)數(shù)碼時(shí)鐘效果

    這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)數(shù)碼時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-07-07
  • JavaScript中將值轉(zhuǎn)換為字符串的五種方法總結(jié)

    JavaScript中將值轉(zhuǎn)換為字符串的五種方法總結(jié)

    這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript中將值轉(zhuǎn)換為字符串的五種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06

最新評(píng)論