【简单到死系列】用户注册的网页制作+如何用查看元素的方式调适代码

最新推荐文章于 2020-10-28 00:01:55 发布

watarabe

最新推荐文章于 2020-10-28 00:01:55 发布

阅读量580

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/hawazaki/article/details/45677287

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<span style="font-size:14px;">
</span>

<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size:14px;"><%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %></span></span>

<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></span><pre name="code" class="html"><span style="font-size:14px;">/!--以上为Dw自带代码，不需要管--/</span>

<title>用户注册</title></head><body><form>/!--注册表,即有提交功能，会自动跳转页面--/<table>/!--表格--/

<span style="font-size:14px;"><tr>/!--行--/</span>

<span style="font-size:14px;"><td><span style="font-family: Arial, Helvetica, sans-serif;">用户名：</td></span><span style="font-family: Arial, Helvetica, sans-serif;">/!--列，在标签以内的为一列--/</span></span>

<span style="font-size:14px;"><span style="font-family: Arial, Helvetica, sans-serif;"><td><input type="text" id="name" />/!--input是输入标签,会出现输入框--/</td>    </span><span style="font-family: Arial, Helvetica, sans-serif;">/!--此列和上一列在一行内--/</span></span>

<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size:14px;"></tr></span></span>

<span style="font-size:14px;">
<tr><td>密码：</td><td><input type="password" id="psw" /></td></tr>/!-id是给元素取名字，这样方便之后调用，每个元素的名字是唯一的---/
<tr><td>请再输入一次密码：</td><td><input type="password" id="psw2" /></td></tr>
</table><tr><button οnclick="regis()">确定</button></tr><span style="font-family: Arial, Helvetica, sans-serif;">/!--onclick的唯一取值是scirpt，也就是Java脚本，用来写事件的函数--/</span>
</form>
<script> 
function regis()
{
	var name=document.getElementById("name").value;
        var psw=document.getElementById("psw").value;
	var psw2=document.getElementById("psw2").value;<span style="font-family: Arial, Helvetica, sans-serif;">/!--注意点：要先申明变量，变量只有唯一类型var；用</span><span style="font-family: Arial, Helvetica, sans-serif;">document.getElementById("psw")来调用HTML文本，【.value】是变量的值</span><span style="font-family: Arial, Helvetica, sans-serif;">--/</span><span style="font-family: Arial, Helvetica, sans-serif;">
</span>	if(name==null||name=="")/!--""代表空--/
	    {alert("用户名不能为空");}<span style="font-family: Arial, Helvetica, sans-serif;">/!--alert是脚本中的警告函数，使用会弹出写有括号内文本的对话框--/</span>
	else
	   {
			if(psw!=psw2)
			{alert("两次密码不一致！");}
			else
			{alert("注册成功");}
		}
	}
</script>

</body>
</html></span>

只是用了html和Java脚本，没有涉及css和jquery等知识，是一个非常简单的注册页面。

基本上只是运用HTML的标签来完成整个页面的制作，最后就是Java脚本的写法，只是接触到了引用HTML文本的方法以及其在动态页面上的作用（如何判断密码是否一致，用户名是否为空）

P.S.由于dreamweaver不能对动态信息进行反馈，如果页面出现了一些问题，可以采用查看网页元素的方法来完成调试。

详细方法：

1.在网页点右键，选择审查元素

2.点到sources栏

3.在代码的可能出错的一行（或者随意某一行）点击一下，做一个断点（即程序会运行到被点击的这一行前面一句时会停住）

4.点击图中框出来的按钮，可让程序运行到下一行 5.可以再右面查看输入的值是否进入

这样可以较为方便地得知哪一行程序出现了问题。