HTML5+Javascript表單註冊和驗證練習

阿新 • • 發佈：2018-12-09

這裡寫圖片描述

//html5.html
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表單註冊和驗證</title>
    <script type="text/javascript" src="hello.js"></script>
</head>
<body>
    <form name="form1"  id="form1" method="post" 
 action="reg2.jsp">
    <table border="1"  align="center" width="350">
        <tr align="middle"><th colSpan=2 height=24>新使用者註冊</th></tr>
        <tr>
            <td width="40%">
                <b>用&nbsp;戶&nbsp;名</b></td>
            <td 
 width="60%"> <input type="text" name="uid" size="30" maxlength="10"></td>
        </tr>

        <tr>
            <td><b>性&nbsp;&nbsp;&nbsp;&nbsp;別</b>:</td>
            <td>
             <input type="radio" checked="CHECKED" name 
="gender" value="boy" >男孩
             <input type="radio" name="gender" value="girl">女孩
            </td>
        </tr>
        <tr>
              <td><B>密&nbsp;&nbsp;&nbsp;&nbsp;碼</B>:</td>
              <td><input type="password" name="psw1" size="32"></td>
        </tr>

        <tr>
             <td><B>確認密碼</B></td>
             <td><input type="password" name="psw2" size="32"></td>     
        </tr>

        <tr>
             <td><B>密碼問題</B></td>
             <td><input type="question" name="text" size="30"></td>     
        </tr>

        <tr>
             <td><B>問題答案</B></td>
             <td><input type="text" name="answer"  size="30"></td>
        </tr>

        <tr>
             <td><B>email</B></td>
             <td><input type="text" name="email" size="30" maxlength="50"></td>
        </tr>
        <tr>
             <td><B>聯絡電話</B></td>
             <td><input type=" text" name="tel" size="30" maxlength="50"></td>
        </tr>

        <tr>
            <td><b>職&nbsp;&nbsp;&nbsp;&nbsp;業</b>:</td>
            <td>  <select   name="career"  class="input1">
                   <option  value="student"  selected="selected">學生</option>
                   <option  value="teacher">老師</option>
                   <option  value="worker">工人</option>
                   <option  value="famer">農民</option>
                   <option  value="business">商人</option>
                   </select> 
            </td>
        </tr>
         <tr>
            <td></td>
            <td>
                   <input type="submit" value="註冊" name=submit onclick="return check()">
                  <input type="reset"  value="清除" name=submit2></option>
            </td>
         </tr> 
       </table>
    </form>
</body>
</html>

//hello.js

function showEnter(){
       alert("尊敬的客戶，歡迎您光臨本店");
}

function showLeave(){

      alert("歡迎下次光臨!");
}

//頁面載入事件時呼叫函式
window.onload = showEnter;

//頁面關閉事件觸發時呼叫函式
window.onbeforeunload = showLeave;



function isEmail(theStr)
{
     var atindex = theStr.indexOf('@');
     var dotindex = theStr.indexOf('.',atindex);
     var flag = true;
     thesub = theStr.substring(0,dotindex + 1);

     if((atindex < 1) || (atindex != theStr.lastIndexOf('@')) || (dotindex < atindex + 2) || (theStr.length <= thesub.length))
     {
         flag = false;
     }else
     {
         flag = true;
     }
     return(flag);
}




function check()
{
    fr = document.form1;
    if(fr.uid.value == "") 
    {
      alert("使用者ID必須要填寫！");
       fr.uid.focus();
       return false;
    }
    if((fr.psw1.value != "") || (fr.psw2.value != ""))
    {
      if(fr.psw1.value != fr.psw2.value)
      {
          alert("密碼不一致，請重新輸入並驗證密碼！");
          fr.psw1.focus();
          return false;
      }
  }
  else{
       alert("密碼不能為空！");
       fr.psw1.focus();
       return false;
  }
  if(fr.gender.value == "")
  {
     alert("性別必須要填寫!");
     fr.name.focus();
     return false;
  }

   if(fr.email.value != "")
   {
       if(!isEmail(fr.email.value))
       {
           alert("請輸入正確的郵件名稱");
           fr.email.focus();
          return false;
       }
   }
  fr.submit();
}

HTML5+Javascript表單註冊和驗證練習

//html5.html <!DOCTYPE html> <!DOCTYPE html> <html> <head> <meta c

JavaScript 表單、約束驗證 DOM 屬性

reference 輸入數據 tom 無效 ntb validity 偽類選擇器 htm ons 1.JavaScript 表單 1.1JavaScript 表單驗證 HTML 表單驗證可以通過 JavaScript 來完成。以下實例代碼用於判斷表單字段(fname)值

jquery ajax 實現表單提交和驗證表單

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <title>$.ajax()方法傳送請

表單補充，labed標籤，html5新增表單元素和語義

<h2>label標籤的使用</h2>  <label>使用者名稱:<input type="text"></la

JavaScript表單驗證和正則表達式

sco 集合 innertext ner rep tell 一次臨時軟件 JavaScript表單驗證分為四類：　　1.非空驗證　　　　常用於用戶名等　　2.相等驗證　　　　常用於驗證兩次輸入的密碼　　3.範圍驗證　　　　常用於年齡等　　

Java Script 第10章 JavaScript表單驗證

cnblogs ges scrip isp asc ima javascrip lock 分享 Java Script 第10章 JavaScript表單驗證

JavaScript表單驗證

號碼網址處理漢字 dsm 嵌套 15位使用修正匹配中文字符的正則表達式： [u4e00-u9fa5] 評註：匹配中文還真是個頭疼的事。有了這個表達式就好辦了匹配雙字節字符(包含漢字在內)：[^x00-xff] 評註：能夠用來計算字符串的長度（一個雙字節字符長

15個最佳的 JavaScript 表單驗證庫

就是 www. 信用卡號碼大型端口共享魯棒性 max 客戶端驗證在任何項目都是不夠的，因為 JavaScript 可以直接忽略，人們可以提交請求到服務器。然而這並不意味著客戶端驗證都沒必要了，很多時候我們需要在用戶提交到服務器之前給予提示。JavaScript

JavaScript 表單驗證正則表達式大全

提取 ascii 需求格式 mat 則表達式位數 ava 英文字母 1 JavaScript 表單驗證正則表達式大全【轉載】 3 4 5 6 匹配中文字符的正則表達式： [u4e00-u9fa5] 7 評註：匹配中文還真是個頭疼的事，

JavaScript表單驗證登錄

inpu tex 後端服務 false asc 輸入 user var .get 　　在登錄時，通常是將輸入的信息原封不動的傳送給後端的處理程序，然後處理之後返回結果，那麽可能後端服務器的壓力就很大，所以可以先在提交表單之前進行一些簡單的檢測，然後再發給後端，減小服務器的一

html5新增表單控件和表單屬性

tps 特性普通 mit form表單 pan 頁面 inpu data 新的輸入性表單控件: email：電子郵箱文本框,跟普通的沒什麽區別 - 當輸入不是郵箱的時候,驗證不通過 - 移動端的鍵盤會發生變化 tel：電話號碼 url：網頁

JavaScript表單驗證的相關事件

1．表單元素： a) Input標籤：文字框(text)—密碼框（password）—單選—複選框—檔案—影象—隱藏—按鈕—提交—重置，表單元素都在input標籤 b) &n

JavaScript 表單驗證沒有執行的幾個小問題

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <script> funct

HTML5的表單新增屬性和元素

1 表單新增屬性 1.1 表單內元素的 form 屬性（1）作用在HTML4中，表單內的從屬元素必須書寫在表單內部，而在HTML5中，可以把他們書寫在頁面的任何地方，然後為該元素指定一個form屬性，屬性值為該表單的id，這樣就可以宣告該元素從屬於指定表單了。 <form

ajax提交表單資訊+手機驗證碼註冊

1.手機驗證碼用的是秒嘀科技的手機簡訊功能。 2、前端頁面 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <

華麗的CSS3+HTML5表單客戶端驗證

最近學習CSS3，看到一個很好的表單驗證，和大家一起仿作一下。本資源已上傳的我的CSDN 預覽效果： 1.首先從DREAMWEAVER 上把W3C標準的HTML空檔案拿過來 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

Java 表單註冊常用正則表示式驗證工具類，常用正則表示式大集合。 1. 電話號碼 2. 郵編 3. QQ 4. E-mail 5. 手機號碼 ……

/* Java 表單註冊常用正則表示式驗證工具類，常用正則表示式大集合。 1. 電話號碼 2. 郵編 3. QQ 4. E-mail 5. 手機號碼 6. URL 7. 是否為數字 8. 是否為中文 9. 身份證 10. 域名 11. IP*/ pack

html5 原生表單驗證+ajax 提交

html5 原生表單驗證 + ajax 提交無需任何第三方驗證框架通過pattern 和 oninvalid 屬性統一驗證表單。 <!DOCTYPE html> <html> <head>

[JavaWeb]表單提交的驗證(onSubmit和function的應用)

在提交表單的時候，可能有些使用者的不規範操作導致表單資料有的漏填。所以要先判斷表單的資料是否為空。 <script type="text/javascript"> function c

HTML5+Javascript表單註冊和驗證練習

相關推薦