HTML入門之javascript處理表單

javascript入門

在上一個HTML入門中 我寫了一個注冊頁面 現(xiàn)實情況下 我們就需要 對表單進行驗證 比如說 輸入框不能為空 兩次輸入的密碼是否一致 還有單選按鈕和復選框必須選一個的處理方式

簡單的處理例子


    <head>
        <script language="javascript">
            
            var num;
            num=7;
            //彈出消息框
            //alert(num);
        
                if(num%2==0){
                    alert(num+"是偶數(shù)");
                }else{
                    alert(num+"不是偶數(shù)");
            
                }           
        </script>
    </head>
    <body></body>
</html>

運行結(jié)果:

Paste_Image.png

這段代碼的幾點小知識點
<script language = "javascript"></script>

  • 這里設(shè)置了編寫的語言是javascript
  • var 在javascript里是可變參數(shù) 即可以代表int或者char等等 長度也不需要設(shè)定
  • alert();windows.alert(); 這里 windows可以省略 是彈出消息框

JavaSprict處理表單


這里我寫了一個注冊頁面 一般注冊頁面 我們 不允許提交空的信息 那樣是沒有意義的
javascript處理注冊信息不能為空等

    <head>
        <script language="javascript">
            function ckFrm(){
                
                var uname = window.document.frm.uname.value;
                if(uname==""){
                    alert("用戶名不能為空!");
                    document.frm.uname.focus();
                    return false ;
                }
                var pas = document.frm.pas;
                var pas2 = document.frm.pas2;
                if(pas.value=="") {
                    alert("密碼不能為空");
                    document.frm.pas.focus();
                    return false;
                }
                if(pas.value!=pas2.value) {
                    alert("兩次輸入的密碼不一致");
                    return false;
                }
            
            
                if(!(document.frm.gender[0].checked || document.frm.gender[1].checked)) {
                    alert("總得選個性別吧");
                    return false;
                }
                
                var habbyArr = document.frm.habby;
                var flag = false;
                for(var i;i<habbyArr.length;i++) {
                    if(habbyArr[i].checked){
                    flag = true;
                    }
                if(!flag) {
                    alert("選擇一個你喜歡的吧");
                }
                return flag;
            }
        }
        
        </script>
    </head>

這上面部分實現(xiàn)處理部分小知識點

  • document.frm.name 是根據(jù)屬性值的name屬性選取內(nèi)容 并判斷
  • 這里涉及到了一個復選框的不能為空判斷 由于復選框的name值都一樣 這里 就讓我們具體的了解到了 復選框是根據(jù)數(shù)組存儲的用數(shù)組的.length屬性來判斷document.frm.habby[i] 上代碼中for循環(huán)可以看一下
    <form name="frm" action="Demo.html" method="post"  onsubmit="return ckFrm()"> 
        <table width="400" border="1" cellspacing="0" cellpadding="3">
            <tr>
                <td>用戶名:</td>
                <td> <input type="text" name="uname"/> </td>
            </tr>
            <tr>
                <td>密碼:</td>
                <td><input type="password" name="pas"/> </td>
            </tr>
            <tr>
                <td>確認密碼:</td>
                <td><input type="password" name="pas2"/> </td>
            </tr>
            <tr>
                <td>性別:</td>
                <td>
                    <input type="radio" name="gender" value="female"/>女 
                    <input type="radio" name="gender" value="male"/>男
                </td>
            </tr>
            <tr>
                <td>愛好:</td>        
                <td><input type="checkbox" name="habby" value="dance"/>跳舞
                    <input type="checkbox" name="hobby" value="song"/>唱歌
                    <input type="checkbox" name="hobby" value="sport"/>運動
                    <input type="checkbox" name="hobby" value="read"/>讀書 
                </td>
            </tr>
            <tr>
                <td>星座</td>
                <td>
                    <select name="str" >
                        <option value="-1" >--請選擇--</option>
                        <option value="1">摩羯座</option>
                    </select>
                </td>
            </tr>
            <tr>
                
                <th colspan="2">
                <input type="submit" value=" 注 冊 "/>   
                <input type="reset" value=" 重 置 "/>
                </th>
            </tr>
        </table>
    </form> 
</body>
</html>

這是頁面部分 乖寶寶 堅持看完 就一點點啦
小知識點:

  • 昨天更的是簡單的表格 這里將表格與<input/>結(jié)合在一起 - 這里涉及到了 單選框 性別那一欄i type=radio - 復選框 愛好那一欄type=checkbox
  • 下拉選擇框 星座那一欄<select></select>標簽實現(xiàn)- 按鈕用了submit 和 reset
  • form表單處理 那一欄 onsubmit="return ckFrm()" 點submit后調(diào)用函數(shù)
    實現(xiàn)結(jié)果:
    ![Uploading Paste_Image_542744.png . . .]
    Paste_Image.png
Paste_Image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末惶看,一起剝皮案震驚了整個濱河市篙顺,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌拌禾,老刑警劉巖取胎,帶你破解...
    沈念sama閱讀 222,865評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異湃窍,居然都是意外死亡闻蛀,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評論 3 399
  • 文/潘曉璐 我一進店門您市,熙熙樓的掌柜王于貴愁眉苦臉地迎上來觉痛,“玉大人,你說我怎么就攤上這事茵休⌒桨簦” “怎么了?”我有些...
    開封第一講書人閱讀 169,631評論 0 364
  • 文/不壞的土叔 我叫張陵榕莺,是天一觀的道長俐芯。 經(jīng)常有香客問我,道長钉鸯,這世上最難降的妖魔是什么吧史? 我笑而不...
    開封第一講書人閱讀 60,199評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮唠雕,結(jié)果婚禮上贸营,老公的妹妹穿的比我還像新娘。我一直安慰自己岩睁,他們只是感情好钞脂,可當我...
    茶點故事閱讀 69,196評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著笙僚,像睡著了一般芳肌。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上肋层,一...
    開封第一講書人閱讀 52,793評論 1 314
  • 那天亿笤,我揣著相機與錄音,去河邊找鬼栋猖。 笑死净薛,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的蒲拉。 我是一名探鬼主播肃拜,決...
    沈念sama閱讀 41,221評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼痴腌,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了燃领?” 一聲冷哼從身側(cè)響起士聪,我...
    開封第一講書人閱讀 40,174評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎猛蔽,沒想到半個月后剥悟,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,699評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡曼库,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,770評論 3 343
  • 正文 我和宋清朗相戀三年区岗,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片毁枯。...
    茶點故事閱讀 40,918評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡慈缔,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出种玛,到底是詐尸還是另有隱情藐鹤,我是刑警寧澤,帶...
    沈念sama閱讀 36,573評論 5 351
  • 正文 年R本政府宣布赂韵,位于F島的核電站教藻,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏右锨。R本人自食惡果不足惜括堤,卻給世界環(huán)境...
    茶點故事閱讀 42,255評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望绍移。 院中可真熱鬧悄窃,春花似錦、人聲如沸蹂窖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽瞬测。三九已至横媚,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間月趟,已是汗流浹背灯蝴。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留孝宗,地道東北人穷躁。 一個月前我還...
    沈念sama閱讀 49,364評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像因妇,于是被迫代替她去往敵國和親问潭。 傳聞我的和親對象是個殘疾皇子猿诸,可洞房花燭夜當晚...
    茶點故事閱讀 45,926評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 本人做php的,最近發(fā)現(xiàn)JS真的是博大精深啊,比PHP難.在HTML中,表單是由form元素來表示的狡忙,但是在jav...
    linfree閱讀 2,172評論 3 17
  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品梳虽,去做同樣的事情,實現(xiàn)同樣的效果;這時候需要使用工廠模式灾茁。簡單...
    舟漁行舟閱讀 7,781評論 2 17
  • 今天無意間看到了這則新聞怖辆,俗稱“最霸氣的辭職信”,大概內(nèi)容在工作期間做微商賺了180萬删顶,等于在醫(yī)院工作30年的薪水...
    晨陽聊電影閱讀 417評論 0 2
  • 前兩天去北京出差,借著我進京的機會淑廊,在京的大學同學就相約聚了一下逗余,十幾個人也是好久沒有聚了,把酒言歡季惩,特別高興录粱。席...
    精睿君閱讀 878評論 15 23
  • 詩,是人類精神凝聚所產(chǎn)生的高雅文學画拾;酒啥繁,是人類物質(zhì)凝結(jié)所生產(chǎn)的美味瓊漿。從遠古至現(xiàn)代青抛,詩與酒就交織在一起旗闽,結(jié)下了不...
    徐小賤閱讀 691評論 0 2