2. 程式人生 > >javaEE (三）javaweb_JavaScript (1)表單校驗

javaEE (三）javaweb_JavaScript (1)表單校驗

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

Date：2018/11/13

1：表單校驗

效果圖：在表單中輸入的資訊不符合時候，會彈窗警告。

在這裡插入圖片描述 原始碼：

<!-- 1：將事件函式嵌入到相應的標籤中(如監測提交的onsubmit = “return function()") -->
<!-- 2:在head中新增<script></script>,把函式寫在script中，function functionname(){}; -->
<!-- 3:相應的標籤中新增id屬性，用document.getElementById("repassword").value來提取對應的資訊； -->
<!-- 4:我習慣在函式一開始就把下面要用的變數var 定義好；-->
<!-- 5：郵箱的正則表示式為(/^([a-zA-Z0-9_-])
 
[email protected]([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/),驗證郵箱要用!testemail.test(getemail)； -->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>table+form</title>
		<script>
			function checkForm(){
				var name = document.getElementById("name"
 
).value;
				var password = document.getElementById("password").value;
				var repassword = document.getElementById("repassword").value;
				var getemail = document.getElementById("email").value;
				var testemail = /^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
				
				if(name == "")
 
{
					alert("名字輸入不能為空!");
					
					return false;
					}else{
						alert("hello " + name + "先生!");
					}	
					
				if(password == ""){
						alert("密碼輸入不能為空!");
						return false;
						}
									
				if(password != repassword){
						alert("確認密碼和輸入密碼不一致!");
						return false;
						}	
						
				
				if(!testemail.test(getemail)){
					alert("郵箱格式不對!");
					return false;
				}					
			}
			
		</script>
	</head>
	<body>
		<table border="1px" width="1300px"  cellpadding="0px" cellspacing="opx" align="center">
			<!-- 第一行廣告 -->
			<tr>
				<td>
					<!--巢狀一個一行三列的表格-->
					<table border="1px" width="100%">
						<tr height="50px">
							<td width="33.3%">
								<img src="../img/logo2.png" height="47px" />
							</td>
							<td width="33.3%">
								<img src="../img/header.png" height="47px" />
							</td>
							<td width="33.3%">
								<a href="#">登入</a>
								<a href="#">註冊</a>
								<a href="#">購物車</a>
							</td>
						</tr>
					</table>
				</td>				
			</tr>

			<!-- 第二行超連結 -->
			<tr bgcolor="black">
				<td colspan="7"> 
				<a href="#" ><font size="5" color="red">首頁</font></a>  &nbsp; &nbsp; &nbsp;
				<a href="#"><font color="red">手機數碼</font></a> 
				<a href="#">電腦辦公</a> <a href="#">鞋靴箱包</a> 
				<a href="#">家用電器</a></td>
			</tr>
			<!-- 巢狀一個十行二列的登錄檔單 -->
			<tr >
				<td  height="600px"    background="../img/111.jpg" >
					<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
					<table border="1px"  width="750px" height="400px"  cellpadding="0px" cellspacing="0px" align="center">
						<tr>
							<td colspan="2">
								<font size="4">會員註冊&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;USER REGISTER</font>
							</td>
							
						</tr>
						
						<tr>
							<td>
								<font>使用者名稱 </font>
							</td>
							<td>
								<input type="text" name="使用者名稱" placeholder="請輸入使用者名稱" id="name"/>
							</td>
						</tr>
						
						<tr>
							<td>
								<font>密碼</font>
							</td>
							<td>
								<input type="text" name="password" placeholder="請輸入密碼"  id="password"/>
							</td>
						</tr>
						
						<tr>
							<td>
								<font>確認密碼</font>
							</td>
							<td>
								<input type="password" name="newpassword"   placeholder="請確認密碼" id="repassword"/>
							</td>
						</tr>
						
						<tr>
							<td>
								<font>Emaile</font>
							</td>
							<td>
								<input type="text" name="email" placeholder="請輸入email" id="email"/>
							</td>
						</tr>
						
						<tr>
							<td>
								<font>姓名</font>
							</td>
							<td>
								<input type="text" name="name" placeholder="請輸入姓名"/>
							</td>
						</tr>
						
						<tr>
							<td>
								<font>性別</font>
							</td>
							<td>
								<input  type="radio" name="man" value="man"/>man
								<input  type="radio" name="woman" value="woman"/>man
							</td>
						</tr>
						
						<tr>
							<td>
								<font>出生日期</font>
							</td>
							<td>
								<input type="text" name="出生日期" placeholder="請輸入出生日期"/>
							</td>
						</tr>
						
						<tr>
							<td>
								<font>驗證碼</font>
							</td>
							<td>
								<input type="text" name="驗證碼" placeholder="請輸入驗證碼"/>
								<img src="../img/yanzhengma.png" />
							</td>
						</tr>
						
						<tr>
							<td>
								<font>註冊</font>
							</td>
							<td>
								<input type="submit" name="提交按鈕" />
							</td>
						</tr>
		
					</table>
					</form>
				</td>
			</tr>
			
			<!-- 第四行廣告 -->
			<tr>
				<td colspan="7"><img src="../img/footer.jpg"  width="100%"/></td>
			</tr>
			<!-- 超連結 -->
			<tr>
				<td colspan="7" align="center">
				<a href="#" >關於我們</a> <a href="#">聯絡我們</a> <a href="#">招賢納士</a> <a href="#">法律宣告</a> <a href="#">友情連結</a> <a href="#">支付方式</a> <a href="#" >配送方式</a> <a href="#" >服務宣告</a> <a href="#" >廣告宣告</a> 
				<p> 南京郵電大學PizAn 版權所有</p>
				</td>
			</tr>		
		</table>
	</body>
</html>

相關推薦

javaEE (三）javaweb_JavaScript (1)表單校驗

Date：2018/11/13 1：表單校驗 效果圖：在表單中輸入的資訊不符合時候，會彈窗警告。 原始碼： <!-- 1：將事件函式嵌入到相應的標籤中(如監測提交的onsubmit = “return function()") --> <!-

javaEE (四）javaweb_JavaScript (5) 表單全選

Date：2018/11/17 效果如圖：點選一個，其他全選，可以復原： 原始碼： <!-- 1、確定事件：onclick 繫結到複選框裡面； --> <!-- 2、獲取複選框：var checkAllEle = document.getE

Java Web開發總結（三） —— request接收表單提交中文參數亂碼問題

字符串 public servlet 參數 byte[] 解決 操作 get span 1、以POST方式提交表單中文參數的亂碼問題 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"

第11講 11.1 SpringBoot表單校驗

1，複製一個專案，改名為SpringDataValid，關閉其他專案， 以防干擾。右鍵專案，Maven，Update Project...   2，新建一個數據庫，db_studentinfo,修改配置檔案裡的資料庫連線。 server:  

後臺表單校驗（JSR303）

轉載自：https://www.ibm.com/developerworks/cn/java/j-lo-jsr303/   JSR 303 - Bean Validation 介紹及最佳實踐 安 大鵬, 楊 樂, 和 翁 志弘 2011 年 5 月 24 日釋出

JavaScript進階（四）form表單校驗

前言       本章將學習表單的校驗，作為一個前面學習的總結！ 方法 1.概念 我們知道，在學習HTML的時候，我們做了一個非常醜陋的表單，裡面有文字框、單選鈕、複選框等一系列表單元素。這些都是隨便填寫的，沒有加任何的校驗。也就是說正常情況下我們需

javascript封裝（表單校驗）

先上圖： 產品的需求是點選框內輸入時不提示錯誤，等滑鼠離開時校驗錯誤，那我就這樣寫 //增加提示程式碼 $.prototype.accounterror=function(info){ $(this).next("span").remove(); $(this).aft

angularJs 表單校驗 （手機號，使用者名稱，密碼等）

<!DOCTYPE html> <html ng-app="angularFormCheckModule">     <head>         <meta charset="UTF-8">

javaEE (三）javaweb_JavaScript (2)輪播圖片+彈出廣告

Day：2018/11/13 在網頁上輪圖片和彈出廣告： 原始碼 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例

angular1.0 表單校驗的一個坑（巢狀表單校驗）

 今天看阿里雲分享的一個表單校驗的視訊，本來想著做了很多校驗了，也沒有遇到什麼坑，看來還是自己做的太少~ 這樣的,我手敲記錄下吧： <form name="userForm" novalidate> 一定要有name novalidate是用來禁止瀏覽器的校驗

Javascript 表單校驗的三種方法

<html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title></title>     <style type="text/css">        

JQuery中內容操作函數、validation表單校驗

調用方法 scrip 註意 語言 rul asc javascrip 最前面插入 獲取 JQuery:內容體拼接（可以直接拼接元素節點和內容節點） 　　JQuery實現： 　　　　方案1：A.append(B); == B.appendTo(A);A的後面拼接B 　　　

表單校驗常用原生js庫

rim pro fun 常用 ltrim turn () js庫 his 1.字符串去除左右空格繼承形式// 除去左右空格String.prototype.Trim = function() { return this.replace(/(^\s*)|(\s*$)/g,

常用表單校驗

通過 let div 返回 letter 常用 fun als 英文 /*用途：檢查輸入字符串是否只由英文字母和數字組成 輸入：obj 字符串 返回：如果通過驗證返回true,否則返回false*/ function isNumberOrLetter(obj){

Angular 表單校驗

result tex lar uil img 輸入 password value mod 1.html <form [formGroup]="formModel" (submit)="submit()"> <div> 用戶名

JavaScript學習——完善註冊頁面表單校驗

函數 提示 步驟 表格 ges function img 但是 最終 1、之前我們已經使用彈出框的方式實現了表單校驗的功能，但是此種方式用戶體驗效果很差 我們希望做成把提示信息和校驗結果放在輸入欄的後面。 2、步驟分析 （此案例基於HTML&CSS——網站註冊頁面實

表單校驗的值$valid、$invalid、$pristine和$dirty

狀態 ng- 愛好 定義 ida from 用戶操作 num $set angular內置了一套表單校驗，其中包含幾個狀態 ① valid、invalid、pristine和dirty 　　valid標記表單元素有效； 　　invalid標記表單元素無效； 　　pristi

表單校驗

長度 username clas 電話 增加 use rul action pwd 1、form表單驗證 <!DOCTYPE html> <html> <head lang="en"> <meta ch

Android註解方式實現表單校驗

view print tde try success lte ise rdb emp 在開發中總會遇到輸入框的輸入規則限制 比如 電話輸入框電話號碼的校驗，密碼規則的校驗等 ，我們通常做法是提交操作時對每個輸入框的輸入內容進行校驗，很多的if else ，代碼看起來很亂，

案例15-基本的表單校驗使用validate

true 插件 control 位置 mes lin jquery插件 相關 顯示中文 1 導入插件 <!--引入jquery相關文件 --> <script src="js/jquery-1.11.3.min.js" type="text/ja