仿京东的注册页面, 使用jQuery进行表单验证

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("验证完成后, 可以使用该手机登录和找回密码");});$("#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>

仿京东的注册页面, 使用jQuery进行表单验证相关推荐

jquery validate表单验证插件
1 表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
html中表单的校验的插件,功能强大的jquery.validate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...
JQuery实现表单验证(注册页面)
注册页面功能实现: 验证会员名密码不能为空或者包含空格,并且保证长度至少6位验证邮箱符合规则,并且不能为空重复密码要与密码一致 1.页面的样式 <form action="#&qu ...
基于猫冬的 jQuery formValidator表单验证的asp.net 控件
为了方便在asp.net中使用,封装了一下 <猫冬的 jQuery formValidator表单验证> 控件其实也不是什么控件,只是一个类,方便生成前台js. 特点: 1.后台生成的 ...
Jquery ValidateEngine表单验证
Jquery ValidateEngine表单验证用法:http://www.position-relative.net/creation/formValidator/demoValidators. ...
jQuery的表单验证
jQuery的表单验证直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
jQuery实现表单验证
1.基于html表单,利用jQuery实现表单验证功能. 2.html基本结构和样式: 3.html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
整理的16个有用的jQuery Form(表单)验证教程
表单在每个网站开发者必不可少的组成部份,而最烦繁的也是表单验证部份,借助于jQuery一些现有成熟的插件,可以大大减少我们的开发工作量以及减少很多重复出现的问题 ,这篇文章将整理出非常好的16篇非常有 ...
基于jQuery的表单验证插件：jValidate
网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼 ...
JQuery.validationEngine表单验证插件
一.说明 JQuery.validationEngine表单验证控件功能强大,自带了样式显示模式: 1.字符类型:非空验证.最大长度.最小长度.相等判断.数字和空格.数字和英文字母 2.数字类型:数字 ...

仿京东的注册页面, 使用jQuery进行表单验证

仿京东的注册页面, 使用jQuery进行表单验证相关推荐

最新文章

热门文章