JS之正则表达式及简单表单验证

秒速五厘米 2022-05-14 13:39 191阅读 0赞

### 一:正则表达式语法规则 ###

1:\[abc\]                a,b或者c任何一个

2:\[a-zA-Z\]           a到z或A到Z任何一个

3:\\d                     表示数字\[0-9\]，即0到9任意一个

4:X\{n\}                 表示有n个X

5:X\{n,\}                表示有n个以上X

6:X\{n,m\}             表示有n到m范围之内个X

7:\\D                    表示非数字

8:\\s                     表示空白字符（如空格，\\t制表符，\\n换行符）

9:\\S                    表示非空白字符

10:\\w                  表示单词字符：\[a-zA-Z\_0-9\]

11:\\W                 表示非单词字符

补充中文：\[\\u4e00-\\u9fa5\]

### 二：正则的常用表达(/^$/) ###

1：用户名只能为字母，长度为6-12位:            \[a-zA-Z\]\{6,12\}   
2：密码只能为数字，长度至少为6位:             \[0-9\]\{6,\},\\\\d\{6,\}   
3：手机号校验:                                                \[1\]\[3578\]\\\\d\{9\}  
4：邮箱校验:                                                   \[a-zA-Z\_ 0-9\]\{3,\}@(\[a-zA-Z\]+|\\\\d+)\\.\[a-zA-Z\]+)+

### 三：简单例子 ###

<form action="#" method="get">
    	<ul>
    		<li>
    			<label>用户名:　</label>
    			<input type="text" name="username" id="username" required="required" onblur="checkUser()" />
    			<span id="message1"></span>
    		</li>
    		<li>
    			<label>密　码:　</label>
    			<input type="password" name="password" id="password" required="required" onblur="checkPassword()" />
    			<span id="message2"></span>
    		</li>
    		<li>
    			<label>确认密码:</label>
    			<input type="password" name="passwordTwo" id="passwordTwo" required="required" onblur="checkPasswordTwo()" />
    			<span id="message3"></span>
    		</li>
    		<li>
    			<label>用户类型:</label>
    			<select name="userType">
    				<option value="0">管理员</option>
    				<option value="1">其他</option>
    			</select>
    		</li>
    		<li>
    			<label>性别:　　</label>
    			<input type="radio" name="sex" value="male" checked="checked" />男
    			<input type="radio" name="sex" value="female" />女
    		</li>
    		<li>
    			<label>兴趣爱好:</label>
    			<input type="checkbox" name="hobby" value="reading" />阅读
    			<input type="checkbox" name="hobby" value="music" />音乐
    			<input type="checkbox" name="hobby" value="sport" />运动
    		</li>
    		<li>
    			<label>电子邮件:</label>
    			<input type="email" name="email" id="email" value="" onblur="checkEmail()" />
    			<span id="message4"></span>
    		</li>
    		<li>
    			<label>自我介绍:</label>
    			<textarea name="intro" rows="5" cols="40"></textarea>
    		</li>
    		<li>
    			<input type="submit" id="sub" value="提交" onclick="return checkAll()" />
    			<input type="reset" value="重置" onclick="resetTheAll()" />
    		</li>
    	</ul>
    </form>

<script type="text/javascript">
    	function checkUser() {
    		var user = document.getElementById("username");
    		var regs = /^[a-zA-Z0-9\u4e00-\u9fa5_]{6,18}$/;
    		var message = document.getElementById("message1")
    		if(regs.test(user.value)) {
    			message.style.color = "greenyellow";
    			message.innerHTML = "✔";
    			return true;
    
    		} else {
    			message.style.color = "red";
    			message.innerHTML = "请输入6-18位中英文用户名！";
    			return false;
    		}
    	}
    
    	function checkPassword() {
    		var pass = document.getElementById("password");
    		var regs = /^[a-zA-Z0-9_]{6,12}$/;
    		var message = document.getElementById("message2")
    		if(regs.test(pass.value)) {
    			message.style.color = "greenyellow";
    			message.innerHTML = "✔";
    			return true;
    		} else {
    			message.style.color = "red";
    			message.innerHTML = "请输入6-12位中英文密码！";
    			return false;
    		}
    	}
    
    	function checkPasswordTwo() {
    		var pass1 = document.getElementById("password").value;
    		var pass2 = document.getElementById("passwordTwo").value;
    		var message = document.getElementById("message3")
    		if(pass1 == pass2 && pass2 != "") {
    			message.style.color = "greenyellow";
    			message.innerHTML = "✔";
    			return true;
    		} else {
    			message.style.color = "red";
    			message.innerHTML = "密码不一致";
    			return false;
    		}
    	}
    
    	function checkEmail() {
    		var reg = /\w+@\w+\.\w+/;
    		var email = document.getElementById("email").value;
    		var message = document.getElementById("message4");
    		if(reg.test(email)) {
    			message.style.color = "greenyellow";
    			message.innerHTML = "✔";
    			return true;
    		} else {
    			message.style.color = "red";
    			message.innerHTML = "邮箱格式错误，必须包含 @ 和 . ";
    			return false;
    		}
    	}
    	//提交所有
    	function checkAll() {
    		if(checkUser() && checkPassword() && checkPasswordTwo() && checkEmail()) {
    			return true;
    		} else {
    			alert("请完善信息")
    			return false;
    		}
    	}
    	//重置所有(当点击重新填写时 提交按钮 恢复不可用状态)
    	function resetTheAll() {
    		//清除提示信息
    		var spans = document.getElementsByTagName("span");
    		for(var i = 0; i < spans.length; i++) {
    			spans[i].innerHTML = "";
    		}
    
    	}
    </script>

![70][]

[70]: /images/20220514/9bbe876e6ed54ea18892cd5802dbf955.png

发表评论取消回复

表情：

评论列表（有 0 条评论，191人围观）

还没有评论，来说两句吧...

相关阅读

相关前端表单验证常用的15个JS正则表达式

故心故心故心故心小故冲啊 -------------------- 文章目录 1 用户名正则 2 密码强度正则 3 整数正则 4 数字正则

短命女/ 2023年01月09日 15:32/ 0 赞/ 133 阅读

相关正则表达式——js表单验证

以下代码是使用js对表单中的电话号码和邮箱进行验证： / 验证邮箱 / function validateEmail(){

男娘i/ 2022年12月31日 01:24/ 0 赞/ 170 阅读

相关 [转]js正则表达式之中文验证

<table style="border:1px solid silver; width:1326px; border-collapse:collapse

谁践踏了优雅/ 2022年09月26日 08:44/ 0 赞/ 115 阅读

相关 javascript表单(正则表达式)验证大全

javascript表单(正则表达式)验证大全时间:2016年12月29日来源:技术之家作者:小恩点击: 267 次 > 如果你想快速的掌握像数字验证、手机号码验

ゝ一纸荒年。/ 2022年06月16日 12:00/ 0 赞/ 186 阅读

相关正则表达式--表单验证

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

梦里梦外;/ 2022年06月13日 13:21/ 0 赞/ 213 阅读

相关 JS之正则表达式及简单表单验证

一:正则表达式语法规则 1:\[abc\] a,b或者c任何一个 2:\[a-zA-Z\] a到z或A到Z任何一个

秒速五厘米/ 2022年05月14日 13:39/ 0 赞/ 192 阅读

相关表单验证常用的15个JS正则表达式

在表单验证中，使用[正则][Link 1]表达式来验证正确与否是一个很频繁的操作，本文收集整理了15个常用的javaScript[正则][Link 1]表达式，其中包括用户名、

快来打我*/ 2022年05月08日 14:20/ 0 赞/ 274 阅读

相关 JS常用正则表达式及验证时间的正则表达式

1.在input框中只能输入金额，其实就是只能输入最多有两位小数的数字 //第一种在input输入框限制 <input type="text" maxlength="

我不是女神ヾ/ 2022年04月08日 13:38/ 0 赞/ 542 阅读

相关正则表达式-JS验证

1、纯数字 οnkeyup="value=value.replace(/\[^\\d\]/g,'')" 1-100之间的整数 var reg = /^((?!0)

Bertha 。/ 2022年04月02日 12:09/ 0 赞/ 348 阅读

相关正则表达式实例(JS验证)

// 密码是英数字且不能为空 function checkPass1(val) \{ var pattChar = new RegExp( ' \[

超、凢脫俗/ 2021年11月10日 02:00/ 0 赞/ 335 阅读