如何用正则表达式完成表单验证_如何使用正则表达式满足表单要求-优快云博客

本文链接：https://blog.youkuaiyun.com/winneryy/article/details/112650120

本文提供了一个HTML表单验证的实例，包括用户名、密码、邮箱和IP地址的验证。通过JavaScript实现onblur事件触发的验证功能，并使用正则表达式检查输入内容的合法性，如用户名必须4-10位，字母数字下划线且不能数字开头，密码必须是6-12位的小写字母、大写字母和数字等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单验证实例</title>
		<style>
			ul,li{
				list-style: none;
			}
			li{
				margin-top: 10px;
			}
			.success{
				color:green;
			}
			.error{
				color:red;
			}
		</style>
	</head>
	<body>
		<h2>表单验证实例</h2>
		<ul>
			<li>用户名: <input type="text" id="username"  />
			<span>4-10位,字母数字下划线组成，不能数字开头</span>
			</li>
			<li>密  码: <input type="password" id="pwd"  />
			<span>6-12位,只能是小写字母、大写字母和数字，要求复杂度</span>
			</li>
			<li>email: <input type="text" id="email"  />
			<span>新浪邮箱(sina.com/sina.com.cn/sina.cn)</span>
			</li>
			<li>ip地址: <input type="text" id="ip"  />
			<span>正确ip地址</span>
			</li>
			<li>签名: <textarea name="qm" rows="5" cols="30" id="qm"></textarea>
			<span>不可以有script或head或%标签</span>
			</li>
		</ul>
		<input type="submit" value="submit" />
		<script>
			function regexp(ele,reg){
				ele.onblur=function(){
					if(reg.test(this.value)){
						this.nextElementSibling.className = 'success';
						this.nextElementSibling.innerHTML = '恭喜你输入正确';
					}else{
						this.nextElementSibling.className = 'error';
						this.nextElementSibling.innerHTML = '输入不正确，请重新输入';
					}
				}
			}
			var reguname = /^[a-zA-Z_][a-zA-Z0-9_]{3,9}$/;
			var username = document.querySelector('#username');
			regexp(username,reguname);
			
			var regpwd = /^[a-zA-Z0-9]{6,12}$/;
			var userpwd = document.querySelector('#pwd');
			regexp(userpwd,regpwd);
			
			var regemail = /^([a-z0-9_\.-]+)@(sina.com|sina.com.cn|sina.cn)$/;
			var email = document.querySelector('#email');
			regexp(email,regemail);
			
			var regip = /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/;
			var ip = document.querySelector('#ip');
			regexp(ip,regip);
			
			var regqm = /<(script|head|%)>/g;
			var qm = document.querySelector('#qm');
			qm.onblur=function(){
				qm.value =  qm.value.replace(regqm,'*');
			}
			
		</script>
	</body>
</html>