web前端注册基础标准版（拥有提示和过滤功能）
来源：互联网 发布：华盛顿和李大学知乎 编辑：程序博客网 时间：2024/05/22 17:55
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css"> @font-face {font-family: "iconfont"; src: url('fonts/iconfont.eot'); /* IE9*/ src: url('fonts/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/iconfont.woff') format('woff'), /* chrome, firefox */ url('fonts/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { display: inline-block; font-family:"iconfont" !important; font-size:15px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; vertical-align: middle; color: #00FF00; }*{margin: 0px;padding: 0px;font-size: 13px;}em{font-style: normal;}.box{width: 400px;height: 1000px;margin: 0px auto;}html{background: white;}form{padding: 10px;}#register>div{width: 390px;height: 80px;}#register>div>div{width: 360px;border-radius: 2px;overflow: hidden; padding-top: 10px;padding-bottom: 10px; border: 1px solid #E6E6E6;box-sizing: border-box; position: relative;}#register span{width: 75px;height: 28px;margin-right: 20px; line-height: 28px; vertical-align: middle; display: inline-block;text-align: right;}#register>div input{width: 230px;height: 28px; outline: none; border: none; vertical-align: middle;}.err_icon{color: #FF0000;}.hint_icon{color: #CCCCCC;}.ver_code>button{height: 50px;top: -1px; right: -1px;border: none; padding-left: 20px;padding-right: 20px;outline: none;cursor: pointer; border: none; position: absolute;color: white; background: rgba(0,0,0,0.5);}.ver_code input{width: 155px !important; margin-left: 47px;}p input{width: 20px;height: 20px;box-sizing: border-box; vertical-align: middle;}p span{width: auto !important; vertical-align: middle;}p span strong{font-weight: 100;cursor: pointer; color: blue;}.submit{width: 320px;height: 45px !important;margin-top: 20px; position: relative;}.submit button{width: 100% !important;height: 100% !important;cursor: pointer; border: none; border-radius: 3px; color: white; background: orangered;}.hook{height: 28px; margin-left: 5px;display: inline-block; position: absolute;}.hook i{height: 28px;line-height: 28px;}#register>div>div{margin-bottom: 2px;}.hint i{line-height: 14px; vertical-align: middle;}.hint em,.err em{font-size: 12px;vertical-align: middle; color: #999999;}.ver_code,#ver_code_input,.c_password,#confirm{background: #F5F5F5;}</style></head><body><div class="box"><form id="register"><div id="user_name_box"><div id="user_name_box_child"><span>用户名：</span><input id="user_name" name="user_name" type="text" maxlength="20" placeholder="您的账户名和登录名"/><div class="hook" id="hook_box"></div></div><p class="hint" id="user_name_hint"></p></div><div><div><span>密码：</span><input id="password" name="pass_word" type="password" maxlength="20" placeholder="建议至少使用两种字符组合"/><div class="hook" id="p_hook_box"></div></div><p class="hint" id="password_hint"></p></div><div><div class="c_password"><span>确认密码：</span><input id="confirm" type="password" maxlength="20" placeholder="请再次输入密码（锁定状态）" disabled="disabled"/><div class="hook" id="c_hook_box"></div></div><p class="hint" id="c_password_hint"></p></div><div><div><span>手机号码：</span><input id="phone" name="phone" maxlength="11" type="text" placeholder="请输入常用的手机号码"/><div class="hook" id="ph_hook_box"></div></div><p class="hint" id="phone_hint"></p></div><div><div class="ver_code"><input id="ver_code_input" disabled="disabled" type="text" maxlength="6" placeholder="输入验证码（锁定状态）"/><div class="hook" id="ver_hook_box"></div><button id="get_ver_code" type="button">获取验证码</button></div><p class="hint" id="ver_hint"></p></div><p><input id="agree" type="checkbox" /><span>阅读并同意<strong>《平台名称用户注册协议》</strong></span></p><div class="submit"><button type="button" id="submit_button">注册</button></div></form></div><script type="text/javascript" src="js/jquery-1.9.0.min.js" ></script><script type="text/javascript" src="js/test3.js" ></script></body></html>js代码：
function findStr(str, n){ var tmp = 0; for (var i = 0; i < str.length; i++){ if(str.charAt(i)==n){ tmp++; } } return tmp;}function initHint(main,kook,hint){if(main.val().length==0){kook.html('');hint.html('');}}function rB(main){if(main.children('i').length == 1){return true;}else{return false;}}function setConfirm(main,str,box){main.attr('placeholder',str).css('background','#F5F5F5').attr('disabled','disabled');box.css('background','#F5F5F5');}$(document).ready(function(){//用户名验证$('#user_name').focus(function(){$('#user_name_hint').html('<i class="icon iconfont hint_icon"></i> <em>支持中文、字母、数字、“-”“_”的组合，4-20个字符</em>');}).blur(function(){if(this.value.length==0){initHint($('#user_name'),$('#hook_box'),$('#user_name_hint'));return;}if(/[^\w\u4e00-\u9fa5]/g.test(this.value)){$('#user_name_hint').html('<i class="icon iconfont err_icon"></i> <em>含有非法字符</em>');$('#hook_box').html('');return;}if(!(this.value.length>=4)){$('#user_name_hint').html('<i class="icon iconfont err_icon"></i> <em>长度只能在4-20个字符之间</em>');$('#hook_box').html('');return;}$('#hook_box').html('<i class="icon iconfont hook"></i>');$('#user_name_hint').html('');});$('#user_name').keyup(function(){initHint($('#user_name'),$('#hook_box'),$('#user_name_hint'));});//用户密码验证$('#password').focus(function(){$('#password_hint').html('<i class="icon iconfont hint_icon"></i> <em>建议使用字母、数字和符号两种及以上的组合，6-20个字符</em>');}).blur(function(){if(this.value.length == 0){initHint($('#password'),$('#p_hook_box'),$('#password_hint'));setConfirm($('#confirm'),'请再次输入密码（锁定状态）',$('.c_password'));return;}var m = findStr(this.value, this.value.substring(0,1));if(this.value.length == m){$('#password_hint').html('<i class="icon iconfont err_icon"></i> <em>密码过于简单</em>');setConfirm($('#confirm'),'请再次输入密码（锁定状态）',$('.c_password'));$('#p_hook_box').html('');return;}if(this.value.length==0){$('#password_hint').html('');$('#p_hook_box').html('');setConfirm($('#confirm'),'请再次输入密码（锁定状态）',$('.c_password'));return;}if(this.value.length < 6 || this.value.length > 16){ $('#password_hint').html('<i class="icon iconfont err_icon"></i> <em>长度只能在6-20个字符之间</em>'); setConfirm($('#confirm'),'请再次输入密码（锁定状态）',$('.c_password'));$('#p_hook_box').html(''); return;}if(!/[^\d]/g.test(this.value)){ $('#password_hint').html('<i class="icon iconfont err_icon"></i> <em>密码不能全为数字</em>'); setConfirm($('#confirm'),'请再次输入密码（锁定状态）',$('.c_password'));$('#p_hook_box').html(''); return;}if(!/[^a-zA-Z]/g.test(this.value)){ $('#password_hint').html('<i class="icon iconfont err_icon"></i> <em>密码不能全为字母</em>'); setConfirm($('#confirm'),'请再次输入密码（锁定状态）',$('.c_password'));$('#p_hook_box').html(''); return;}$('#confirm').removeAttr('disabled');$('#confirm').css('background','transparent');$('.c_password').css('background','transparent');$('#confirm').attr('placeholder','请再次输入密码');$('#p_hook_box').html('<i class="icon iconfont hook"></i>');$('#password_hint').html('');});$('#password').keyup(function(){$('#c_password_hint').html('');$('#c_hook_box').html('');$('#confirm').val('');setConfirm($('#confirm'),'请再次输入密码（锁定状态）',$('.c_password'));initHint($('#password'),$('#p_hook_box'),$('#password_hint'));});//确认密码$('#confirm').focus(function(){$('#c_password_hint').html('<i class="icon iconfont hint_icon"></i> <em>请再次输入密码</em>');}).blur(function(){if(this.value.length == 0){$('#c_password_hint').html('');$('#c_hook_box').html('');return;}if(!(this.value == $('#password').val())){$('#c_password_hint').html('<i class="icon iconfont err_icon"></i> <em>密码输入不一致</em>');$('#c_hook_box').html('');}else{$('#c_password_hint').html('');$('#c_hook_box').html('<i class="icon iconfont hook"></i>');}});$('#confirm').keyup(function(){$('#c_password_hint').html('');initHint($('#confirm'),$('#c_hook_box'),$('#c_password_hint'));if(this.value == $('#password').val()){$('#c_hook_box').html('<i class="icon iconfont hook"></i>');}});//手机号码$('#phone').focus(function(){$('#phone_hint').html('<i class="icon iconfont hint_icon"></i> <em>完成验证后，你可以用该手机登录和找回密码</em>');}).blur(function(){if(this.value.length == 0){initHint($('#phone'),$('#ph_hook_box'),$('#phone_hint'));return;}var booleanValue = true,value,subValue;value = this.value;if(value==''){booleanValue = true;}if(value.length>3){subValue = value.substring(-1,3);if(booleanValue&&subValue.length==3){if(subValue.substring(1,2)=='3'||subValue.substring(1,2)=='5'||subValue.substring(1,2)=='8'){booleanValue = /^[1]{1}(([3]|[5]|[8]){1})([0-9]{1})$/.test(subValue);}else if(subValue.substring(1,2)=='4'){booleanValue = /^[1]{1}[4]{1}(([5]|[7]){1})$/.test(subValue);}else if(subValue.substring(1,2)=='7'){booleanValue = /^[1]{1}[7]{1}(([0]|[1]|[3]|[5]|[6]|[7]|[8]){1})$/.test(subValue);}else{booleanValue = false;}}}else{if(value.length==1){booleanValue = /^[1]{1}$/.test(value);}else if(value.length==2){booleanValue = /^[1]{1}(([3]|[4]|[5]|[7]|[8]){1})$/.test(value);}else if(booleanValue&&value.length==3){if(value.substring(1,2)=='3'||value.substring(1,2)=='5'||value.substring(1,2)=='8'){booleanValue = /^[1]{1}(([3]|[5]|[8]){1})([0-9]{1})$/.test(value);}else if(value.substring(1,2)=='4'){booleanValue = /^[1]{1}[4]{1}(([5]|[7]){1})$/.test(value);}else if(value.substring(1,2)=='7'){booleanValue = /^[1]{1}[7]{1}(([0]|[1]|[3]|[5]|[6]|[7]|[8]){1})$/.test(value);}else{booleanValue = false;}}}if(!booleanValue||!/^\d*$/.test(value)||value.length<11){//显示错误标志$('#ph_hook_box').html('');$('#phone_hint').html('<i class="icon iconfont err_icon"></i> <em>格式错误</em>');setConfirm($('#ver_code_input'),'输入验证码（锁定状态）',$('.c_password'));}else{//隐藏错误标志$('#p_hook_box').html('');$('#phone_hint').html('');}if(/^\d{11}$/.test(value)&&booleanValue){//显示正确标志$('#phone_hint').html('');$('#ph_hook_box').html('<i class="icon iconfont hook"></i>');$('#ver_code_input').removeAttr('disabled').css('background','transparent').attr('placeholder','输入验证码');$('.ver_code').css('background','transparent');}});$('#phone').keyup(function(){initHint($('#phone'),$('#ph_hook_box'),$('#phone_hint'));setConfirm($('#ver_code_input'),'输入验证码（锁定状态）',$('.ver_code'));$('#ver_code_input').val('');$('#ver_hint').html('');$('#ver_hook_box').html('');});//手机验证码$('#ver_code_input').focus(function(){$('#ver_hint').html('<i class="icon iconfont hint_icon"></i> <em>输入六位数的手机验证码</em>');}).blur(function(){if(this.value.length == 0){$('#ver_hint').html('');$('#ver_hook_box').html('');return;}if(/[^\d]/g.test(this.value)||this.value.length<6){$('#ver_hint').html('<i class="icon iconfont err_icon"></i> <em>请输入六位数的手机验证码</em>');return;}//此处需要加入验证码验证$('#ver_hint').html('');$('#ver_hook_box').html('<i class="icon iconfont hook"></i>');});$('#ver_code_input').keyup(function(){initHint($('#ver_code_input'),$('#ver_hook_box'),$('#ver_hint'));});//注册按钮$('#submit_button').click(function(){if(rB($('#hook_box'))&&rB($('#p_hook_box'))&&rB($('#c_hook_box'))&&rB($('#ph_hook_box'))&&rB($('#ver_hook_box'))&&$('#agree').is(':checked')){alert($('#register').serialize());//$.ajax({type:'post',url:'',data:$('#register').serialize(),success:function(data){////注册成功跳转的页面//window.location.href = data['url'];//}});}});});效果如图：
1 0
- web前端注册基础标准版（拥有提示和过滤功能）
- web前端 基础部分（四） BOM和DOM
- Web前端之注册信息
- 测试web过滤的功能
- java web 学习笔记二，注册和登录功能
- flask-web开发中登录和注册功能的实现
- SQL Server 2008 企业版和标准版功能对照表
- web前端 基础部分（一） HTML
- web前端 基础部分（二） CSS
- web前端 基础部分（三） JavaScript
- WEB前端开发基础（干货）
- web前端：Canvas 基础（一）
- web前端基础
- Web前端基础
- Web前端基础
- Web前端基础----HTML
- web前端开发基础
- 【web前端】CSS基础
- stompest库的应用实例
- Linux下Redis的安装和部署
- linux字符集
- android.view.WindowManager$BadTokenException: Unable to add window -- token android.os.BinderProxy@4
- 考察数据科学家数据降维知识的40道题，快来测测吧
- web前端注册基础标准版（拥有提示和过滤功能）
- PHP中限制IP段访问、禁止IP提交表单
- struts2中的拦截器使用
- PAT1050 螺旋矩阵
- RN项目报错“RCTBundleURLProvider.h” file not found
- 细说 javaScript 创建对象
- Pytorch遇到的几个问题
- solr学习笔记(3)--使用solrj调用solr服务
- Azure Active Dirctory集成本地Active Dirctory
