标签：empty 定义 func border black set ntb 正则表达式 form表单
下面是对于一个email的表单验证的基本模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css" >
.init{
border: 1px solid black;
font-weight: bold;
}
.right{
border: 1px solid green;
font-weight: bold;
}
.wrong{
border: 1px solid red;
font-weight: bold;
}
</style>
<title>这是一个表单验证的模板！！！</title>
</head>
<body>
<form id="myform" action="show.html" method="post" onsubmit="return validate()"> //这个onsubmit是对于整个form表单而言的，由button的submit类型触发
请输入email地址：
<input type="text" id="email" name="email" class="init" onblur="validateEmail()">
<span id="msg"></span><br>
<button type="submit">提交验证</button>
</form>
<script type="text/javascript">
function validateEmail() { /*定义事件处理函数，合法性*/
var email=document.getElementById(‘email‘);
var msg=document.getElementById(‘msg‘);
if(/^\w+@\w+\.\w+$/.test(email.value)){ //利用正则表达式判断 根据判断结果执行相应样式以提示用户
email.className="right";
msg.innerHTML="格式正确";
msg.style.color="green";
return true; //return用来作为处理函数的返回值，是为了提供给onsumit执行的函数判断，是否可以提交
}else{
email.className="wrong";
msg.innerHTML="格式错误";
msg.style.color="red";
return false;
}
}
function validate() {
return validateEmail();
}
</script>
</body>
</html>
、、、、、、、、、、、、、、、、、、、、、密码验证、、、、、、、、、、、、、、、、、、、、、、、、、、、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css" >
.init{
border: 1px solid black;
font-weight: bold;
}
.right{
border: 1px solid green;
font-weight: bold;
}
.wrong{
border: 1px solid red;
font-weight: bold;
}
</style>
<title>这是一个表单验证的模板！！！</title>
</head>
<body>
输入密码：<input type="password" id="psd" name="psd" onblur="validateEmpty(‘psd‘)">
<span id="psdmsg"></span><br>
确认密码：<input type="password" id="conf" name="conf" onblur="validateconf(‘psd‘,‘conf‘)">
<span id="confmsg"></span><br>
<script type="text/javascript">
function validateEmpty(srcname) { /*定义事件处理函数，合法性*/
var psd=document.getElementById(srcname);
var msg=document.getElementById(srcname+‘msg‘);
if(psd.value===""){
psd.className="wrong";
msg.innerHTML="密码不能为空";
msg.style.color="red";
return false;
}else{
psd.className="right";
msg.innerHTML="";
msg.style.color="green";
return true;
}
}
function validateconf(srcname,desname) {
var psd=document.getElementById(srcname);
var conf=document.getElementById(desname);
var msg=document.getElementById(desname+‘msg‘);
if(conf.value===psd.value){
psd.className="right";
conf.className="right";
msg.innerHTML="输入内容一致"
msg.style.color="green";
return true;
}else{
psd.className="wrong";
conf.className="wrong";
msg.innerHTML="输入内容不一致"
msg.style.color="red";
return false;
}
}
function validate() {
return validateEmail();
}
</script>
</body>
</html>
标签：empty 定义 func border black set ntb 正则表达式 form表单
原文地址：http://www.cnblogs.com/Emma2333/p/6858797.html
