快捷導(dǎo)航

用JavaScrip正則表達(dá)式驗(yàn)證form表單的方法

更新時(shí)間：2017年05月22日 16:22:54 作者：boxyuan

這篇文章主要介紹了用JavaScrip正則表達(dá)式驗(yàn)證form表單的方法,需要的朋友可以參考下

document：標(biāo)簽之間

location：url

history：前進(jìn)后退

<html> 
 <head> 
  <script type="text/javascript"> 
   function show() 
   { 
    //彈出一個提示框 
    window.alert("hh"); 
   } 
   //將show方法綁定到按鈕上 
   window.onload=function() 
   { 
    //定位到按鈕 
    var buttonElement=document.forms[0].mybtn; 
    //動態(tài)綁定show方法 
    buttonElement.onclick=show; 
    //show如果加()則一加載網(wǎng)頁就彈出提示框 
   } 
   function validateForm() 
   { 
    var loginform=document.forms[1]; 
    var username=trim(loginform.username.value); 
    var password=trim(loginform.password.value); 
    var email=trim(loginform.email.value); 
//    alert("替代前長度："+username.length); 
//    username=trim(username); 
 //   alert("替代后長度："+username.length); 
    //判斷用戶名必填： 
    if(username.length==0) 
    { 
     alert("用戶必填"); 
    } 
    else if(!/^[a-zA-Z0-9]+$/.test(username)) 
    { 
     alert("用戶名必須是英文字母"); 
    } 
    else if(password.length==0) 
    { 
     alert("密碼必填"); 
    } 
    else if(!/^[0-9]{6}$/.test(password)) 
    { 
     alert("密碼必須為6位數(shù)字"); 
    } 
    else if(email.length==0) 
    { 
     alert("郵箱必填"); 
    } 
    else if(!/^\w+@\w+(\.\w+)+$/.test(email)) 
    { 
     alert("郵箱格式不正確"); 
    } 
    return false; 
   } 
   //自定義一個去空格的參數(shù) 
   function trim(s) 
   { 
    //s.REPLACE(正則表達(dá)式,替換的字符) 
    s=s.replace(/^\s*$/,""); 
    return s; 
   } 
  </script> 
  <style type="text/css"> 
   .myclass{ 
    position: absolute; 
    left: 400px; 
    top: 150px; 
   } 
  </style> 
 </head>  
 <body> 
  <div class="myclass"> 
  <form action="#" name="myform" method="post"> 
  <input type="button" value="單機(jī)" name="mybtn"/> 
  </form> 
  </div> 
  <!--登錄頁面的表單--> 
  <form action="#" name="loginform" method="post" onsubmit="return validateForm()"> 
  <table border="1" align="center"> 
   <caption>基于js的驗(yàn)證</caption> 
    <tr> 
     <th>用戶名：</th> 
     <td><input type="text" name="username"/></td> 
    </tr> 
    <tr> 
     <th>密碼：</th> 
     <td><input type="password" name="password"/></td> 
    </tr> 
    <tr> 
     <th>郵箱：</th> 
     <td><input type="text" name="email"/></td> 
    </tr> 
    <tr> 
     <td align="center" colspan="2"> 
      <input type="submit" value="提交" /> 
     </td> 
    </tr> 
  </table> 
  </form> 
 </body> 
</html>

以上所述是小編給大家介紹的用JavaScrip正則表達(dá)式驗(yàn)證form表單的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: