使用正则校验表单的输入

<!doctype html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body >
<form method="post" action="后台的页面.html" onsubmit="return checkAll()">
用户名:<input type="text" onblur="checkName()" id="userName" /><span id="ntip"></span></br>
密码:<input type="password" onblur="checkPasd()" id="userPwd" /><span id="pastip"></span></br>
确认密码:<input type="password" onblur="checkrePasd()" id="repassword"/>
<span id="rptip"></span></br>
邮箱:<input type="text" onblur="checkEmail()" id="email"/><span id="emailtip"></span><br>
提交:<input type="submit" value="提交" >
</form>
</body>

<script type="text/javascript">
//用户名： 4-14位字母或数字
// 密码： 6-16位的字母或数字
// 密码和确认密码输入一致
// 邮箱符合规则： 字母或数字@字母或数字.(com/cn/net/com.cn)

function checkName(){
var userName=document.getElementById("userName").value;
var reg=/^[a-zA-Z0-9]{4,14}$/;
var ntip=document.getElementById("ntip");
if(reg.test(userName))
{
ntip.innerHTML="你输入的用户名正确".fontcolor("blue");
return true;
}else{

ntip.innerHTML="你输入的用户名有误".fontcolor("red");
return false;
}
}
function checkPasd(){
var userPwd=document.getElementById("userPwd").value;
var reg=/^[a-zA-Z0-9]{6,14}$/;
var pastip=document.getElementById("pastip");
if(reg.test(userPwd))
{
pastip.innerHTML="你输入的密码正确".fontcolor("blue");
return true;
}else{

pastip.innerHTML="你输入的密码有误".fontcolor("red");
return false;
}
}
function checkrePasd(){
var userPwd=document.getElementById("userPwd").value;
var repassword=document.getElementById("repassword").value;
var rptip=document.getElementById("rptip");
if(userPwd==repassword)
{
rptip.innerHTML="两次密码一样".fontcolor("blue");
return true;
}else{

rptip.innerHTML="两次密码不一样".fontcolor("red");
return false;
}
}
function checkEmail(){
// 邮箱符合规则： 字母或数字@字母或数字.(com/cn/net/com.cn)
var email=document.getElementById("email").value;
var reg=/^[a-zA-Z0-9]+@[a-zA-Z0-9]+(\.[a-zA-Z]{2,3}){1,2}$/;
/^[a-zA-Z0-9]+@[a-zA-Z0-9]+(\.[a-zA-Z]{2,3}){1,2}$/;
var emailtip=document.getElementById("emailtip");
if(reg.test(email))
{
emailtip.innerHTML="你输入的邮箱正确".fontcolor("blue");
return true;
}else{

emailtip.innerHTML="你输入的邮箱有误".fontcolor("red");
return false;
}
}
function checkAll(){
if(checkName()&&checkPasd()&&checkrePasd()&&checkEmail())
{
return true;
}else{
return false;
}
}



</script>
</html>

posted @ 2016-12-20 16:08  高明举  阅读(205)  评论(0)    收藏  举报