js+css实现用户注册界面

最近在web实验课上写了个用户注册界面，由此初步了解了一下js和css。

知识点：

1、css设置字体位置、颜色、阴影、大小。

2、js编写函数实现对文本框内容的合法判断。

注意点：

为了实现在点击注册按钮时不出现页面刷新，这里用到了iframe实现界面不刷新。

参见https://blog.csdn.net/yi_an/article/details/50970865

实验内容：

1、登录页面

设计实现一个用户注册页面，使用表单进行提交。页面应包含的元素如图2-1所示，注意选取适当的输入元素类型，并对其命名；表单的action属性设置为空。

2、实现用户输入信息的校验

利用JavaScript或者jQuery等完成页面元素合法性的校验，例如当用户输入的姓名不符合要求的情况，一旦鼠标离开姓名输入框，则后面的文字变为红色；反之当用户输入的姓名符合要求时，鼠标离开姓名框则后面的文字变为绿色。

如图：

代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>









用户注册



*用户名：

	

用户名由3-5个字符组成


*密码：

	

请输入8-12位密码


*确认密码：

	

两次密码不一致


*Email：

	

格式样例：[email protected]


*手机号码：

	

格式样例：13866688000


*真实姓名：

	

由2-5个中文组成


*省份：

	-请选择-
	河南
	北京
	山东
	河北
	湖北
	湖南


请选择省份!


*技术方向：

	Java
	.Net
	PHP
	网页
	IOS
	Android