php用户注册页面利用js进行表单验证具体实例
复制代码 代码如下:
<!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>用户注册 - phpstudy</title>
<link href=\"../css/login.css\" rel=\"stylesheet\" type=\"text/css\" />
<link href=\"../css/page_bottom.css\" rel=\"stylesheet\" type=\"text/css\" />
<script type=\"text/javascript\" src=\"../js/jquery-1.7.1.js\"></script>
<script type=\"text/javascript\">
var flag = {
\"email\":false,
\"nickname\":false,
\"password\":false,
\"verify\":false
};
$(function(){
$(\"#txtEmail\").blur(function () {
var email=$(this).val();
//alert(email);
if(email==\"\"){
$(\"#email\\\\.info\").html(\"Email地址不能为空\");
return;
}
var pattern=/\\b(^[\'_A-Za-z0-9-]+(\\.[\'_A-Za-z0-9-]+)*@([A-Za-z0-9-])+(\\.[A-Za-z0-9-]+)*((\\.[A-Za-z0-9]{2,})|(\\.[A-Za-z0-9]{2,}\\.[A-Za-z0-9]{2,}))$)\\b/;
if(!pattern.test(email)){
$(\"#email\\\\.info\").html(\"Email格式不正确\");
return;
}
$.get(\"check_email.php?email=\"+email,null,
function(data){
$(\"#email\\\\.info\").html(data);
if (data==\"可以注册\") {
flag.email=true;
}
}
);
});
$(\"#txtNickName\").blur(function () {
var nickname=$(this).val();
if(nickname==\"\"){
$(\"#name\\\\.info\").html(\"昵称不能为空\");
return;
}
var pattern = /\\b(^[\'A-Za-z0-9]{4,20}$)\\b/;
if (!pattern.test(nickname)) {
$(\"#name\\\\.info\").html(\"昵称格式不正确\");
return;
}else{
$(\"#name\\\\.info\").html(\"昵称格式正确\");
flag.nickname=true;
return;
}
});
$(\"#txtPassword\").blur(function () {
var password=$(this).val();
if (password==\"\") {
$(\"#password\\\\.info\").html(\"密码不能为空\");
return;
}
var pattern = /\\b(^[\'A-Za-z0-9]{4,20}$)\\b/;
if (!pattern.test(password)) {
$(\"#password\\\\.info\").html(\"密码格式不正确\");
return;
}else{
$(\"#password\\\\.info\").html(\"密码格式正确\");
//flag.password=true;
return;
}
});
$(\"#txtRepeatPass\").blur(function () {
var password1=$(this).val();
if (password1==\"\") {
$(\"#password1\\\\.info\").html(\"密码不能为空\");
return;
}
var pattern = /\\b(^[\'A-Za-z0-9]{4,20}$)\\b/;
if (!pattern.test(password1)) {
$(\"#password1\\\\.info\").html(\"密码格式不正确\");
return;
}else if(password1!=$(\"#txtPassword\").val()){
$(\"#password1\\\\.info\").html(\"两次输入的密码不一致\");
return;
}else{
$(\"#password1\\\\.info\").html(\"重复密码正确\");
flag.password=true;
return;
}
});
$(\"#txtVerifyCode\").blur(function () {
var verify=$(this).val();
if(verify==\"\"){
$(\"#number\\\\.info\").html(\"验证码不能为空\");
return;
}
$.post(\"./verify/check.php\",{verify:verify},
function(data){
$(\"#number\\\\.info\").html(data);
if (data==\"验证成功\") {
flag.verify=true;
}
}
);
})
$(\"#f\").submit(function(){
var ok = flag.email&&flag.password&&flag.verify&&flag.nickname
if(ok==false){
alert(\"表单项正在检测或存在错误\");
history.back();
return false;
}
return true;
});
})
</script>
</head>
<body>
<?php include(\"../common/head.php\"); ?>
<div class=\"login_step\">
注册步骤:<span class=\"red_bold\">1.填写信息</span> > 2.验证邮箱 > 3.注册成功
</div>
<div class=\"fill_message\">
<form name=\"ctl00\" method=\"post\" action=\"save_reg.php\" id=\"f\">
<h2>以下均为必填项</h2>
<table class=\"tab_login\" >
<tr>
<td valign=\"top\" class=\"w1\">请填写您的Email地址：</td>
<td>
<input name=\"email\" type=\"text\" id=\"txtEmail\" class=\"text_input\"/>
<div class=\"text_left\" id=\"emailValidMsg\">
<p>请填写有效的Email地址。</p>
<span id=\"email.info\" style=\"color:red\"></span>
</div>
</td>
</tr>
<tr>
<td valign=\"top\" class=\"w1\">设置您在phpstudy的昵称：</td>
<td>
<input name=\"nickname\" type=\"text\" id=\"txtNickName\" class=\"text_input\" />
<div class=\"text_left\" id=\"nickNameValidMsg\">
<p>由小写英文字母、中文、数字组成，长度4－20个字符，一个汉字为两个字符。</p>
<span id=\"name.info\" style=\"color:red\"></span>
</div>
</td>
</tr>
<tr>
<td valign=\"top\" class=\"w1\">设置密码：</td>
<td>
<input name=\"password\" type=\"password\" id=\"txtPassword\" class=\"text_input\" />
<div class=\"text_left\" id=\"passwordValidMsg\">
<p>您的密码可以由大小写英文字母、数字组成，长度6－20位。</p>
<span id=\"password.info\" style=\"color:red\"></span>
</div>
</td>
</tr>
<tr>
<td valign=\"top\" class=\"w1\">再次输入您设置的密码：</td>
<td>
<input name=\"password1\" type=\"password\" id=\"txtRepeatPass\" class=\"text_input\"/>
<div class=\"text_left\" id=\"repeatPassValidMsg\">
<span id=\"password1.info\" style=\"color:red\"></span>
</div>
</td>
</tr>
<tr>
<td valign=\"top\" class=\"w1\">验证码：</td>
<td>
<img class=\"yzm_img\" id=\'imgVcode\' src=\'./verify/verify.php\' style=\"cursor:pointer\" border=\'0\' onclick=\"document.getElementById(\'imgVcode\').src=\'./verify/verify.php?t=\'+Math.random()\"/>
<input name=\"number\" type=\"text\" id=\"txtVerifyCode\" class=\"yzm_input\"/>
<div class=\"text_left t1\">
<p class=\"t1\">
<span id=\"vcodeValidMsg\">请输入图片中的四个字母。</span>
<a href=\"#\" style=\"cursor:pointer\" onclick=\"document.getElementById(\'imgVcode\').src=\'./verify/verify.php?t=\'+Math.random()\">看不清楚？换个图片</a>
<br />
<span id=\"number.info\" style=\"color:red\"></span>
</p>
</div>
</td>
</tr>
</table>
<div class=\"login_in\">
<input id=\"btnClientRegister\" class=\"button_1\" name=\"submit\" type=\"submit\" value=\"注 册\"/>
</div>
</form>
</div>
<?php include(\"../common/foot.php\"); ?>
</body>
</html>
本文地址：https://www.stayed.cn/item/22062
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)