js使用正则验证表单数据

最新推荐文章于 2022-10-20 23:16:46 发布

kankan231

最新推荐文章于 2022-10-20 23:16:46 发布

阅读量751

点赞数

分类专栏： html/css/js 文章标签：表单正则 js

本文链接：https://blog.csdn.net/kankan231/article/details/36636245

版权

html/css/js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一个简单的验证列子，代码如下：

<html>
<head>
<title>正则表达式验证表单</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<style type="text/css">
		.valid{color:green;}
		.invalid{color:red;}
	</style>
</head>
<body>
	<h2>表单验证</h2>
	<form method="POST" οnsubmit="return checkForm(this)">
		用户名：<input type="text" name="uname" /><i>5-15个字母，数字，下划线，不能以字母开头</i><br>
		QQ：<input type="text" name="qq" /><i>5-12位QQ号</i><br>
		Email：<input type="text" name="email" /><i>正确的电子邮箱</i><br>
		<input type="submit" name="sub" value="提交"/><br>
	</form>
	<p id="info"></p>
	
</body>
</html>
<script>
function checkForm(myForm){
	var info = document.getElementById("info");
	info.innerHTML = "";
	//验证用户名
	var re = /^[a-zA-Z_][0-9a-zA-Z_]{4,14}$/;
	var val = myForm.uname.value;
	if(!re.test(val))
	{
		info.innerHTML += "<span class='invalid'>用户名["+val+"]不合法</span><br>";
	}
	else
	{
		info.innerHTML += "<span class='valid'>用户名["+val+"]合法</span><br>";
	}
	
	//验证qq号
	re = /^[1-9][0-9]{4,11}$/;
	val = myForm.qq.value;
	if(!re.test(val))
	{
		info.innerHTML += "<span class='invalid'>QQ号["+val+"]不合法</span><br>";
	}
	else
	{
		info.innerHTML += "<span class='valid'>QQ号["+val+"]合法</span><br>";
	}
	
	//验证EMAIL
	re = /^[0-9a-zA-Z_]+@[0-9a-zA-Z_]+\.[a-zA-Z]+(\.[a-zA-Z]+)?$/;
	val = myForm.email.value;
	if(!re.test(val))
	{
		info.innerHTML += "<span class='invalid'>email["+val+"]不合法</span><br>";
	}
	else
	{
		info.innerHTML += "<span class='valid'>eamil["+val+"]合法</span><br>";
	}
	
	return false;
}

</script>