input 注册页面

一，项目要求

用户名长度是4-16
手机号码长度是11位

二，HTML静态页面设计

.trLeft {
				text-align: right;
				padding-right: 5px;
			}
			
			.trRight {
				text-align: left;
				padding-left: 5px;
				color: red;
			}
			
			.infoImg {
				float: left;
				display: inline;
				margin-top: 0;
				margin-left: 5px;
			}
			
			p {
				float: left;
				display: inline;
				margin: auto;
			}
			
			div img {
				width: 20px;
			}

效果展示

三，JavaScript动态代码

          window.onload = function() {
				function $(elementId) {
					return document.getElementById(elementId);
				}
				//验证用户名
				function yongHu() {
					var user = $('user').value;
					var userId = $("user_prompt");
					var userImg = $('userImg');
					userId.innerHTML = '';
					var reg = /^[a-zA-Z0-9]{4,16}$/;
					if(!reg.test(user)){
						userImg.src = 'images/error.png';
						userId.innerHTML = "请输入4-16位用户名";
						return false;
					}else{
						userImg.src = "images/ok.png";
						return true;
					}
				}
				var userInput = $('user');
				userInput.onblur = function() {
					yongHu();
					return false;
				};
				function dianHua() {
					var mobile = $('mobile').value;
					var mobileId = $("mobile_prompt");
					var mobileImg = $('mobileImg');
					mobileId.innerHTML = '';
					
					if(mobile.charAt(0) != 1) {
						mobileImg.src = 'images/error.png';
						mobileId.innerHTML = '手机号开始位应该为1';
						return false;
					} else if(mobile.length < 1 || mobile.length > 11) {
						mobileImg.src = 'images/error.png';
						mobile.innerHTML = "请输入1-11位数字字符";
						return false;
					}
					for(var i = 0; i < mobile.length; i++) {
						if(isNaN(mobile.charAt(i))) {
							mobileImg.src = 'images/error.png';
							mobileId.innerHTML = '手机号码只能为数字';
							return false;
						}
					}
					mobileImg.src = "images/ok.png";
					return true;
				}
				var mobileInput = $('mobile');
				mobileInput.onblur = function() {
					dianHua();
					return false;
				};
				$('registerForm').onsubmit = function() {
					if(yongHu() && dianHua()) {
						return true;
					}
					return false;
				}
			}

效果展示

输入正确

输入错误

四，知识点

1.if …else 语句

if(布尔表达式){
//如果布尔表达式的值为true
}else{
//如果布尔表达式的值为false
}

2.test() 方法

定义： test() 方法用于检测一个字符串是否匹配某个模式.如果字符串中有匹配的值返回 true ，否则返回 false。

语法：
> reg.test( )

参数	描述
string	必需。要检测的字符串

3.onblur 事件

定义： onblur 事件会在对象失去焦点时发生。

语法：
> userInput.onblur = function() {
}

4.charAt() 方法

定义： charAt() 方法用于返回指定索引处的字符。索引范围为从 0 到 length() - 1。

语法：
*> string.charAt(int index)

参数	描述
int	index-字符的索引

5.onsubmit 事件

定义： onsubmit 事件在表单提交时触发。

语法：
*> object.onsubmit = function(){
myScript
};