素材牛VIP会员

jQuery简单实用的登录注册验证效果

 所属分类:网页特效-表单特效,登录注册

 浏览:6215次  评论:0次  更新时间:2016-12-18
牛币素材VIP可免积分下载
jQuery简单实用的登录注册验证效果兼容IE6
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:jQuery简单实用的用户注册表单验证代码,带整套的样式

详细介绍

使用方法:

引入CSS样式文件

<link href="css/sucainiu.css" rel="stylesheet" type="text/css" />

引入jQuery库文件、特效JS文件

<script src="http://www.sucainiu.com/themes/cdn/jquery/jquery-1.10.2.js"></script>
<script language='javascript' src="js/sucainiu.js"></script>

HTML结构

<form id="form" action="http://sc.chinaz.com/" method="post" onSubmit="return check();">
  <div id="form_submit" class="form_submit">
    <div class="fieldset">
      <div class="field-group">
        <label class="required title">手机号码</label>
        <span class="control-group" id="mobile_input">
        <div class="input_add_long_background">
          <input class="register_input" type="text" id="mobile" name="mobile" maxLength="11" value="" onblur="__changeUserName('mobile');">
        </div>
        </span>
        <label class="tips">仅用于发送服务开通与到期提醒以及紧急故障方便联系到您,绝对保密</label>
      </div>
      <div class="field-group">
        <label class="required title">邮箱</label>
        <span class="control-group" id="email_input">
        <div class="input_add_long_background">
          <input class="register_input" type="text" id="email" name="email" maxLength="50" value="" onblur="__changeUserName('email');">
        </div>
        </span>
        <label class="tips">请输入您常用的邮箱</label>
      </div>
      <div class="field-group">
        <label class="required title">登录账号</label>
        <span class="control-group" style="line-height:28px;">
        <input id="way_mobile" type="radio" value="mobile" name="username" checked onclick="__changeUserName('mobile');">
        手机号码
        <input id="way_email" type="radio" value="email" name="username" onclick="__changeUserName('email');">
        邮箱 </span>
        <label class="tips" style="margin-bottom:5px;" id="tooltext1">请选择以哪个作为您的登录账号</label>
      </div>
      <div class="field-group">
        <label class="required title">设置密码</label>
        <span class="control-group" id="password1_input">
        <div class="input_add_long_background">
          <input class="register_input" type="password" id="password1" name="password1" maxLength="20" value="" onblur="checkPwd1(this.value);" />
        </div>
        </span>
        <label class="tips">请使用6~20个英文字母(区分大小写)、符号或数字</label>
      </div>
      <div class="field-group">
        <label class="required title">短信验证码</label>
        <span class="control-group" id="code_input">
        <div class="input_add_background" style="margin-right:15px;">
          <input class="register_input_ot" type="text" id="code" name="code" max_length="6" value="" onblur="checkAuthCode(this.value);">
        </div>
        </span>
        <label class="tips">若尝试多次仍无法接收到短信验证码,请您联系在线客服帮您开通账号</label>
      </div>
    </div>
  </div>
  <div id="div_submit" class="div_submit">
    <div class='div_submit_button'>
      <input id="submit" type="submit" value="注册" class='button_button disabled'>
    </div>
  </div>
</form>

JS验证

function __changeUserName(of){
  var username=$('#'+of).val();
  if(of=='email'){
	  if (username.search(/^[\w\.+-]+@[\w\.+-]+$/) == -1) {
			showTooltips('email_input','请输入正确的Email地址');
			return;
	}					
  }
  else{
	  if(username=='' || !isMobilePhone(username)) {
		  showTooltips('mobile_input','请输入正确的手机号码');
		  return;
	  }
  }
}
function checkPwd1(pwd1) {
	if (pwd1.search(/^.{6,20}$/) == -1) {
		showTooltips('password1_input','密码为空或位数太少');
	}else {
		hideTooltips('password1_input');
	}
}	
function checkEmail(email) {
	if (email.search(/^.+@.+$/) == -1) {
		showTooltips('email_input','邮箱格式不正确');
	}else {
		hideTooltips('email_input');
	}
}
function checkAuthCode(authcode) {
	if (authcode == '' || authcode.length != 6) {
		showTooltips('code_input','验证码不正确');
	}else {
		hideTooltips('code_input');
 }     
}
function check() {
	hideAllTooltips();
	var ckh_result = true;
	if ($('#email').val() == '') {
	showTooltips('email_input','邮箱不能为空');
	ckh_result = false;
  }
  if ($('#password1').val() == '') {
	showTooltips('password1_input','密码不能为空');
	ckh_result = false;
  }      
  if($('#mobile').val()=='' || !isMobilePhone($('#mobile').val())) {            
	  showTooltips('mobile_input','手机号码不正确');
	  ckh_result = false;
  }
  if ($('#code').val() == '' || $('#code').val().length !=6) {
	showTooltips('code_input','验证码不正确');
	ckh_result = false;
  }
  if ($('#verify').attr('checked') == false){
	showTooltips('checkbox_input','对不起,您不同意Webluker的《使用协议》无法注册');
	ckh_result = false;
  }
  return ckh_result;
}
function checkMobilePhone(telphone) {
	if(telphone=='' || !isMobilePhone(telphone)) {
	showTooltips('mobile_input','请输入正确的手机号码');
  }else{
	hideTooltips('mobile_input');
  }
}
function isMobilePhone(value) {
if(value.search(/^(\+\d{2,3})?\d{11}$/) == -1)
return false;
else
return true;
} 

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)