客户端—表单验证信息—并能否提交到数据库

表单信息验证

<!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>
<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	328px;
	height:232px;
	z-index:1;
	left: 490px;
	top: 40px;
}
span {
	font-size: 12px;
	color: #FF0000;
}
-->
</style>
</head>
<script type="text/javascript">
var flag=false;


function affirm_user()
{
 
 var u =document.getElementById("001");
 var v =u.value;
 var s =document.getElementById("s1");
 if(v==null||v=="")
 {
 flag=false;
 s.style.color="red";
 s.innerText="昵称不能为空";
 //alert("昵称不能为空");
 }else if(v.length<3||v.length>10)
 { 
 flag=false;
 s.style.color="red";
 s.innerText="昵称长度在3到10个之间";
 //alert("昵称长度在3到10个字符之间");
 }else{
 s.style.color="green";
 flag=true;
 s.innerText="昵称可以使用";
 }
 
}

var password;
function affirm_password()
{
var s =document.getElementById("s2");
var p =document.getElementById("002");
password=p.value;
if(password==null||password=="")
{
flag=false;
 s.style.color="red";
 s.innerText="密码不能为空";
//alert("密码不能为空");
}else if(password.length<6||password.length>13)
{
flag=false;
 s.style.color="red";
 s.innerText="密码长度在6到13之间";
//alert("密码长度在6到13之间");
}else{
 s.style.color="green";
 flag=true;
 s.innerText="密码强度一般";
}

}

function affirm_again()
{
var s =document.getElementById("s3");
var str =document.getElementById("003");
var a_password=str.value;

if(a_password==null||a_password=="")
{ 
flag=false;
 s.style.color="red";
 s.innerText="确认密码不能为空";	
//alert("确认密码不能为空");
}else if(password != a_password)
{
flag=false;
 s.style.color="red";
 s.innerText="二次输入密码不正确,请重新输入!";
//alert("二次输入密码不正确,请重新输入!");
}else{
 s.style.color="green";
 s.innerText="密码一致";
 flag=true;
}
}
/* 
   以下功能是在验证条件下都符合的情况下
*/
function  submitForm()
{
 var form =document.getElementById("form1");
 if(flag==true)
 {
 form.action="s.html";
 form.submit();
// alert("跳转到s.html成功 并插入数据库成功!");
 }else
 {
 form.reset();
 alert("不能提交");
 }
 

}

</script>
<body>
<div id="Layer1">
  <form id="form1" name="form1" method="post" >
    <label>昵称
    <input type="text"  id="001" name="user" onblur="affirm_user()"/>
	<span id="s1"></span>
    </label>
    <p>
      <label>密码
      <input type="password" name="password"  id="002" onblur="affirm_password()"/>
	  <span id="s2"></span>
      </label>
    </p>
    <p>
      <label>确认密码
      <input type="password" name="affirm" id="003"  onblur="affirm_again()"/>
	  <span id="s3"></span>
      </label>
    </p>
    <p>
      <label>
      <div>
      <input type="submit" name="Submit" value="立即注册"  onclick="submitForm()" />
      </div>
      </label>
</p>
  </form>
</div>
</body>
</html>
_____________________________________________________________________________________________________ ***************************************************************************************************************** ===坚持、奋斗***今天的努力只为更好的明天***奋斗、坚持===********************** ==========================================================================================
原文地址:https://www.cnblogs.com/mlloc-clove/p/3599306.html