javascript之表單校驗以及正則表示式

阿新 • • 發佈：2019-02-02

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			function checkName(usernameObj){
				//等價於 document.getElementById("username");
				var username  = usernameObj.value;
				//alert(username);
				//編寫一個正則表示式
				//var reg = new RegExp();
			
				
				var reg = /^\w{6，18}$/;
				//var reg  =/^\ 
[email protected]\w{2,}.com$/;
				var msg  = document.getElementById("username_msg");
				if(reg.test(username)){
					msg.innerHTML = "✅";
				}else{
					msg.innerHTML = "❌";
				}
				
			}
			
			function checkPwd(){
				//等價於 document.getElementById("username");
				var password  = document.getElementById("password").value;
				
				//編寫一個正則表示式
				//var reg = new RegExp();
		
				var msg  = document.getElementById("password_msg");
				if(reg.test(password)){
					msg.innerHTML = "✅";
				}else{
					msg.innerHTML = "❌";
				}
				
			}
			
			
		</script>
	</head>
	<body>
		<div align="center">
		<form action="" method="post" >
			<table border="1">
				<tr>
					<td>使用者名稱</td>
					<!-- this  代表當前輸入框-->
					<td><input type="text" id="username" name="username" onblur="checkName(this)" />
						<span id="username_msg">請輸入6-18位的字串</span>
					</td>
				</tr>
				<tr>
					<td>密碼</td>
					<td><input type="password" id="password" name="password" onblur="checkPwd()" />
						<span id="password_msg">請輸入6-18位的字串</span>
					</td>
				</tr>
				<tr>
					<td><input type="submit" value="登入" /> </td>
					<td><input type="reset" value="重置" /> </td>
				</tr>
				
			</table>		
		</form>
		</div>
		
	</body>
</html>

二、正則表示式

提供一個寫正則表示式的工具：連結：https://pan.baidu.com/s/1H-pBKaPBCtelHZwixSwXhA 密碼：kwt6

javascript之表單校驗以及正則表示式

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/java

javascript高階之表單校驗

表單校驗是指:規範資料的輸入格式: 方式一: 思路:(1)建立一個form標籤,使用onsumbit事件 (2)建立文字輸入項,建立submit提交按鈕, (3)使用繫結的第一種方式:1根據id拿到標籤物件,在根據標籤物件拿到該標籤的value值 2if判斷為

easyui 進階之tree easyui 進階之表單校驗、自定義校驗

前言 easyui是一種基於jQuery的使用者介面外掛集合，它為建立現代化，互動，JavaScript應用程式，提供必要的功能，完美支援HTML5網頁的完整框架，節省網頁開發的時間和規模。非常的簡單易學。 easyui中文網：http://www.jeasyui.net/ easyui官網：http:

easyui 進階之表單校驗、自定義校驗

前言 easyui是一種基於jQuery的使用者介面外掛集合，它為建立現代化，互動，JavaScript應用程式，提供必要的功能，完美支援HTML5網頁的完整框架，節省網頁開發的時間和規模。非常的簡單易學。今天我們來學習表單校驗以及如何自定義表單校驗正文一、從標記建立驗證框（vali

JavaScript的表單校驗、ajax提交和資料渲染的流程

下面簡單封裝了一個類似jquery的ajax工具 (function(global){ let kevin = {}; kevin.ajax = function(type, url, data, headers, callback){ l

使用JavaScript實現表單校驗

使用JavaScript實現表單驗證最近在學習JavaScript，因此想到使用js實現表單校驗。上網查詢了很多的方法和遇到的問題，現在問題都一一解決，特此陳述案例實現步驟及遇到的問題。文字框校驗以下是文字框的校驗步驟。 1.獲取待校驗的

身份證號碼出生年月以及有效校驗位正則表示式判斷

/** * 身份證號碼格式校驗 */ function isIdCardNo (str) { // 身份證號碼正則表示式 var rpIdcard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; var l

表單驗證時常用正則表示式（以“註冊資訊”為例）

個人在使用時看到網上總結的有很多了，但大多文章表述的都比較抽象，使用時需要自己組合，通常因為懶所以實際在用時習慣直接拿來用，總結的是本人寫程式的過程中用的頻率比較高的幾個例項：另：這裡有一個博主總結的很不錯，連結貼上 /*驗證是否同意協議*/ function

QT5.3.2小白之路——UI介面設計以及正則表示式的說明

本文主要探討對UI介面設計過程中遇到的問題和解決辦法，同時也引出了很多的專業概念，供大家一起學習。 1、UI介面的繪製 1、新建QT Widget Application ，專案名稱為“Test”，基類選擇“QDialog”，類名保持“Dialog”不變，保持“建立介面”

二十四、form 表單驗證+簡單註冊正則表示式

2.驗證正則表示式var email=/^\w{5,10}\@[0-9a-z]{2,5}\.[c,o,m]{3}$/;郵箱驗證碼：6位純數字驗證碼var id_e=/^\d{6}$/;密碼：字母/數字/英文符號(最短8位)var password=/^[0-9a-zA-Z.,;'/]{8,}$/;3.封裝驗證

校驗日期正則表示式

校驗日期格式為yyyy-MM-dd HH:mm:ss的正則表示式 public static boolean validateTimeFormat(String dateStr){ String eL= "^((([0-9]{3}[1-9]|[0-9]{2}[1-9][

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

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

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

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

JavaScript表單校驗

確認事件事件觸發函式函式操作元素 &nbs

JavaScript進階（四）form表單校驗

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

javascript封裝（表單校驗）

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

bootstrap表單校驗之bootstrapvalidator

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String b

element-ui之form表單校驗的使用詳解

先吐槽一下，個人感覺element-ui提供的文件寫的太少，用的時候會踩很多坑。如：表單驗證方法傳入的value沒有值等。下面，是我對element-ui form表單驗證使用的總結，應該能解決大部分問題，或者，也可以直接拿過去修改使用。（本文程式碼使用的

Javascript 表單校驗的三種方法

javascript——表單校驗工具程式碼

function changeImg(img){ //改變img標籤中 src的值，實現重新載入的功能每次的訪問地址都不一樣，因為有變數加入，所以每次都會訪問新的資源。 img.src = img.src+"?time

javascript之表單校驗以及正則表示式

相關推薦