js表單驗證

數(shù)據(jù)有效性,安全性驗證 3層

  • 客戶端 js腳本驗證
  • 服務(wù)端 java-Servlet 服務(wù)器語言
  • 數(shù)據(jù)庫 數(shù)據(jù)約束。

onsubmit 事件(表單提交事件)搅吁,提交表單時觸發(fā)。onsubmit會接受 true或false返回值落午。返回true提交當(dāng)前表單谎懦,返回false 不提交表單

使用getElementById()獲取Email的值
使用字符串方法indexOf( ) 判斷Email的值是否包含“@”和“.”符號。
根據(jù)函數(shù)返回值是true還是flase來決定是否提交表單

var mail=document.getElementById("email").value;
if(mail.indexOf("@")==-1){
  alert("Email格式不正確\n必須包含@");
   return false;   
}

使用String對象的length屬性驗證密碼的長度

var pwd=document.getElementById("pwd").value;
if(pwd.length<6){
      alert("密碼必須等于或大于6個字符");
      return false; 
}

驗證兩次輸入密碼是否一致

var repwd=document.getElementById("repwd").value;
if(pwd!=repwd){
     alert("兩次輸入的密碼不一致");
     return false;   
}

使用length屬性獲取文本長度溃斋,使用for循環(huán)和substring()方法依次截斷單個字符界拦,判斷每個字符是否是數(shù)字

var user=document.getElementById("user").value;
    for(var i=0;i<user.length;i++){
    var j=user.substring(i,i+1)
    if(isNaN(j)==false){
       alert("姓名中不能包含數(shù)字");
       return false;   
    }
    }
  • 事件
    • onblur 失去焦點,當(dāng)光標(biāo)離開某個文本框時觸發(fā)
    • onfocus 獲得焦點盐类,當(dāng)光標(biāo)進入某個文本框時觸發(fā)
    • onkeypress 某個鍵盤按鍵被按下并松開
  • 方法
    • blur() 從文本域中移開焦點
    • focus() 在文本域中設(shè)置焦點寞奸,即獲得鼠標(biāo)光標(biāo)
    • select() 選取文本域中的內(nèi)容
  • 屬性
    • id 設(shè)置或返回文本域的id

    • value 設(shè)置或返回文本域的balue屬性的值

        function clearText(){
            var mail=document.getElementById("email");
            if(mail.value=="請輸入正確的電子郵箱"){
            mail.value="";
            mail.style.borderColor="#ff0000";
            }
        }
        ……
        <td>Email:<input id="email" type="text"  class="inputs" value="請輸入正確的電子郵箱" onfocus="clearText()"/></td>
      </tr>
      
      
        if(mail.indexOf("@")==-1 || mail.indexOf(".")==-1){
            alert("Email格式不正確\n必須包含符號@和.");
            document.getElementById("email").select();
            return false;
        }
      
      
        function checkEmail(){
            var mail= document.getElementById ("email");
            var divID= document.getElementById ("DivEmail");
            divID.innerHTML="";
            if(mail.value==""){
                 divID.innerHTML="Email不能為空";
                 return false;
            }
        }
        ……
      

      <input id="email" type="text" class="inputs" onblur="checkEmail()"/>
      <div class="red" id="DivEmail"></div>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市在跳,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌隐岛,老刑警劉巖猫妙,帶你破解...
    沈念sama閱讀 219,427評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異聚凹,居然都是意外死亡割坠,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評論 3 395
  • 文/潘曉璐 我一進店門妒牙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來彼哼,“玉大人,你說我怎么就攤上這事湘今「抑欤” “怎么了?”我有些...
    開封第一講書人閱讀 165,747評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長拴签。 經(jīng)常有香客問我孝常,道長,這世上最難降的妖魔是什么蚓哩? 我笑而不...
    開封第一講書人閱讀 58,939評論 1 295
  • 正文 為了忘掉前任构灸,我火速辦了婚禮,結(jié)果婚禮上岸梨,老公的妹妹穿的比我還像新娘喜颁。我一直安慰自己,他們只是感情好曹阔,可當(dāng)我...
    茶點故事閱讀 67,955評論 6 392
  • 文/花漫 我一把揭開白布洛巢。 她就那樣靜靜地躺著,像睡著了一般次兆。 火紅的嫁衣襯著肌膚如雪稿茉。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,737評論 1 305
  • 那天芥炭,我揣著相機與錄音漓库,去河邊找鬼。 笑死园蝠,一個胖子當(dāng)著我的面吹牛渺蒿,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播彪薛,決...
    沈念sama閱讀 40,448評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼茂装,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了善延?” 一聲冷哼從身側(cè)響起少态,我...
    開封第一講書人閱讀 39,352評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎易遣,沒想到半個月后彼妻,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,834評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡豆茫,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,992評論 3 338
  • 正文 我和宋清朗相戀三年侨歉,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片揩魂。...
    茶點故事閱讀 40,133評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡幽邓,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出火脉,到底是詐尸還是另有隱情牵舵,我是刑警寧澤柒啤,帶...
    沈念sama閱讀 35,815評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站棋枕,受9級特大地震影響白修,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜重斑,卻給世界環(huán)境...
    茶點故事閱讀 41,477評論 3 331
  • 文/蒙蒙 一兵睛、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧窥浪,春花似錦祖很、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,022評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至骨稿,卻和暖如春笨鸡,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背坦冠。 一陣腳步聲響...
    開封第一講書人閱讀 33,147評論 1 272
  • 我被黑心中介騙來泰國打工形耗, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人辙浑。 一個月前我還...
    沈念sama閱讀 48,398評論 3 373
  • 正文 我出身青樓激涤,卻偏偏與公主長得像,于是被迫代替她去往敵國和親判呕。 傳聞我的和親對象是個殘疾皇子倦踢,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,077評論 2 355

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

  • 變量 JavaScript的變量為弱類型變量,可以用來保存任何類型的數(shù)據(jù)侠草。 var 可以聲明各種類型的數(shù)據(jù) 在Ja...
    閆子揚閱讀 537評論 0 1
  • 前言 之前忙于做各種事情辱挥,已經(jīng)很久沒寫過文章,最近接的一個學(xué)校的網(wǎng)站項目梦抢,近期被人用自動腳本攻破了(笑...)般贼,因...
    cduyzh閱讀 2,841評論 8 57
  • 1.驗證是否郵箱,是返回true奥吩,否返回false 2.驗證用戶名(長度3-20位,只能是字母開頭蕊梧,并且是數(shù)字霞赫,字...
    AISpider閱讀 219評論 0 0
  • 事件源對象 event.srcElement.tagName event.srcElement.type 捕獲釋放...
    孤魂草閱讀 890評論 0 0
  • zhouios閱讀 1,089評論 0 0