js实现注册验证

最新推荐文章于 2024-04-17 09:51:42 发布

he626shidizai

最新推荐文章于 2024-04-17 09:51:42 发布

阅读量6.4k

点赞数 3

分类专栏： web 文章标签：表单验证 js

本文链接：https://blog.csdn.net/he626shidizai/article/details/88997513

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

为什么需要表单验证（前端）?

首先我们要保证提交的数据是正确的，但是把信息都交给服务器去做服务器压力就太大了，所以要进行表单验证。

思路分析

通过getElementById()方法获得表单元素的值
通过字符串方法（包括正则式）对数据进行判断
判断失败，利用alert()方法进行提示，返回false；判断成功，返回true进行表单提交

要点

getElementById(‘str’).value
str.length
正则式
alert()方法

代码

<!DOCTYPE html>
<html>
<head>
	<title>注册验证</title>
	<meta charset='utf-8'/>
	<script type="text/javascript">
		function check(){
			var number = document.getElementById("number").value;
			
			if(number == ""){
				alert("手机号不能为空");
				return false;
				}
			if(/^[0-9][1-9]{10}$/.test(number) == false){	//使用正则表达式
				alert("手机号的格式不对");
				return false;
				}
			var pwd = document.getElementById("pwd").value;
			if(pwd == ""){
				alert("密码不能为空");
				return false;
				}
			if(pwd.length < 6){
				alert("密码的长度太短，应大于6");
				return false;
				}
			if(pwd.length > 12){
				alert("密码的长度太长，应该小于12");
				return false;
				}
			var pwd2  = document.getElementById("pwd2").value;
			if(pwd != pwd2){
				alert("两次输入的密码不一样，请重新输入");
				return false;
				}
			return true;
		}
	</script>
</head>
<body>
	<h2>注册账户</h2>
	<!--使用return check()只有当check的返回值为true表单才进行提交
		相比于get方法（get方法的信息出现在URL中），post方法更加安全性更高
		点击type = submit 的按钮后表单的信息就进行验证并提交
	-->
	<form method="post" name = "myform" onsubmit = "return check()">
		<table>
			<tr>
				<td>请输出手机号:</td>
				<!--name是表单提交信息变量的名字，主要在后端使用；而id是为了标识唯一的元素，所以表单的信息都需要name
					现在根据规范，都建议用id来标识元素
				-->
				<td><input id="number" name="number" type="text"/></td>
			</tr>
			<tr>
				<td>请输入密码：</td>
				<td><input id="pwd" name="password" type="password"></td>
			</tr>
			<tr>
				<td>请再次输入密码：</td>
				<td><input id="pwd2" name="password" type="password"></td>
			</tr>
		</table>
		<input type="submit" name="btn" value="注册">
	</form>
</body>
</html>

效果

在这里插入图片描述

he626shidizai

关注

3
点赞
踩
59

收藏

觉得还不错? 一键收藏
0
评论
js实现注册验证

为什么需要表单验证（前端）?首先我们要保证提交的数据是正确的，但是把信息都交给服务器去做服务器压力就太大了，所以要进行表单验证。思路分析通过getElementById()方法获得表单元素的值通过字符串方法（包括正则式）对数据进行判断判断失败，利用alert()方法进行提示，返回false；判断成功，返回true进行表单提交要点getElementById(‘str’).val...
复制链接

扫一扫