当前位置：首页 > 编程资源 > 编程问答 >内容正文

编程问答

表单验证之用户注册

发布时间：2025/4/5 编程问答 34 豆豆

生活随笔收集整理的这篇文章主要介绍了表单验证之用户注册小编觉得挺不错的,现在分享给大家,帮大家做个参考.

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title></title>
	<script>

	var names = ["tom","jack","lily","韩梅梅"];

	//表单验证
	function mySub(){

	var userName = document.forms['myForm']['userName'].value;
	var pwd = document.forms['myForm']['pwd'].value;
	var tel = document.forms['myForm']['tel'].value;

	if(userName.length<3 \|\| userName.length>6){
	alert("用户名必须为3-6位");
	return false;
	}

	//判断用户名是否可用，面向对象的编程思想，原则：高内聚、低耦合
	var b = isName(userName);
	if(b){
	document.getElementById("isCan").innerHTML = "用户名已存在";
	return false;
	}else{
	document.getElementById("isCan").innerHTML = "";
	}

	//判断用户名是否重复，面向过程
	// for(var i=0;i<names.length;i++){
	// var n = names[i];
	// if(n == userName){
	// alert("用户名已存在");
	// return false;
	// }
	// }


	if(pwd.length<6){
	alert("密码必须大于6位");
	return false;
	}

	return true;

	}

	//判断用户名，参数为判断的用户名
	function isName(str){
	for(var i=0;i<names.length;i++){
	if(names[i] == str){
	return true;
	}
	}

	return false;
	}

	</script>

	</head>
	<body >

	<h1>用户注册</h1>
	<span>规则：用户名长度为3-6个字符</span>
	<hr />
	<form name="myForm" action="a.html" method="get" onsubmit="return mySub()">
	<p>
	用户名：<input name="userName" type="text" /><span id="isCan" style="color: red;"></span>
	</p>
	<p>
	密码：<input name="pwd" type="password" />
	</p>
	<p>
	电话：<input name="tel" type="text" />
	</p>
	<p>
	<input type="submit" />
	</p>
	</form>


	</body>
	</html>

以上是生活随笔为你收集整理的表单验证之用户注册的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。