仿京东的注册页面, 使用jQuery进行表单验证
2016-10-11 09:09
811 查看
HTML页面
<pre name="code" class="html"><html>
<head>
<title>京东注册</title>
<meta charset="utf-8">
<script type="text/javascript" src="../jquery-2.1.4.js"></script>
<style type="text/css">
body{padding-top: 30px}
#web{margin: 0 auto; width: 400px}
.title{font-size: 18px; padding-left: 25px; border-left: solid #999 1px; margin-bottom: 40px}
.form_item{width:398px; height: 52px; border:solid #ddd 1px; position: relative;}
.form_item label{width:90px; height:52px; line-height: 52px; float: left;padding-left: 20px; font-size: 14px; color: #666}
.form_item .code{position: absolute; right: 0; top: 0; text-align: center;}
.form_item input{border:0; font-size: 14px; width: 190px; height: 19px; padding-bottom: 11px; padding-left: 20px; padding-top: 16px}
.input-tip{color:#c5c5c5; height: 27px; font-size: 12px; padding-top: 5px}
.input-tip span{height: 22px; line-height: 22px}
button, #btn{width:100%; height: 54px; color:#fff; background-color: #e22; border:0; font-size: 16px; font-family: "微软雅黑"}
</style>
</head>
<body>
<div id="web">
<form action="10_10zy.php" method="post">
<div class="title">欢迎注册京东账号</div>
<div class="form_item">
<label>用 户 名</label>
<input type="text" value="" placeholder="您的账户名和登录名" id="uname" name="uname" />
</div>
<div class="input-tip">
<span id="uname_error"></span>
</div>
<div class="form_item">
<label>设 置 密 码</label>
<input type="text" value="" placeholder="建议至少使用两种字符组合" id="pwd" name="pwd" />
</div>
<div class="input-tip">
<span id="pwd_error"></span>
</div>
<div class="form_item">
<label>确 认 密 码</label>
<input type="text" value="" placeholder="请再次输入密码" id="confirm_pwd" name="confirm_pwd" />
</div>
<div class="input-tip">
<span id="confirm_pwd_error"></span>
</div>
<div class="form_item">
<label>中国 + 86</label>
<input type="text" value="" placeholder="建议使用常用手机" id="phone" name="phone" />
</div>
<div class="input-tip">
<span id="phone_error"></span>
</div>
<div class="form_item">
<label>验 证 码</label>
<input type="text" value="" placeholder="请输入验证码" id="code"/>
<label class="code"></label>
</div>
<div class="input-tip">
<span id="code_error"></span>
</div>
<div style="color:#333; font-size:12px">
<input type="checkbox" name="agreen" id="agreen"/>
我已阅读并同意
<a style="color: #38f">《京东用户注册协议》</a>
</div>
<div class="input-tip">
<span></span>
</div>
<input type="submit" name="btn" id="btn" value="立即注册">
<div class="input-tip">
<span></span>
</div>
<a href="10_10zy_login.php"><button type="button">登录</button></a>
</form>
</div>
</body>
</html></pre><pre name="code" class="html">jQuery验证代码
<pre name="code" class="javascript"><script type="text/javascript">
$(function(){
//$("#")
// 二维数组, 用于生成随机验证码
var array = [["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"], ["0", "1", "2", "3", "4", "6", "7", "8", "9"]];
var str = "";
randomCode();
// 点击更换验证码
$(".code").click(function(){
randomCode();
});
// 随机生成验证码
function randomCode(){
str = "";
for (var i = 0; i < 4; i++) {
// 随机生成一个下标
var temp = Math.random();
temp = temp < 0.5 ? Math.floor(temp) : Math.ceil(temp);
var length = array[temp].length;
//从任意值开始至任意值:
//parseInt(Math.random() * (上限-下限+1) + 下限);
var index = parseInt(Math.random() * length);
str += array[temp][index];
}
$(".code").html(str);
}
// 用户名正则表达式
var uname_reg = /^[\u4e00-\u9fa5]{4,20}$|^[\dA-Za-z_\-]{4,20}$/;
var uname_ok = false;
// 用户名输入框获取焦点
$("#uname").focus(function(){
$(this).css("outline", "none");
$(this).attr("placeholder", "");
$(this).parent().css("border-color", "#999");
$("#uname_error").css("color", "#c5c5c5");
$("#uname_error").html("支持中文, 字母, 数字, \"-\", \"_\", 的组合, 4-20个字符");
});
$("#uname").blur(function(){
if ($(this).val() == "") {
$(this).attr("placeholder", "您的账户名和登录名");
$("#uname_error").html("");
uname_ok = false;
} else if ($(this).val().length < 4 || $(this).val().length > 20) {
// 长度不对
$("#uname_error").html("长度只能在4-20个字符之间");
$("#uname_error").css("color", "red");
$(this).parent().css("border-color", "red");
uname_ok = false;
} else if (!$(this).val().match(uname_reg)) {
// 有特殊字符
$("#uname_error").html("格式错误, 仅支持中文, 字母, 数字, \"-\", \"_\"的组合");
$("#uname_error").css("color", "red");
$(this).parent().css("border-color", "red");
uname_ok = false;
} else {
uname_ok = true;
}
});
var pwd_reg = /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{6,20}$/;
var pwd_ok = false;
// 密码输入框获取焦点
$("#pwd").focus(function(){
$(this).css("outline", "none");
$(this).attr("placeholder", "");
$(this).parent().css("border-color", "#999");
$("#pwd_error").css("color", "#c5c5c5");
$("#pwd_error").html("建议使用字母, 数字和符号两种及以上的组合, 6-20个字符");
});
$("#pwd").blur(function(){
if ($(this).val() == "") {
$(this).attr("placeholder", "建议至少使用两种字符组合");
$("#pwd_error").html("");
pwd_ok = false;
} else if ($(this).val().length < 6 || $(this).val().length > 20) {
// 长度不对
$("#pwd_error").html("长度只能在6-20个字符之间");
$("#pwd_error").css("color", "red");
$(this).parent().css("border-color", "red");
pwd_ok = false;
} else if (!$(this).val().match(pwd_reg)) {
// 不是两种及以上的组合
$("#pwd_error").html("有被盗风险, 建议使用字母, 数字和符号两种及以上组合");
$("#pwd_error").css("color", "red");
$(this).parent().css("border-color", "red");
pwd_ok = false;
} else {
pwd_ok = true;
}
});
// 再次密码输入框获取焦点
var confirm_pwd_ok = false;
$("#confirm_pwd").focus(function(){
$(this).css("outline", "none");
$(this).attr("placeholder", "");
$(this).parent().css("border-color", "#999");
$("#confirm_pwd_error").css("color", "#c5c5c5");
$("#confirm_pwd_error").html("请再次输入密码");
});
$("#confirm_pwd").blur(function(){
if ($(this).val() == "") {
$(this).attr("placeholder", "请再次输入密码");
$("#confirm_pwd_error").html("");
confirm_pwd_ok = false;
} else if ($(this).val() != $("#pwd").val()) {
// 再次输入的密码不一致
$("#confirm_pwd_error").html("两次输入的密码不一致");
$("#confirm_pwd_error").css("color", "red");
$(this).parent().css("border-color", "red");
confirm_pwd_ok = false;
} else {
confirm_pwd_ok = true;
}
});
// 手机号码输入框获取焦点
var phone_reg = /^1[3|4|5|7|8]\d{9}$/;
var phone_ok = false;
$("#phone").focus(function(){
$(this).css("outline", "none");
$(this).attr("placeholder", "");
$(this).parent().css("border-color", "#999");
$("#phone_error").css("color", "#c5c5c5");
$("#phone_error").html("验证完成后,
9e03
可以使用该手机登录和找回密码");
});
$("#phone").blur(function(){
if ($(this).val() == "") {
$(this).attr("placeholder", "建议使用常用手机");
$("#phone_error").html("");
phone_ok = false;
} else if ($(this).val().length != 11) {
// 长度不对
$("#phone_error").html("格式有错");
$("#phone_error").css("color", "red");
$(this).parent().css("border-color", "red");
phone_ok = false;
} else if (!$(this).val().match(phone_reg)) {
// 输入的不是手机号码
$("#phone_error").html("格式有错");
$("#phone_error").css("color", "red");
$(this).parent().css("border-color", "red");
phone_ok = false;
} else {
phone_ok = true;
}
});
// 验证码输入框获取焦点
var code_ok = false;
$("#code").focus(function(){
$(this).css("outline", "none");
$(this).attr("placeholder", "");
$(this).parent().css("border-color", "#999");
$("#code_error").css("color", "#c5c5c5");
$("#code_error").html("看不清? 点击更换验证码");
});
$("#code").blur(function(){
if ($(this).val() == "") {
$(this).attr("placeholder", "建议使用常用手机");
$("#code_error").html("");
code_ok = false;
} else if ($(this).val() != str) {
// 输入错误的验证码
$("#code_error").html("验证码输入错误");
$("#code_error").css("color", "red");
$(this).parent().css("border-color", "red");
code_ok = false;
} else {
code_ok = true;
}
});
// 是否同意协议
$("#agreen").click(function(){
//alert($("#agreen").att("checked"));
if ($(this).attr('checked')) {
$(this).attr('checked', false);
} else {
$(this).attr('checked', true);
}
});<span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space:pre"> </span>// 点击注册按钮, 向本页面提交数据</span>
$("#btn").click(function(event) {
/* Act on the event */
if ($("#agreen").attr('checked') && uname_ok && pwd_ok && confirm_pwd_ok && phone_ok && code_ok) {
$.ajax({
url:"10_10zy.php",
data:{uname:$("#uname").val(), pwd:$("#pwd").val(), phone:$("#phone").val()},
type:"post",
dataType:"text",
success:function(result){
}
});
} else {
alert('信息输入不完整, 请核对');
return false;
}
});
});
</script></pre><pre name="code" class="javascript">php处理数据
<pre name="code" class="php"><?php
$dbServer = 'localhost:3306';
$dbUser = 'MySQL数据库连接名';
$dbPass = '密码';
$dbName = '要使用的数据库名';
$conn = mysqli_connect($dbServer, $dbUser, $dbPass, $dbName);
mysqli_set_charset($conn, 'utf8')
// 判断用户名, 密码, 手机号是否设置
if (isset($_POST['uname']) && isset($_POST['pwd']) && isset($_POST['phone'])) {
// 根据用户名进行查询, 判断当前用户名是否存在
$sql = "select * from users where u_name = '{$_POST['uname']}'";
$res = mysqli_query($conn, $sql);
// 用户名已经存在, 退出
if (mysqli_num_rows($res) > 0) {
die("此用户名已经存在<br/><button><a href=\"10_10zy.php\">返回</a></button>");
} else {
// 用户名不存在, 插入到数据库中
$sql = "insert into users(u_name, u_pwd, u_phone) values('{$_POST['uname']}', '{$_POST['pwd']}', '{$_POST['phone']}')";
$result = mysqli_query($conn, $sql);
if ($result) {
echo "注册成功<br/>";
echo "<a href=\"10_10zy.php\"><button width:\"70px\">返回</button></a>";
echo "<button><a href=\"10_10zy_login.php\">登录</a></button>";
die();
}
}
}
?></pre><br /><br /><pre>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- php用户注册页面使用js进行表单验证具体实例
- 回发或回调参数无效。在配置中使用 或在页面中使用 启用了事件验证。出于安全目的，此功能验证回发或回调事件的参数是否来源于最初呈现这些事件的服务器控件。如果数据有效并且是预期的，则使用 ClientScriptManager.RegisterForEventValidation 方法来注册回发或回调数据以进行验证。
- php用户注册页面利用js进行表单验证
- 使用jquery.form.js 进行表单提交，通过回调函数实现页面互动功能。
- 使用jquery.validate.js插件进行表单里控件的验证
- 模仿京东用户注册 用JQuery实现简单表单验证（附效果图）
- 使用jQuery validate 验证注册表单
- 使用 纯JQuery 进行 表单 验证
- jQuery中使用ajax对表单数据进行异步验证
- 使用jquery.form.js 进行表单提交，通过回调函数实现页面互动
- Java使用正则表达式对注册页面进行验证功能实现
- 回发或回调参数无效。在配置中使用 或在页面中使用 启用了事件验证。出于安全目的，此功能验证回发或回调事件的参数是否来源于最初呈现这些事件的服务器控件。如果数据有效并且是预期的，则使用 ClientScriptManager.RegisterForEventValidation 方法来注册回发或回调数据以进行验证。
- 使用 纯JQuery 进行 表单 验证
- php用户注册页面利用js进行表单验证
- 使用jquery的验证框架，对表单进行验证(简单、基础)
- ASP.NET jQuery 食谱12 (通过使用jQuery validation插件简单实现用户注册页面验证功能)
- liferay中使用jQuery Validation Engine进行ajax验证,不通过也提交表单的解决方案
- 使用jQuery validate 验证注册表单实例演示
- 使用jquery validate和ajax进行表单验证并向后台提交数据