600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 正则表达式 js表单验证

正则表达式 js表单验证

时间:2020-03-27 01:57:37

相关推荐

正则表达式 js表单验证

正则表达式(regular expression)描述了一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等,常用于表单验证等。参考文档:/regexp/regexp-tutorial.html

正则表达式语法案例:

<script>/*1. 边界符 ^开头 $结尾*/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结尾console.log(rg1.test("abc"));console.log(rg1.test("abcd"));console.log(rg1.test("gabc"));console.log("2.字类符 [] 表示有一系列字符可供选择,只需匹配其中一个就可以了");/* 2.字类符 [] 表示有一系列字符可供选择,只需匹配其中一个就可以了*/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 其中一个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 其中一个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_]$/;//只能是字母数字下划线其中一个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_]$/;//中括号里面的^代表取反console.log(rg6.test("a"));console.log(rg6.test("e"));console.log(rg6.test("1"));console.log(rg6.test(","));/*3 量词符 {} + * ? */var rg7=/^a*$/ //a可以出现0-n次>=0console.log(rg7.test(""));console.log(rg7.test("a"));console.log(rg7.test("aa"));console.log("-----------");var rg8=/^a+$/ //a可以出现1-n次>=1console.log(rg8.test(""));console.log(rg8.test("a"));console.log(rg8.test("aa"));console.log("-----------");var rg9=/^a?$/ //a可以出现0或1次console.log(rg9.test(""));console.log(rg9.test("a"));console.log(rg9.test("aa"));console.log("-----------");var rg10=/^a{3}$/ //a可以出现3次//{3,}大于等于3 {3,10}大于3小于10console.log(rg10.test(""));console.log(rg10.test("aaa"));console.log(rg10.test("aaaaa"));var rg11=/^[a-zA-Z0-9_]{8,12}$/;//允许数字字母下划线8到12位console.log(rg11.test("abw658648"));console.log(rg11.test("2262123339"));console.log(rg11.test("13723062437"));console.log(rg11.test("1372302437abc"));</script>

正则表达式的表单验证:

<!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>请输入用户名<input type="text" name="" id="username"><span id="tip1"></span><br>请输入密码<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")/*正则表达式*/// 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位,不能为数字"span1.className = "error"}if (rg2.test(pwd.value.trim())) {span2.innerHTML = "密码格式正确"span2.className = "right"} else {span2.innerHTML = "用户名格式不正确,密码为6-12位,由数字或字母组成"span2.className = "error"} }})</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。