正则表达式，js表单验证
生活随笔
收集整理的這篇文章主要介紹了
正则表达式，js表单验证
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
正則表達(dá)式(regular expression)描述了一種字符串匹配的模式（pattern），可以用來檢查一個(gè)串是否含有某種子串、將匹配的子串替換或者從某個(gè)串中取出符合某個(gè)條件的子串等，常用于表單驗(yàn)證等。參考文檔：https://www.runoob.com/regexp/regexp-tutorial.html
正則表達(dá)式語法案例：
<script>/*1. 邊界符 ^開頭 $結(jié)尾*/var re=/abc/;//abc含有abcconsole.log(re.test("abc"));console.log(re.test("abcd"));console.log(re.test("gabc"));console.log("^^^^^^^^^^^^^^^^^^^^^^^^^^");var rg=/^abc/;//^abc必須以abc開頭 console.log(rg.test("abc"));console.log(rg.test("abcd"));console.log(rg.test("gabc"));console.log("^^^^^^^^^^^^^^^^^^^^^^^^^^");var rg1=/abc$/;//^abc必須以abc結(jié)尾console.log(rg1.test("abc"));console.log(rg1.test("abcd"));console.log(rg1.test("gabc"));console.log("2.字類符 [] 表示有一系列字符可供選擇，只需匹配其中一個(gè)就可以了");/* 2.字類符 [] 表示有一系列字符可供選擇，只需匹配其中一個(gè)就可以了*/var rg2=/[abc]/;console.log(rg2.test("color"));console.log(rg2.test("text"));console.log(rg2.test("look"));console.log(rg2.test("black"));console.log("^^^^^^^^^^^^^^^^^^^^^^^^^^"); var rg3=/^[abc]$/;//只能是 a b c 其中一個(gè)console.log(rg3.test("a"));console.log(rg3.test("bc"));console.log(rg3.test("ac"));console.log(rg3.test("apple"));console.log("^^^^^^^^^^^^^^^^^^^^^^^^^^"); var rg4=/^[a-z]$/;//只能是 a-z 其中一個(gè)console.log(rg4.test("a"));console.log(rg4.test("e"));console.log(rg4.test("1"));console.log(rg4.test("he"));console.log("^^^^^^^^^^^^^^^^^^^^^^^^^^"); var rg5=/^[a-zA-Z0-9_]$/;//只能是字母數(shù)字下劃線其中一個(gè)console.log(rg5.test("a"));console.log(rg5.test("e"));console.log(rg5.test("1"));console.log(rg5.test("he"));var rg6=/^[^a-zA-Z0-9_]$/;//中括號(hào)里面的^代表取反console.log(rg6.test("a"));console.log(rg6.test("e"));console.log(rg6.test("1"));console.log(rg6.test(","));/*3 量詞符 {} + * ? */ var rg7=/^a*$/ //a可以出現(xiàn)0-n次>=0 console.log(rg7.test("")); console.log(rg7.test("a")); console.log(rg7.test("aa")); console.log("-----------"); var rg8=/^a+$/ //a可以出現(xiàn)1-n次>=1 console.log(rg8.test("")); console.log(rg8.test("a")); console.log(rg8.test("aa"));console.log("-----------"); var rg9=/^a?$/ //a可以出現(xiàn)0或1次 console.log(rg9.test("")); console.log(rg9.test("a")); console.log(rg9.test("aa"));console.log("-----------"); var rg10=/^a{3}$/ //a可以出現(xiàn)3次 //{3,}大于等于3 {3,10}大于3小于10 console.log(rg10.test("")); console.log(rg10.test("aaa")); console.log(rg10.test("aaaaa"));var rg11=/^[a-zA-Z0-9_]{8,12}$/;//允許數(shù)字字母下劃線8到12位 console.log(rg11.test("abw658648")); console.log(rg11.test("2262123339")); console.log(rg11.test("13723062437")); console.log(rg11.test("1372302437abc"));</script>正則表達(dá)式的表單驗(yàn)證：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <style>.error {color: #d22;}.right {color: #2b2;} </style> <body>請(qǐng)輸入用戶名<input type="text" name="" id="username"><span id="tip1"></span><br>請(qǐng)輸入密碼<input type="password" name="" id="pwd"><span id="tip2"></span><br><button id="btn">提交</button> </body> </html> <script>var uname = document.getElementById("username");var pwd = document.getElementById("pwd");var span1 = document.getElementById("tip1");var span2 = document.getElementById("tip2");var btn = document.getElementById("btn")/*正則表達(dá)式*/// a到z,A到Z 3-8位var rg1 = /^[a-zA-z_]{3,8}$///a到z,A到Z 0-9 6-12位var rg2 = /^[a-zA-Z0-9_]{6,12}$/;btn.addEventListener("click", function () {if (uname.value.trim() == "" || pwd.value.trim() == "") alert('用戶名和密碼不能為空！');// trim()除去空格和空字符else{if (rg1.test(uname.value.trim())) {span1.innerHTML = "用戶名格式正確！"span1.className = "right"} else {span1.innerHTML = "用戶名格式不正確！用戶名為字母3-8位，不能為數(shù)字"span1.className = "error"}if (rg2.test(pwd.value.trim())) {span2.innerHTML = "密碼格式正確"span2.className = "right"} else {span2.innerHTML = "用戶名格式不正確，密碼為6-12位，由數(shù)字或字母組成"span2.className = "error"} }}) </script>總結(jié)
以上是生活随笔為你收集整理的正则表达式，js表单验证的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python笔记-1（import导入、
- 下一篇： 教师计算机考试取得模块,2015年教师称