二十四、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.封裝驗證錯誤提示資訊
//錯誤提示函式function errorshow(num,str,res){//嘗試獲取錯誤提示var error=txt[num].parentNode.getElementsByClassName("error")[0];if(res){ //res==trueif(error!=undefined){if
4.正則判斷呼叫錯誤提示資訊方法;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表單正則表示式</title>
<style>
*{margin: 0;padding: 0;}
body,html{
background-color: #f6f8f9;}
.block{
width: 800px;
height: 600px;
margin: 0 auto;
background-color: #fff;
}
.ulist{
margin: 0 120px;
}
.list{
list-style: none;
/*line-height: 100px;*/
margin-top: 30px;
}
.span{
display: inline-block;
width: 100px;
}
.txt{
display: inline-block;
width: 300px;
height: 30px;
outline: none;
margin-right: 10px;
margin-bottom: 10px;
}
.emil{
width: 100px;
height: 32px;
color: #a5a6aa;
}
.zhuce{
width: 100px;
height: 32px;
background-color: #44b549;
color: white;
margin-left: 250px;
outline: none;
margin-top: 10px;
}
.text{
width: 320px;
height: auto;
list-style: none;
line-height: 20px;
font-size: 14px;
color: #8d8d8d;
margin-left: 100px;
}
.error{
color: red;
display: block;
margin-left: 100px;
line-height: 20px;
font-size: 14px;
/*margin-bottom: 5px;*/
}
</style>
</head>
<body>
<form class="block" onsubmit="return Submit()">
<p style="margin-left: 120px;padding-top: 30px;">每個郵箱僅能申請一種帳號 </p>
<ul class="ulist">
<li class="list"><span class="span">郵箱</span><input class="txt" type="text"><a href="#" style="text-decoration: none"><button class="emil">啟用郵箱</button></a></li>
<li class="text">作為登入帳號,請填寫未被微信公眾平臺註冊,未被微信開放平臺註冊,未被個人微訊號繫結的郵箱</li>
<li class="list"><span class="span">郵箱驗證碼</span><input class="txt" type="text"></li>
<li class="text">啟用郵箱後將收到驗證郵件,請回填郵件中的6位驗證碼</li>
<li class="list"><span class="span">密碼</span><input class="txt" type="text"></li>
<li class="text">字母、數字或者英文符號,最短8位,區分大小寫</li>
<li class="list"><span class="span">確認密碼</span><input class="txt" type="text"></li>
<li class="text"> 請再次輸入密碼</li>
</ul>
<input class="zhuce" type="submit"value="註冊">
</form>
<script>
//獲取輸入框元素
var txt=document.getElementsByClassName("txt");
//提交方法
function Submit() {
showMsg();
return false;
}
//判斷表單是否驗證正確方法
function showMsg(){
/* 數字/字母/下劃線(5-10位) [email protected]+字母/數字(2-5位)+”.”+com*/
var email=/^\w{5,10}\@[0-9a-z]{2,5}\.[c,o,m]{3}$/;
if(txt[0].value.match(email)==null){
errorshow(0,"請輸入正確的郵箱地址",false);
}else {
errorshow(0,"",true);
}
/*郵箱驗證碼:6位純數字驗證碼*/
var id_e=/^\d{6}$/;
if(txt[1].value==""){
errorshow(1,"請輸入郵件中的6位驗證碼",false)
}else {
if(txt[1].value.match(id_e)==null){
errorshow(1,"驗證碼應為6位數字",false)
}else {
errorshow(1,"",true)
}
}
/*字母、數字或者英文符號,最短8位,區分大小寫*/
var password=/^[0-9a-zA-Z.,;'/]{8,}$/;
if(txt[2].value==""){
errorshow(2,"請填寫密碼",false)
}else {
if(txt[2].value.match(password)==null){
errorshow(2,"密碼長度不足8位",false)
}else {
errorshow(2,"",true)
}
}
/*確認密碼*/
if(txt[2].value.match(password)==null){
errorshow(3,"請再次輸入新密碼",false)
}else {
if(txt[2].value!=txt[3].value){
errorshow(3,"兩次輸入的密碼不一致",false)
}else {
errorshow(3,"",true)
}
}
}
//錯誤提示函式
function errorshow(num,str,res){
//嘗試獲取錯誤提示
var error=txt[num].parentNode.getElementsByClassName("error")[0];
if(res){ //res==true
if(error!=undefined){
if(error.length!=0){
error.remove();
}
return;
}
}
else{ //res==false
if(error!=undefined){ //同一輸入行多種錯誤提示切換
error.innerHTML=str;
}else{
/*建立錯誤提示*/
var err=document.createElement("span");
err.className="error";
err.innerHTML=str;
txt[num].parentNode.appendChild(err);
}
}
}
</script>
</body>
</html>
相關推薦
二十四、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.封裝驗證
表單驗證時常用正則表示式(以“註冊資訊”為例)
個人在使用時看到網上總結的有很多了,但大多文章表述的都比較抽象,使用時需要自己組合,通常因為懶所以實際在用時習慣直接拿來用,總結的是本人寫程式的過程中用的頻率比較高的幾個例項: 另:這裡有一個博主總結的很不錯,連結貼上 /*驗證是否同意協議*/ function
表單驗證2-JS正則
logs 驗證 -c eight 影響 技術 fff d+ wid 1. JS正則: 以/開頭,以/結尾。 test作用:到裏面去找,只要裏面有,就返回true;否則就返回false。 例如:rep=/\d+/; 檢驗裏面是否有數字。 2.rep=/^ $
表單驗證常用的正則表達式
組成 a-z 正整數 位或 而且 中文 功能 判斷 網上 驗證網址:^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\‘:+!]*([^<>\"\"])*$電子郵箱:^[0-9a-z][a-z0-
javascript之表單校驗以及正則表示式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/java
easyUI入門《二十九、form案例:表單提交以及驗證重置清空》
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!--引入
SpringMVC form標籤、伺服器表單驗證、錯誤資訊回顯
form標籤 應用場景:方便伺服器資料在form表單上的展示 使用方式:1.引入標籤庫 2.建立表單 例如:建立兩個實體類 @[email protected]@ToString public class User { private
SpringMVC4+thymeleaf3的一個簡單例項(篇四:form表單資料驗證)
關於表單資料驗證有很多中方法,這裡我僅介紹JSR303註解驗證。 注意在spring的配置檔案spring-mvc.xml中要有這句程式碼:<mvc:annotation-driven/>
跟KingDZ學HTML5之十一 HTML5 Form 表單新元素
rmi 出現 第一個 blog inpu tput form itl scrip 新的課程又開始,哈哈,最近的文章更新比較快,希望大家跟上俺的步伐啊,呵呵,但是每當看到閱讀量,哎,還真不多,可是俺還要堅持寫下去,不知道,大家是不是都沒有在研究HTML5呢? 這節課程,講的是
django form表單驗證
錯誤 mail 定義 lap hide else ren end blog 簡單例子: 1 #自定義驗證類 2 class Check_form1(forms.Form): 3 #user就是要驗證的字段,這裏對應前端name <inp
二十四、管道符和作業控制、shell變量、環境變量配置文件
管道符和作業控制 shell變量 環境變量配置文件 二十四、管道符和作業控制、shell變量、環境變量配置文件一、管道符和作業控制管道符:| 表示把前面文件輸出的內容傳遞給後面的命令。|grep:過濾,指定關鍵詞的命令。|grep ’aaa‘。作業控制Ctrl+z:暫停一個任務
Django中的Form表單驗證
服務 是否 input req 驗證方法 有著 require DC 通過 回憶一下Form表單驗證的邏輯: 前端有若幹個input輸入框,將用戶輸入內容,以字典傳遞給後端。 後端預先存在一個Form表單驗證的基類,封裝了一個檢測用戶輸入是否全部通過的方法。該方法會先定義好
javascript:正則表達式、一個表單驗證的例子
alt 來替 replace 組合 mail 優先 html javascrip get 閱讀目錄 本文內容: 正則表達式: 利用正則表達式進行表單驗證的例子: 回到頂部 本文內容: 正則表達式 正則表達式的使用方法 正則表達式的特殊匹配字符 正則表
# Django admin、form表單的應用記錄
表單 gets 使用 查找 圖片 clas quest ali password 目錄 Django admin、form表單的應用記錄 一 Django admin 1. 使用介紹 form組件使用 1. form的作用 2. form組件生成HTMKL代碼 3. f
django form 表單驗證
nbsp 驗證 bsp com img 表單驗證 png 表單 djang django form 表單驗證
JavaScript進階(四)form表單校驗
前言 本章將學習表單的校驗,作為一個前面學習的總結! 方法 1.概念 我們知道,在學習HTML的時候,我們做了一個非常醜陋的表單,裡面有文字框、單選鈕、複選框等一系列表單元素。這些都是隨便填寫的,沒有加任何的校驗。也就是說正常情況下我們需
jq form表單驗證
<form action="" class="idxform1" onsubmit="return formyz('j_name','j_phone','j_em','j_content','j_code')"> <div class="ipt1 "><span&g
django form表單驗證,使用Ajax提交併返回提示資訊(JSON傳遞資料)
直接上程式碼: HTML,由Form外掛自動生成input標籤 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax提交
從壹開始前後端分離 [ Vue2.0+.NET Core2.1] 二十四║ Vuex + JWT 實現授權驗證登陸
壹週迴顧 哈嘍,又是元氣滿滿的一個週一,又與大家見面了,週末就是團圓節了,正好咱們的前後端也要團圓了,為什麼這麼說呢,因為以後的開發可能就需要前後端一起了,兩邊也終於會師了,還有幾天Vue系列就基本告一段落了,大家也好好加油鴨,今天將的內容呢,其實細心的你看到題目應該就能大家猜到了,前提是一直看本系列的小夥
二十九、分割槽表的建立及清理
1、分割槽表建立 --範圍分割槽示例 drop table range_part_tab purge; --注意,此分割槽為範圍分割槽 create table range_part_tab (id number,deal_date date,area_code number,con