注册登陆页面HTML代码该怎么写?

注册登陆页面HTML代码该怎么写?,第1张

以下为个人原创教学例子,任何人引用需注明出自百度知道用户am7972,楼主可供参考\x0d\x0a该例子涵盖了文本框、密码框、下拉菜单、单选框、复选框及文本区的使用\x0d\x0a同时在数据的使用方面涵盖了文本型、数值型、日期型、布尔型的使用\x0d\x0a也涵盖了在会员信息入数据库前,进行严格的数据检查\x0d\x0a不足处,JS验证还不是太完善,不过有服务端认证足够了\x0d\x0a会员注册\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a

会员注员 \x0d\x0a

姓名: \x0d\x0a
密码: \x0d\x0a
性别: 男 女 \x0d\x0a
生日: \x0d\x0a
年龄: \x0d\x0a
爱好: 上网读书 体育 \x0d\x0a
上网方式: \x0d\x0a 拨号上网 无线上网 光纤上网 \x0d\x0a \x0d\x0a
个人简介:

\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a====bb.asp的会员注册非法数据监测====\x0d\x0a0 Then\x0d\x0a Response.write "姓名不能包含特殊符号!@#$%^&*()_-+|?/"",." \x0d\x0a Response.End \x0d\x0a End If\x0d\x0aNext\x0d\x0a'判断密码合不合法,是否包含非法数据userPassword = Trim(userPassword)If userPassword ="" Then Response.write "密码不能为空" Response.EndEnd If\x0d\x0aIf Len(userPassword)>20 Then\x0d\x0a Response.write "密码字数不能超过20个字" \x0d\x0a Response.End\x0d\x0aEnd If\x0d\x0a'判断密码合不合法,是否包含非法数据\x0d\x0aSex = Trim(Sex)\x0d\x0aIf Sex = "" Then\x0d\x0a Response.write "性别不能为空"\x0d\x0a Response.End\x0d\x0aEnd If\x0d\x0aIf Sex "True" And Sex "False" Then\x0d\x0a Response.write "性别不能为不男不女"\x0d\x0a Response.End\x0d\x0aEnd If\x0d\x0a'判断生日合不合法,是否包含非法数据\x0d\x0auserSR = Trim(userSR)\x0d\x0aIf userSR ="" Then\x0d\x0a Response.write "生日不能为空"\x0d\x0a Response.End\x0d\x0aEnd If\x0d\x0aIf Len(userSR)10 Then '例如:2012-6-3 2012-11-23\x0d\x0a Response.write "你输入的生日字数不对,应为2012-6-3或2012-11-23格式" \x0d\x0a Response.End\x0d\x0aEnd If\x0d\x0aIf IsDate(userSR)=False Then\x0d\x0a Response.write "你输入的生日格式不能转化为日期,请核实" \x0d\x0a Response.End\x0d\x0aEnd If\x0d\x0aIf DateDiff("yyyy",userSR,Date())200 Then\x0d\x0a Response.write "根据你输入的生日你可能小于1岁或已经超过200岁了,请核查重新输入" \x0d\x0a Response.End\x0d\x0aEnd If\x0d\x0a'判断年龄合不合法,是否包含非法数据userNL = Trim(userNL)If userNL ="" Then\x0d\x0a Response.write "年龄不能为空" \x0d\x0a Response.End\x0d\x0aEnd If\x0d\x0aIf IsNumeric(userNL)=False Then\x0d\x0a Response.write "你输入的年龄不能转化为数值,请核查"\x0d\x0a Response.End\x0d\x0aEnd If\x0d\x0auserNL = CInt(userNL)\x0d\x0aIf userNL200 Then\x0d\x0a Response.write "你输入的年龄不能小于0岁或者大于200岁,请核查"\x0d\x0a Response.End\x0d\x0aEnd If\x0d\x0a'判断爱好合不合法,是否包含非法数据ah = Trim(ah) '选择多个爱好则系统会用,分开 //测试\x0d\x0aah = Replace(ah," ","")\x0d\x0aarrAh = Split(ah,",")\x0d\x0aFor i = LBound(arrAh) To UBound(arrAh)\x0d\x0a If arrAh(i)"sw" And arrAh(i)"ds" And arrAh(i)"ty" Then \x0d\x0aResponse.write i & "你选择的爱好有问题,请核查" & arrAh(i)\x0d\x0aResponse.End\x0d\x0aEnd If\x0d\x0aNext\x0d\x0a'判断上网方式合不合法,是否包含非法数据swfs = Trim(swfs)If swfs = "" Then\x0d\x0a Response.write "上网方式不能为空"\x0d\x0a Response.End\x0d\x0aEnd If\x0d\x0aIf swfs"bhsw" And swfs"wxsw" And swfs"gxsw" Then\x0d\x0a Response.write "你选择的上网方式有问题,请核查"\x0d\x0a Response.End\x0d\x0aEnd If\x0d\x0a'判断个人简介是否为空,是否超出1000个字\x0d\x0auserGrjs = Trim(userGrjs)\x0d\x0aIf userGrjs = "" Then\x0d\x0a Response.write "个人简介不能为空" \x0d\x0a Response.End\x0d\x0aEnd If\x0d\x0aIf Len(userGrjs) > 1000 Then\x0d\x0a Response.write "个人简介不能超过1000个字"\x0d\x0a Response.End\x0d\x0aEnd If\x0d\x0aResponse.write "数据合法性检测通过"\x0d\x0a%>\x0d\x0a====登陆的HTML代码可相信楼主参照会员注册代码应该没问题了====

首先先说一下HTML5的代码只是在原有的XHTML基础上增加了一些新的标签(还有一些新的特性,例如数据库和缓存等特性)

以下为此页面的结构代码:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="revised" content="" />

<meta name="keywords" content="" />

<meta name="description" content="" />

<meta name="author" content=""  />

<meta name="robots" content="all" />

<title>页面标题</title>

</head>

<body>

<header>

<div></div><!--登陆注册区域-->

</header><!--头部[html5新标签]-->

<nav></nav><!--导航[html5新标签]-->

<div></div><!--banner-->

<div></div><!--左上-->

<div></div><!--右上-->

<div></div><!--左下-->

<div></div><!--右下-->

<footer></footer><!--底部[html5新标签]-->

</body>

</html>

注:以上为页面的大的框架,相对用HTML5新的标签更合理的,全用上了新的带有语义标签。

另外多说一下,[注册登陆]这块在html5的新标签里面没有很合适的语义化的标签,所以依然采用原有的div标签为最合理。html5只是在原有的技术的基础上更细化了,咱在制作代码的过程中没必要必须用HTML5的代码,主要看是否合理,合理的为较合适的。

多说的:不管用XHTML还是HTML5写代码,结构(HTML5)与样式(CSS)尽量要分离!

希望能帮到你!

上一节我们已经创建了一个用户应用,并创建了用户模型,那么我们这节就开始实现一个简单的用户登录注册功能!

登录注册功能Flask有一个非常优秀的扩展Flask-login,我们可以选择使用这个扩展来实现,但为了学习我们暂时不使用这个第三方扩展,而是选择使用session来实现!

首先,我们需要完善登录的html页面, 路径为: app/auth/templates/login.html

代码详解:

这个登陆模板继承了 base.html 的样式,这个 base.html 中的模块及代码其实就是我们之前实现的首页,只是我们把他作为一个模板基类来继承他!

这段代码中其实就是写了一个输入账号密码的表单,其他多余的代码都是为了实现表单的样式而存在的!

这里要特别说明的是这个input表单必须设置name属性,因为后端要根据此name属性来获取用户输入的值!其他属性则需要大家自行去了解学习!

登录功能的后端逻辑视图, 路径为: app/auth/views/auth.py

代码详解: -request.method == 'POST' 判断当前请求是否为post请求方式 - error = None 来初始化一个错误变量,如果未通过登录验证,把错误信息通过消息传送到页面提示用户

这段代码首先在数据库通过用户提交的用户名去查询该用户,用户不存在就会返回None返回错误提示,用户存在则判断密码是否正确,这里用到了一个 check_password_hash() 的方法,这是用来将密文密码解密后与用户输入密码比对方法,与之对应的有一个 generate_password_hash() 的方法用来加密明文密码保存到数据库!

这段代码则是如果没有返回任何错误提示,说明该提交的表单符合我们的要求,并且数据库也存在该用户信息,那么我们只需要清空session,重新将session中的user_id设置为当前登录的id即可!

因此在实现登录注册逻辑之前就必须引入这两个方法:

登录功能虽然实现了,但我们数据库目前还没有任何一个用户,所以此时就应该要去实现用户的注册功能,向数据库新增用户,大概的逻辑是,用户输入用户名及两次密码,先判断该用户是否已经存在,存在则提示更换用户名,不存在则向数据库创建该用户信息,并清空session,重新设置user_id的值为注册用户的id,以达到注册成功后自动登录的目的!

首先,我们需要完善注册的html页面, 路径为: app/auth/templates/register.html

这是注册页面的html,大家自行理解下,这里着重说一个我们在视图中通过 flash() 传递出来的消息,在模板中由以下代码接收!

注册功能的后端逻辑视图, 路径为: app/auth/views/auth.py

这个注册的逻辑基本上涵盖了我们之前所有章节学到的知识点,这里就不再过多地去一一解释代码,大家可自行理解并完善注释!

通过登录和注册功能的实现,我们已经清楚地知道,用户是否登录其实是判断session会话中是否存在用户的id来决定,那么推出登录,我们只需要清除session会话中的用户id即可,这里我们直接选择清空session的方式实现推出功能!

bp.before_app_request() 注册一个在视图函数之前运行的函数,无论请求什么 URL。 都会先检查用户 ID 是否存储在会话中,并从数据库获取该用户的数据,将其存储在 g.user 上,该数据在请求期间持续。

注册完这个函数之后,我们就可以在base.html中的导航的最右侧通过g.user的返回值,判断用户是否已经登录,显示不同的信息!

对于像下一章节我们要实现的用户中心以及管理后台,则必须是带有权限的访问,最基本的权限应该是必须是登录用户,那么所以说对于那些未登录的用户我们需要拒绝访问的功能!

这个其实思路也非常简单,既然在实现模板中调用用户信息的时候,我们把当前登录的用户信息添加到了g对象,那么我们只需要判断g.user的返回值是否为None即可判断用户是否登陆!

到这里关于用户登录注册相关的基本权限问题我们就完成了,注意这些视图函数都在 app/auth/views/auth.py 文件中!


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7134467.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-02
下一篇 2023-04-02

发表评论

登录后才能评论

评论列表(0条)