苹果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、登录成功自动跳转到用户中心，失败弹出提示并刷新验证码；

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