表单的多重验证

还是老样子，先是简单的主页代码（index.php）：

<form method="post" action="slindex.php">
<div class="cen">
<label for="username">账号:</label>
<input type="text" id="username" name="user" class="zh" />
</div>
<div class="cen">
<label for="password">密码:</label>
<input type="password" id="password" name="pass" class="mm" />
</div>
<div class="cen">
<label for="tex">验证码:</label>
<input type="text" id="tex" name="tex" class="yzm" />
<?php
$number=intval(mt_rand(1000,9999)); //获取随机整数   ‘’intal‘’为取整  页面每刷新一次，number的值便会改变一次，这就实现了验证码的随机出现
for($i = 0 ; $i < 4 ; $i++){
echo"<img src = image/".substr(strval($number),$i,1).".gif>"; //截取字符串，每次截取一个值，再将相应的图片显示。
}
?>
  <input type="hidden" id="hid" value="<?php echo $number?>" />   <!--用隐藏域来保存图片中的值-->
</div>
<div class="sub">
<input type="submit" value="登录" name="b1" id="send"/>
<input type="submit" value="注册" name="b2" />
</div>
</form>

效果如图：

在前面的表单提交中也提出了账号与密码的验证，验证码的验证也与其相同。不过这次多出了后台用php进行简单的验证；

第一：点击跳转按钮跳转至注册界面。

表单提交后数据给”action“里的元素进行处理

（slindex.php）

<?php
if($_POST['b2'] == "注册"){ //点击注册按钮时  直接跳转到注册界面
echo "<meta http-equiv = \"refresh\" content = \"0; url = zc.php\"/>";
?>

第二：在在注册界面进行注册（zc.php）

表单交给（slzc.php）进行数据处理,

<?php
$z = $_POST['user'];
$m = $_POST['pass'];
$link = mysql_connect( 数据库连接语句各位自行解决  );
$db_selected = mysql_select_db("zyh",$link);
$s1 = mysql_query("select * from zyh where username = '$z' ");

if(mysql_num_rows($s1) > 0){
echo "<script type='text/javascript'>alert('账号已存在,请重新输入');location='javascript:history.back()';</script>";
}else if(($z == null) || ($m == null)){
echo "<script type='text/javascript'>alert('账号密码不能为空');location='javascript:history.back()';</script>";
}else{
mysql_query("INSERT INTO zyh(username,pw)VALUES('$z','$m')");
echo"<script type='text/javascript'>alert('注册成功')</script>";
echo "<meta http-equiv = \"refresh\" content = \"0; url = index.php\"/>";
}

  ?>  

将正确的账号密码存入数据库。

具体效果就不贴出来了。各位自己尝试。

第三：跳转至登录界面（注册账号密码均为123456）

（slindex.php）对主页提交的表单进行处理。

<?php
if($_POST['b2'] == "注册"){
echo "<meta http-equiv = \"refresh\" content = \"1; url = zc.php\"/>";
}else if($_POST['b1'] == "登录"){
$z = $_POST['user'];
$m = $_POST['pass'];
$link = mysql_connect(数据库连接语句各位自行解决);
$db_selected = mysql_select_db("zyh",$link);

//对数据库中数据进行查找及判断

$s1 = mysql_query("select * from zyh where username = '$z' "); 
$s2 = mysql_query("select * from zyh where pw = '$m' ");
if((@mysql_num_rows($s1) > 0) && (@mysql_num_rows($s2) > 0)){
header("Location:main.php");
exit;
}else if(!(@mysql_num_rows($s1) > 0)){
echo "<script type='text/javascript'>alert('账号不存在');location='javascript:history.back()';</script>";
}else if((@mysql_num_rows($s1) > 0) && !(@mysql_num_rows($s2) > 0)){
echo "<script type='text/javascript'>alert('密码错误！');location='javascript:history.back()';</script>";
}
}
?> 

最后附上index.php的jQuery代码（zc.php取其部分即可）

//文本框失去焦点
$('form :input').blur(function(){
var $parent = $(this).parent();
$parent.find(".formtips").remove();
//验证账号
if($(this).is('#username')){
if(this.value==""|| this.value.length < 6){
var errorzh = '请输入6-12位数.';
$parent.append('<span class = "formtips error">' + errorzh + '</span>');
}else{
var okzh = '输入正确.';
$parent.append('<span class = "formtips">' + okzh + '</span>');
}
}
//验证密码
if($(this).is('#password')){
if(this.value == ""|| this.value.length < 6){
var errormm = '请输入6-16位数.';
$parent.append('<span class = "formtips error">' + errormm + '</span>');
}else{
var okmm = '输入正确.';
$parent.append('<span class = "formtips">' + okmm + '</span>');
}
}
//验证码验证
if($(this).is('#tex')){
var hid = document.getElementById("hid").value;
if(this.value == "" || this.value.length != 4 || this.value != hid ){
$parent.append('<span class = "formtips error1">'+ '</apan>');
}
}
}).keyup(function(){  //keyup事件能在用户每次松开按键时触发，实现即时提醒。
$(this).triggerHandler("blur");
//trigger("blur")不仅会触发为元素绑定的blur事件，也会触发浏览器默认的blur事件，即不能将光标定位到文本框上。而triggerHandler("blur")只会触发前者而不会出发后者
}).focus(function(){  //focus事件能在元素得到焦点的时候触发，也能实现及时提醒。
$(this).triggerHandler("blur");
});
//最终验证
$('#send').click(function(){
$("form .zh:input").trigger('blur');
$("form .mm:input").trigger('blur');
$("form .yzm:input").trigger('blur');
if($('form .error').length) {
alert('账号密码输入错误');
return false;
}
if($('form .error1').length) {
alert("验证码错误。");
return false;
}
});
})