快捷導(dǎo)航

JS簡單表單驗證功能完整示例

更新時間：2020年01月26日 12:48:32 作者：echo曦

這篇文章主要介紹了JS簡單表單驗證功能,結(jié)合完整實例形式分析了JavaScript表單驗證相關(guān)的字符串判斷、正則驗證、計算等相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了JS簡單表單驗證功能。分享給大家供大家參考，具體如下：

簡單js表單驗證demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Document</title>
  <script>
    //當用戶名獲取焦點時
    function focus_username(){
      document.getElementById("user_res").innerHTML="<font color='#f00'>請輸入用戶名</font>";
    }
    //當用戶名失去焦點時
    function blur_username(){
      var user_value=document.getElementsByName("username")[0].value;
      if(user_value.length===0){
      document.getElementById("user_res").innerHTML="<font color='#f00'>你沒有輸入用戶名</font>";
          return false;
          //判斷其長度是否在5~18之間 如果不在就提示用戶
      }else if(user_value.length<5||user_value.length>18)
      {
      document.getElementById("user_res").innerHTML="<font color='#f00'>用戶名長度必須在5-18之間</font>";
          return false;
      }else if(!checkUser(user_value)){
        //用戶名還有特殊符號
      document.getElementById("user_res").innerHTML="<font color='#f00'>用戶名含有特殊符號</font>";
          return false;
      }else{
        //用戶名合法
      document.getElementById("user_res").innerHTML="<font color='#00f'>用戶名合法</font>";
          return true;
      }
    }
    //密碼獲取焦點時
    function focus_password(){
      document.getElementById("pass_res").innerHTML="<font color='#f00'>請輸入密碼</font>";
    }
    //密碼失去焦點時
    function blur_password(){
      var user_value=document.getElementsByName("password")[0].value;
      if(user_value.length===0){
      document.getElementById("pass_res").innerHTML="<font color='#f00'>你沒有輸入密碼</font>";
          return false;
          //判斷其長度是否在5~18之間 如果不在就提示用戶
      }else if(user_value.length<5||user_value.length>18)
      {
      document.getElementById("pass_res").innerHTML="<font color='#f00'>用密碼長度必須在5-18之間</font>";
          return false;
      }else{
        //密碼合法
      document.getElementById("pass_res").innerHTML="<font color='#00f'>密碼合法</font>";
          return true;
      }
    }
     function checkUser(user){
      var arr=["<",">","#","?","%"];
      var arr_length=arr.length;
      var user_length=user.length;
      for(var i=0;i<arr_length;i++){
        for(var j=0;j<user_length;j++){
          if(arr[i]===user.charAt(j)){
            return false;
          }
        }
      }
      //表示用戶名合法
       return true;
     }
     //提交提交表單驗證
     function checkForm(){
      var user_flag=blur_username();
      var pass_flag=blur_password();
      if(user_flag && pass_flag){
        alert("提交合法表單");
         return true;
      }else{
        alert("輸入不合法");
        return false;
      }
     }
  </script>
</head>
<body>
　　　　　　　　　　　　　　　　　　　　　　　　　　<!--action 參數(shù)自定義跳轉(zhuǎn)頁面-->
  <form name='form1' onsubmit='return checkForm()' action='index.php'>
    <table width='600' align='center'>
      <tr>
        <td align='right' width='150'>用戶名:</td>
        <td width='100'><input type='text' name='username' onfocus='focus_username()' onblur = 'blur_username()'/></td>
        <td><span id="user_res"></span></td>
      </tr>
      <tr>
        <td align='right' width='100'>密碼:</td>
        <td width='100'><input type='password' name='password' onfocus='focus_password()' onblur = 'blur_password()'/></td>
        <td><span id="pass_res"></span></td>
      </tr>
      <tr>
        <td></td>
        <td><input type='submit' value='提交' /></td>
      </tr>
    </table>
  </form>
</body>
</html>

運行結(jié)果：