关闭

JavaScript -- 正则表达式 检验表单提交的内容

575人阅读 评论(0) 收藏 举报
分类:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<script type="text/javascript">

var checkUsernameflag;
function checkUsername(inputNode)
{
	var name = inputNode.value;
	var namereg = new RegExp("^[a-z]{5}$", "i");  //5个字母, i 可选,忽略大小写
	var returnCode = name.match(namereg);
	var spanNode1 = document.getElementById("useryes");
	var spanNode2 = document.getElementById("userno");
	if(returnCode!=null)	
	{
		spanNode1.style.display = "inline";
		spanNode1.style.color = "green";
		spanNode2.style.display = "none";
		checkUsernameflag = true;				
	}
	else
	{
		spanNode2.style.display = "inline";
		spanNode2.style.color = "red";
		spanNode1.style.display = "none";
		checkUsernameflag = false;
	}	
}

var checkPwdflag;
function checkPwd(pwdNode)
{
	var pwd = pwdNode.value;
	var pwdreg = new RegExp("^[0-9]{5}$");  //5个数字
	var returnCode = pwd.match(pwdreg);
	var spanNode = document.getElementById("pwdspan");
	if(returnCode!=null)
	{	
		spanNode.innerHTML = "密码正确".fontcolor("green");	
		checkPwdflag = true;
	}
	else		
	{
		spanNode.innerHTML = "密码格式对".fontcolor("red");	
		checkPwdflag = false;
	}
}

var RecheckPwdflag;
function RecheckPwd(pwdNode)
{
	var pwd2 = pwdNode.value;
	var pwd1 = document.getElementsByName("passwd1")[0].value;
	var spanNode = document.getElementById("repwdspan");
	if(pwd2!="" && pwd1!="" && pwd1==pwd2)	
	{
		spanNode.innerHTML = "密码确认正确".fontcolor("green");	
		RecheckPwdflag = true;
	}
	else		
	{
		spanNode.innerHTML = "密码与上次不符".fontcolor("red");	
		RecheckPwdflag = false;
	}
}

var checkMailflag;
function checkMail(mailNode)
{
	var mail = mailNode.value;
	var mailreg = new RegExp("^\\w+@\\w+(\\.\\w+)+$");  //邮件正则表达式
	var returnCode = mail.match(mailreg);
	var spanNode = document.getElementById("mailspan");
	if(returnCode!=null)
	{	
		spanNode.innerHTML = "邮件格式正确".fontcolor("green");	
		checkMailflag = true;
	}
	else		
	{
		spanNode.innerHTML = "邮件格式不正确".fontcolor("red");	
		checkMailflag = false;
	}
}

function checkSubmit()
{
	if(checkUsernameflag==true && checkPwdflag==true && RecheckPwdflag==true && checkMailflag==true)	
		return true;
	else
		return false;
	
	
}

</script>

</head>

<body>

<form action="http://www.baidu.com" method="get" onsubmit="return checkSubmit()">
用户名:<input type="text" name="user" onblur="checkUsername(this)" /> 
<span id="useryes" style="display:none">用户名正确</span> <span id="userno" style="display:none">用户名错误</span>
<br/> 
密码:	<input type="password" name="passwd1"  onblur="checkPwd(this)"/>  <span id="pwdspan"></span>
<br/>
确认密码:<input type="password" name="passwd2" onblur="RecheckPwd(this)"/>  <span id="repwdspan"></span>
<br/>
邮件地址:<input type="text" name="mail"  onblur="checkMail(this)"/> <span id="mailspan"></span>
<br/>
提交: <input type="submit" name="submit" value="提交" />
</form>

</body>
</html>


 

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

JavaScript表单验证和提交(结合正则表达式)

表单验证: 1> 在用户输入信息完成后,验证用户数据的数据是否符合某个要求,根据是否符合要求,提示不同的信息。 2>若用户输入的信息有一项不合格,则阻止表单提交。(注意:表单组件name属性值为非...
  • java_xxoo_android
  • java_xxoo_android
  • 2014-12-07 18:57
  • 1138

js校验表单 后提交表单的三种方法总结

1、 function check(form) { if(form.userId.value=='') { alert("请输...
  • A9925
  • A9925
  • 2015-07-30 13:12
  • 619

【JavaScript】表单即时验证,不成功不让提交

不能再让表单在提交按钮之后才被验证了!你输入的任何信息表单都会即时反应! 这个JavaScript的关键是onCheck()事件,使用onKeyUp()事件完成是不行的,人家没有输入完毕,你就说人家不...
  • yongh701
  • yongh701
  • 2014-10-25 20:29
  • 12702

form 表单提交前验证

原文出处:http://www.cnblogs.com/xudong-bupt/p/3949631.html 可以使用form表单的onsubmit方法,在提交表单之前,对表单或者网页中的数据进...
  • chelen_jak
  • chelen_jak
  • 2016-07-30 16:29
  • 5208

使用js实现表单提交

Name:                             ...
  • zhao13083837081
  • zhao13083837081
  • 2016-08-03 11:00
  • 1637

使用原生javascript实现ajax提交form表单

使用原生javascript实现ajax提交form表单============================1准备表单        首先我们需要编写一个html代码,这里我是采用nodejs里...
  • u013158044
  • u013158044
  • 2016-04-16 23:26
  • 4291

用JavaScript实现form表单的数据提交--使用正则表达式对数据判断

用JavaScript实现form表单的数据提交--使用正则表达式对数据判断: 运用JavaScript中正则表达式的相关知识; 注意:form表单中的onsubmit事件的使用: success.h...
  • yanghui07216
  • yanghui07216
  • 2016-12-03 13:14
  • 898

【JavaScript】表单提交之前的前台处理检查三部曲

本来一个小小的表单的参数传递时非常简单的,是基础的基础,但是考虑到现在网上的不法分子越来越猖獗,而且那些平时没事做一心钻研黑客技术的人越来越多,你在表单提交之前,首先就应该在前台中处理一下,后台部分的...
  • yongh701
  • yongh701
  • 2015-03-12 11:05
  • 2368

Js校验表单数据后提交表单的3种方法

在现在的网站开发过程中,对表单数据进行验证是非常必须的,通过Js将表单数据在客户端进行校验验证不仅速度很快,而且还有一个更大的好处就是缓解服务器压力。如果我们不在客户端进行数据校验,无论什么数据全部都...
  • Zhihua_W
  • Zhihua_W
  • 2016-11-03 17:49
  • 4204

form表单提交的几种方法

form表单提交的几种方法 方法一:利用form的onsubmit()函数 Html代码 function validateForm(){ if(document.rep...
  • xiyiyindie
  • xiyiyindie
  • 2016-10-27 17:49
  • 2284
    个人资料
    • 访问:775597次
    • 积分:11494
    • 等级:
    • 排名:第1549名
    • 原创:297篇
    • 转载:488篇
    • 译文:0篇
    • 评论:44条
    最新评论