好程式設計師web前端分享前端 javascript 練習題

好程式設計師web前端分享 前端 javascript 練習題 ， 正規表示式

表單驗證

簡單的佈局：

< div class =" container "  id =" dv ">

   < label for =" qq "> Q Q </ label >< input type =" text "  id =" qq ">< span ></ span >< br />

   < label > 手機 </ label >< input type =" text "  id =" phone ">< span ></ span >< br />

   < label > 郵箱 </ label >< input type =" text "  id =" e-mail ">< span ></ span >< br />

   < label > 座機 </ label >< input type =" text "  id =" telephone ">< span ></ span >< br />

   < label > 姓名 </ label >< input type =" text "  id =" fullName ">< span ></ span >< br /></ div >

js程式碼：

   checkInput ( my$ ( "qq" ), /^\d{5,11}$/ );    //qq的

   checkInput ( my$ ( "phone" ), /^\d{11}$/ );      //手機

   checkInput ( my$ ( "e-mail" ), /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/ );       //郵箱

   checkInput ( my$ ( "telephone" ), /^\d{3,4}[-]\d{7,8}$/ );     //座機號碼

   checkInput ( my$ ( "fullName" ), /^[\u4e00-\u9fa5]{2,6}$/ );      //中文名字//透過正規表示式驗證當前的文字框是否匹配並顯示結果

   function   checkInput (input,reg)   {

     //文字框註冊失去焦點的事件

    input . onblur = function   ()   {

       if ( reg . test ( this . value )){

         this . nextElementSibling . innerText = "正確了" ;

         this . nextElementSibling . style . color = "green" ;

       } else {

         this . nextElementSibling . innerText = "讓你得瑟,錯了吧" ;

         this . nextElementSibling . style . color = "red" ;

       }

     };

   }