2. 程式人生 > >validate完成註冊頁面表單校驗

validate完成註冊頁面表單校驗

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

需要引入的包都在程式碼裡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>網站註冊頁面</title>
		<style>
			#contanier{
				border: 0px solid white;
				width: 1300px;
				margin: auto;
			}
			
			#top{
				border: 0px solid white;
				width: 100%;
				height: 50px;
			}
			#menu{
				border: 0px solid white;
				height: 40px;
				background-color: black;
				padding-top: 10px;
				margin-bottom: 15px;
				margin-top: 10px;
			}
			.top{
				border: 0px solid white;
				width: 405px;
				height: 100%;
				float: left;
				padding-left: 25px;
			}
			#top1{
				padding-top: 15px;
			}
			#bottom{
				margin-top: 13px;
				text-align: center;
			}
			
			#form{
				height: 500px;
				padding-top: 70px;
				background-image: url(../img/regist_bg.jpg);
				margin-bottom: 10px;
			}
			a{
				text-decoration: none;
			}
			
			label.error{
				background:url(../img/unchecked.gif) no-repeat 10px 3px;
				padding-left: 30px;
				font-family:georgia;
				font-size: 15px;
				font-style: normal;
				color: red;
			}
			
			label.success{
				background:url(../img/checked.gif) no-repeat 10px 3px;
				padding-left: 30px;
			}
			
			#father{
				border: 0px solid white;
				padding-left: 307px;
			}
			
			#form2{
				border: 5px solid gray;
				width: 660px;
				height: 450px;
			}
			
		</style>
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<!--引入validate外掛js檔案-->
		<script type="text/javascript" src="../js/jquery.validate.min.js" ></script>
		<!--引入國際化js檔案-->
		<script type="text/javascript" src="../js/messages_zh.js" ></script>
		<script>
			$(function(){
				$("#registForm").validate({
					rules:{
						user:{
							required:true,
							minlength:3
						},
						password:{
							required:true,
							digits:true,
							minlength:6
						},
						repassword:{
							required:true,
							equalTo:"[name='password']"
						},
						email:{
							required:true,
							email:true
						},
						username:{
							required:true,
							maxlength:5
						},
						sex:{
							required:true
						}
					},
					messages:{
						user:{
							required:"使用者名稱不能為空!",
							minlength:"使用者名稱不得少於3位!"
						},
						password:{
							required:"密碼不能為空!",
							digits:"密碼必須是整數!",
							minlength:"密碼不得少於6位!"
						},
						repassword:{
							required:"確認密碼不能為空!",
							equalTo:"兩次輸入密碼不一致!"
						},
						email:{
							required:"郵箱不能為空!",
							email:"郵箱格式不正確!"
						},
						username:{
							required:"姓名不能為空!",
							maxlength:"姓名不得多於5位!"
						},
						sex:{
							required:"性別必須勾選!"
						}
					},
					errorElement: "label", //用來建立錯誤提示資訊標籤,validate外掛預設的就是label
					success: function(label) { //驗證成功後的執行的回撥函式
						//label指向上面那個錯誤提示資訊標籤label
						label.text(" ") //清空錯誤提示訊息
							.addClass("success"); //加上自定義的success類
					}
				});
			});
		</script>
	</head>
	<body>
		<div id="contanier">
			<div id="top">
				<div class="top">
					<img src="../img/logo2.png" height="47px"/>
				</div>
				<div class="top">
					<img src="../img/header.png" height="45px" />
				</div>
				<div class="top" id="top1">
					<a href="#">登入</a>
					<a href="#">註冊</a>
					<a href="#">購物車</a>
				</div>
			</div>
			<div id="menu">
				<a href="#"><font size="5" color="white">首頁</font></a>&nbsp;&nbsp;&nbsp;&nbsp;         
				<a href="#"><font color="white">電腦辦公</font></a>&nbsp;&nbsp;&nbsp;&nbsp;  
				<a href="#"><font color="white">手機數碼</font></a>&nbsp;&nbsp;&nbsp;&nbsp;  
				<a href="#"><font color="white">鞋靴箱包</font></a>	
			</div>
			<div id="form">
				<form action="#" method="get" id="registForm">
					<div id="father">
						<div id="form2">
							<table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
								<tr>
									<td colspan="2" >
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										<font size="5">會員註冊</font>&nbsp;&nbsp;&nbsp;USER REGISTER 
									</td>
								</tr>
								<tr>
									<td width="180px">
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										&nbsp;&nbsp;&nbsp;
										<label for="user" >使用者名稱</label>
									</td>
									<td>
										<em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="user" size="35px" id="user"/>
									</td>
								</tr>
								<tr>
									<td>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										&nbsp;&nbsp;&nbsp;
										密碼
									</td>
									<td>
										<em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="password"  name="password" size="35px" id="password" />
									</td>
								</tr>
								<tr>
									<td>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										&nbsp;&nbsp;&nbsp;
										確認密碼
									</td>
									<td>
										<em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="password" name="repassword" size="35px"/>
									</td>
								</tr>
								<tr>
									<td>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										&nbsp;&nbsp;&nbsp;
										Email
									</td>
									<td>
										<em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="email" size="35px" id="email"/>
									</td>
								</tr>
								<tr>
									<td>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										&nbsp;&nbsp;&nbsp;
										姓名
									</td>
									<td>
										<em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="username" size="35px"/>
									</td>
								</tr>
								<tr>
									<td>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										&nbsp;&nbsp;&nbsp;
										性別
									</td>
									<td>
										<span style="margin-right: 155px;">
											<em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" value="男"/>男
											<input type="radio" name="sex" value="女"/>女<em></em>
											<label for="sex" class="error" style="display: none;"></label>
										</span>
										
									</td>
								</tr>
								<tr>
									<td>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										&nbsp;&nbsp;&nbsp;
										出生日期
									</td>
									<td>
										<em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="birthday"  size="35px"/>
									</td>
								</tr>
								<tr>
									<td>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										&nbsp;&nbsp;&nbsp;
										驗證碼
									</td>
									<td>
										<em style="color: red;">*</em>&nbsp;&nbsp;&nbsp;<input type="text" name="yanzhengma" />
										<img src="../img/yanzhengma.png" style="height: 18px;width: 85px;"/>
									</td>
								</tr>
								<tr>
									<td colspan="2">
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										<input type="submit" value="注      冊" height="50px"/>
									</td>
								</tr>
							</table>
						</div>
					</div>
				</form>
			</div>
			<div>
				<img src="../img/footer.jpg"  width="100%"/>
			</div>
		</div>
	</body>
</html>

相關推薦

validate完成註冊頁面表單校驗

需要引入的包都在程式碼裡 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>網站註冊頁面</title> <style&g

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

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

JavaScript完成簡單的表單校驗案例

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>註冊介面</title> <script type="text/javascript">

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

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

jQuery validate 設置失去焦點就校驗和失去焦點就表單校驗是否通過

checked 設置 ali idt date jquery req BE font js部分 html部分 自定義樣式： /*自定義validate覆蓋掉了 validate 裏面默認的顯示樣式*/ label.error{

Vue 表單校驗 vee-validate

function eal for ble this code 文字 email onf gitHub 地址：https://github.com/baianat/vee-validate 官網API 地址：https://baianat.github.io/vee-val

分別使用js和JQuery的validate外掛實現簡單的表單校驗

1.1html 在input標籤後面使用<span>標籤顯示校驗資訊，使用onfocus（聚焦）和onblur（離焦）事件實現動態顯示提示資訊。 <form action="#" method="get" onsubmit="return checkForm()">

表單校驗外掛validate

相信大家都在學習java的過程的學習了很多的表單校驗，可以用html，js，jquery等等，都能實現表單驗證的功能，但是使用起來不夠靈活，操作起來也很麻煩，今天我給大家介紹一種前端的表單校驗的一個外掛validate。 然就就可以開始寫程式碼了 <!DOCTY

validate實現表單校驗

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>validate表單校驗</title><script   type="text/jscript" src="js/j

Vue2.0表單校驗元件vee-validate的使用

vee-validate使用教程 *本文適合有一定Vue2.0基礎的同學參考，根據專案的實際情況來使用，關於Vue的使用不做多餘解釋。本人也是一邊學習一邊使用，如果錯誤之處敬請批評指出* 一、安裝 npm install [email protected]

jQuery的表單校驗外掛validate(轉)

今天試了一下，還是比較方便的，主要是可以與jQuery結合起來做到與HTML分離. 官網的例子裡引用了幾個js和css檔案，但只需引用jquery.validate.js這一個檔案即可.

前端表單校驗異常validate校驗外掛異常

最近做個專案，在寫後臺的時候，遇到了個問題，首先在jsp中引入了bootstrap和bootstrap-Validator（表單驗證）後，遇到個問題，就是在執行的時候，報錯 提示你寫的js中，沒有這個方法，但是bootstrap中該引入的js，css都引入了，為什麼還要

Vee-validate 父元件獲取子元件表單校驗結果

vee-validate 是為 Vue.js 量身打造的表單校驗框架，允許您校驗輸入的內容並顯示對應的錯誤提示資訊。它內建了很多常見的校驗規則，可以組合使用多種校驗規則，大部分場景只需要配置就能實現開箱即用，還支援自定義正則表示式。而且支援 40 多種語言，對本地化、多語言支援非常友好。 國內餓了麼團隊開源專

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> 用戶名

表單校驗的值$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 ，代碼看起來很亂，