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

Javascript實(shí)現(xiàn)表單檢驗(yàn)

 更新時(shí)間:2022年06月16日 15:42:34   作者:lihuiGG520  
這篇文章主要介紹了Javascript實(shí)現(xiàn)表單檢驗(yàn),以注冊(cè)界面為例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

正如我們所見(jiàn)到的,好多網(wǎng)頁(yè)都有注冊(cè)界面,在注冊(cè)界面中,最常見(jiàn)的即是包括用戶名、密碼、請(qǐng)重復(fù)輸入密碼和一個(gè)“注冊(cè)”按鈕,今天我們就舉例實(shí)現(xiàn)一下該界面。

要求:

1.用戶名不為空,且用戶名不能超過(guò)12個(gè)字符;
2.密碼不為空,且密碼不能超過(guò)15個(gè)字符;
3.密碼和重復(fù)輸入的密碼必須一致;
4.如果發(fā)生錯(cuò)誤,顯示錯(cuò)誤并聚焦到錯(cuò)誤位置;

<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? ? ? <title>注冊(cè)</title>
? ? ? ? <script>
? ? ? ? ? ? function $(id){
? ? ? ? ? ? ? ? return document.getElementById(id);
? ? ? ? ? ? }
? ? ? ? ? ? function test(){
? ? ? ? ? ? ? ? var user_name = $("user_name").value;
? ? ? ? ? ? ? ? var password = $("password").value;
? ? ? ? ? ? ? ? var re_password = $("re_password").value;
? ? ? ? ? ? ? ? if(user_name.length==0){
? ? ? ? ? ? ? ? ? ? $("msg").innerHTML = "用戶名不能為空!";
? ? ? ? ? ? ? ? ? ? $("user_name").focus();
? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if(user_name.length>12){
? ? ? ? ? ? ? ? ? ? $("msg").innerHTML = "用戶名不能超過(guò)12個(gè)字符!";
? ? ? ? ? ? ? ? ? ? $("user_name").focus();
? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? if(password.length==0){
? ? ? ? ? ? ? ? ? ? $("msg").innerHTML = "密碼不能為空!";
? ? ? ? ? ? ? ? ? ? $("password").focus();
? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if(password.length>15){
? ? ? ? ? ? ? ? ? ? $("msg").innerHTML = "密碼不能超過(guò)15個(gè)字符!";
? ? ? ? ? ? ? ? ? ? $("password").focus();
? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? if(password!=re_password ){
? ? ? ? ? ? ? ? ? ? $("msg").innerHTML="錯(cuò)誤!密碼不一致!";
? ? ? ? ? ? ? ? ? ? $("re_password").focus();
? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? console.log("注冊(cè)成功!");
? ? ? ? ? ? ? ? return true;
? ? ? ? ? ? }
? ? ? ? </script>
? ? </head>
? ? <body>
? ? ? ? <br />
? ? ? ? <span id="msg" style="color: red;"></span>
? ? ? ? <form onsubmit="return test()">
? ? ? ? ? ? <input placeholder="請(qǐng)輸入用戶名" id="user_name" /><br />
? ? ? ? ? ? <input placeholder="請(qǐng)輸入密碼" type="password" id="password"/><br />
? ? ? ? ? ? <input placeholder="請(qǐng)?jiān)俅屋斎朊艽a" type="password" id="re_password"/><br />
? ? ? ? ? ? <input type="submit" ?value="注冊(cè)" />
? ? ? ? </form>
? ? </body>
</html>

注:方法不唯一,此方法僅作參考。

下面對(duì)該代碼中的一些點(diǎn)進(jìn)行講解:

1. (id)的作用類似于C語(yǔ)言中的define,將所使用的功能或語(yǔ)句定義為一個(gè)符號(hào)或字符串,極大程度的簡(jiǎn)化代碼,你也可以不使用該方法,用document.getElementById()還原(id)的作用類似于C語(yǔ)言中的define,將所使用的功能或語(yǔ)句定義為一個(gè)符號(hào)或字符串,極大程度的簡(jiǎn)化代碼,你也可以不使用該方法,用document.getElementById()還原();
2. 定義的對(duì)象必須加.value使其為獲取的輸入的值,而下面聚焦時(shí),需要改用focus;
3. 在每個(gè)if語(yǔ)句中,最好再加一個(gè)返回值,提高代碼的運(yùn)行效果,innerHTML的作用是在瀏覽器頁(yè)面中顯示;
4. 在整個(gè)函數(shù)test()的最后,若return false,則為取消提交,若return true,則為正常提交;

大家可以自己嘗試一下,部分頁(yè)面如下:
直接運(yùn)行代碼如圖:

不輸入任何值,直接點(diǎn)擊注冊(cè),效果如圖:

全部按要求輸入后,會(huì)返回最初的樣子,是因?yàn)闆](méi)有指定成功輸入后跳轉(zhuǎn)的界面,自己設(shè)置即可。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論