cari

Rumah >hujung hadapan web >tutorial js >Borang pendaftaran pengguna perkongsian kod kesan operasi segera dilaksanakan oleh jquery_jquery

Borang pendaftaran pengguna perkongsian kod kesan operasi segera dilaksanakan oleh jquery_jquery

WBOY
WBOYasal
2016-05-16 15:41:451266semak imbas

Contoh dalam artikel ini menerangkan kesan operasi segera borang pendaftaran pengguna yang dilaksanakan oleh jquery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Kod sumber untuk gesaan teks pop timbul di atas borang pendaftaran pengguna yang dilaksanakan oleh jQuery ialah sekeping kod yang bukan sahaja menggesa langkah berjaga-jaga di atas borang input, tetapi juga melakukan pengesahan input Ia adalah kod kesan khas yang sangat praktikal yang bernilai pembelajaran.
运行效果图：                                -------------------查看效果 下载源码------>-------> --------

Petua: Jika penyemak imbas tidak berfungsi dengan betul, anda boleh cuba menukar mod penyemakan imbas.

Kod kesan operasi segera borang pendaftaran pengguna yang dilaksanakan oleh jquery untuk dikongsi dengan anda adalah seperti berikut 

<!doctype html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery用户注册表单上方弹窗提示效果</title>
<link href="css/layout.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<br>
<link href="css/home_login.css" rel="stylesheet" type="text/css">
<div class="nc-login-layout">
 <div class="nc-login">
 <div class="nc-login-title">
 <h3>用户注册</h3>
 </div>
 <div class="nc-login-content">
 <form id="register_form" method="post" action="http://www.jb51.net/jiaoben/">
 <dl>
 <dt>用户名</dt>
 <dd style="min-height:54px;">
 <input type="text" id="user_name" name="user_name" class="text tip" title="3-20位字符，可由中文、英文、数字及“_”、“-”组成" />
 <label></label></dd>
 </dl>
 <dl>
 <dt>设置密码</dt>
 <dd style="min-height:54px;">
 <input type="password" id="password" name="password" class="text tip" title="6-16位字符，可由英文、数字及标点符号组成" />
 <label></label></dd>
 </dl>
 <dl>
 <dt>确认密码</dt>
 <dd style="min-height:54px;">
 <input type="password" id="password_confirm" name="password_confirm" class="text tip" title="请再次输入您的密码" />
 <label></label></dd>
 </dl>
 <dl>
 <dt>邮箱</dt>
 <dd style="min-height:54px;">
 <input type="text" id="email" name="email" class="text tip" title="请输入常用的邮箱，将用来找回密码、接受订单通知等" />
 <label></label></dd>
 </dl>

 <dl>
 <dt> </dt>
 <dd>
 <input type="submit" name="Submit" value="立即注册" class="submit fl" title="立即注册" />
 <input name="agree" type="checkbox" class="fl mt10 ml10" id="clause" value="1" checked="checked" />
 <span for="clause" class="fl ml5">阅读并同意<a href="###" target="_blank" class="agreement" title="阅读并同意">服务协议</a></span>
 <label></label></dd>
 </dl>
 <input type="hidden" value name="ref_url">
 <input name="nchash" type="hidden" value="206f94ec" />
 </form>
 <div class="clear">
 </div>
 </div>
 <div class="nc-login-bottom">
 </div>
 </div>
</div>
<script type="text/javascript" src="js/jquery.poshytip.min.js" charset="utf-8"></script>
<script>
//注册表单提示
$('.tip').poshytip({
 className: 'tip-yellowsimple',
 showOn: 'focus',
 alignTo: 'target',
 alignX: 'center',
 alignY: 'top',
 offsetX: 0,
 offsetY: 5,
 allowTipHover: false
});

//注册表单验证
$(function(){
 jQuery.validator.addMethod("lettersonly", function(value, element) {
 return this.optional(element) || /^[^:%,'\*\"\s\<\>\&]+$/i.test(value);
 }, "Letters only please"); 
 jQuery.validator.addMethod("lettersmin", function(value, element) {
 return this.optional(element) || ($.trim(value.replace(/[^\u0000-\u00ff]/g,"aa")).length>=3);
 }, "Letters min please"); 
 jQuery.validator.addMethod("lettersmax", function(value, element) {
 return this.optional(element) || ($.trim(value.replace(/[^\u0000-\u00ff]/g,"aa")).length<=15);
 }, "Letters max please");
 $("#register_form").validate({
 errorPlacement: function(error, element){
  var error_td = element.parent('dd');
  error_td.find('label').hide();
  error_td.append(error);
 },
 submitHandler:function(form){
  ajaxpost('register_form', '', '', 'onerror') 
 },
 rules : {
  user_name : {
  required : true,
  lettersmin : true,
  lettersmax : true,
  lettersonly : true,
  remote : {
   url :'index.php&#63;act=login&op=check_member&column=ok',
   type:'get',
   data:{
   user_name : function(){
    return $('#user_name').val();
   }
   }
  }
  },
  password : {
  required : true,
  minlength: 6,
 maxlength: 20
  },
  password_confirm : {
  required : true,
  equalTo : '#password'
  },
  email : {
  required : true,
  email : true,
  remote : {
   url : 'index.php&#63;act=login&op=check_email',
   type: 'get',
   data:{
   email : function(){
    return $('#email').val();
   }
   }
  }
  },
  captcha : {
  required : true,
  minlength: 4,
  remote : {
   url : 'index.php&#63;act=seccode&op=check&nchash=206f94ec',
   type: 'get',
   data:{
   captcha : function(){
    return $('#captcha').val();
   }
   }
  }
  },
  agree : {
  required : true
  }
 },
 messages : {
  user_name : {
  required : '用户名不能为空',
  lettersmin : '用户名必须在3-15个字符之间',
  lettersmax : '用户名必须在3-15个字符之间',
 lettersonly: '用户名不能包含敏感字符',
 remote : '该用户名已经存在'
  },
  password : {
  required : '密码不能为空',
  minlength: '密码长度应在6-20个字符之间',
 maxlength: '密码长度应在6-20个字符之间'
  },
  password_confirm : {
  required : '请再次输入您的密码',
  equalTo : '两次输入的密码不一致'
  },
  email : {
  required : '电子邮箱不能为空',
  email : '这不是一个有效的电子邮箱',
 remote : '该电子邮箱已经存在'
  },
  captcha : {
  required : '请输入验证码',
  minlength: '验证码不正确',
 remote : '验证码不正确'
  },
  agree : {
  required : '请阅读并同意该协议'
  }
 }
 });
});
</script>


</body>
</html>
Di atas adalah kod operasi segera borang pendaftaran pengguna yang dilaksanakan oleh jquery untuk dikongsikan dengan anda.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Teknik fail-data_javascript muat naik fail Angular JsArtikel seterusnya：Teknik fail-data_javascript muat naik fail Angular Js

Artikel berkaitan

Lihat lagi