苹果CMSV10用户登录页面开发教程

影视站长圈为大家分享苹果cmsV10用户中心登录页面的完整代码，包含表单、验证码验证、回车登录、AJAX提交等完整功能，直接复制即可使用。

页面文件路径

文件目录：html/user/login.html

该页面用于网站用户账号密码登录，支持后台开启验证码验证，适配所有苹果cmsV10模板使用。

用户登录表单完整代码

<!-- 登录表单 -->
<form method="post" action="">
   <h4>账户信息</h4>
   <div>
      <label>账号</label>
      <input type="text" name="user_name" placeholder="请输入您的登录账号">
   </div>
   <div>
      <label>密码</label>
      <input type="password" name="user_pwd" placeholder="请输入您的登录密码">
   </div>
   {if condition="$GLOBALS['config']['user']['login_verify'] eq 1"}
   <div>
      <label>验证码</label>
      <input type="text" name="verify" placeholder="请输入验证码">
      <img src="{:url('verify/index')}" onClick="this.src=this.src+'?'" alt="单击刷新" />
   </div>
   {/if}
   <input type="button" value="立即登录">
</form>

<script type="text/javascript">
	$(function(){
		$("body").bind('keyup',function(event) {
			if(event.keyCode==13){ $('#btnLogin').click(); }
		});
		$('#btn_submit').click(function() {
			if ($('#user_name').val() == '') { alert('请输入用户！'); $("#user_name").focus(); return false; }
			if ($('#user_pwd').val() == '') { alert('请输入密码！'); $("#user_pwd").focus(); return false; }
			if ($('#verify').length> 0 && $('#verify').val() == '') { alert('请输入验证码！'); $("#verify").focus(); return false; }
			$.ajax({
				url: "{:url('user/login')}",
				type: "post",
				dataType: "json",
				data: $('#fm').serialize(),
				beforeSend: function () {
					$("#btn_submit").css("background","#fd6a6a").val("loading...");
				},
				success: function (r) {
					if(r.code==1){
						location.href="{:url('user/index')}";
					}
					else{
						alert(r.msg);
						$('#verify_img').click();
					}
				},
				complete: function () {
					$("#btn_submit").css("background","#fa4646").val("立即登录");
				}
			});
		});
	});
</script>

使用说明与建议

1、将代码直接放入html/user/login.html文件即可生效；

2、支持后台开启/关闭登录验证码，代码会自动判断显示；

3、支持键盘回车键快速登录，提升用户操作体验；

4、登录前自动校验账号、密码、验证码，减少提交错误；

5、登录成功自动跳转到用户中心，失败弹出提示并刷新验证码；

影视站长圈建议：正式运营站点建议开启登录验证码，可有效防止恶意暴力破解，提升网站账号安全等级。