前端简单入门第七讲 使用JavaScript完成表单简单的数据校验

7 篇文章 1 订阅
25 篇文章 2 订阅

网上闲逛时,如果我们对某个网站非常感兴趣,通常都会注册一个账户,网站都会对注册页面的数据进行复杂的校验。但这里我只是讲一下对注册页面的数据进行非空的简单校验!!!如果有某个值没有输入,点击注册按钮提交时,则弹出一个对话框进行提示!!!
我从自己编写的注册页面中抽出核心代码如下:

<form action="../index.html" method="post">
	<table border="0" width="100%" cellspacing="15">
		<tr>
			<td>用户名</td>
			<td><input type="text" id="username" name="username"></td>
		</tr>
		<tr>
			<td>密码</td>
			<td><input type="password" id="password" name="password"></td>
		</tr>
		<tr>
			<td>确认密码</td>
			<td><input type="password" id="repassword" name="repassword"></td>
		</tr>
		<tr>
			<td>性别</td>
			<td><input type="radio" name="sex" value=""><input type="radio" name="sex" value=""></td>
		</tr>
		<tr>
			<td>籍贯</td>
			<td>
				<select name="province">
					<option>-请选择-</option>
				</select>
				<select name="city">
					<option>-请选择-</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>爱好</td>
			<td>
				<input type="checkbox" name="hobby" value="篮球" />篮球
				<input type="checkbox" name="hobby" value="足球" />足球
				<input type="checkbox" name="hobby" value="排球" />排球
				<input type="checkbox" name="hobby" value="羽毛球" />羽毛球
			</td>
		</tr>
		<tr>
			<td>邮箱</td>
			<td><input type="text" id="email" name="email"></td>
		</tr>
		<tr>
			<td colspan="2"><input type="submit" value="注册"></td>
		</tr>
	</table>
</form>

在火狐浏览器上的运行效果为:
这里写图片描述
接下来我按照如下步骤完成对用户名、密码(以及确认密码)和邮箱的简单校验:

  1. 当form表单提交的时候,触发onsubmit事件;
  2. 编写onsubmit事件触发的函数。

这样注册页面的核心代码就变成:

<form action="../index.html" method="post" onsubmit="return checkForm();">
	<table border="0" width="100%" cellspacing="15">
		<tr>
			<td>用户名</td>
			<td><input type="text" id="username" name="username"></td>
		</tr>
		<tr>
			<td>密码</td>
			<td><input type="password" id="password" name="password"></td>
		</tr>
		<tr>
			<td>确认密码</td>
			<td><input type="password" id="repassword" name="repassword"></td>
		</tr>
		<tr>
			<td>性别</td>
			<td><input type="radio" name="sex" value=""><input type="radio" name="sex" value=""></td>
		</tr>
		<tr>
			<td>籍贯</td>
			<td>
				<select name="province">
					<option>-请选择-</option>
				</select>
				<select name="city">
					<option>-请选择-</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>爱好</td>
			<td>
				<input type="checkbox" name="hobby" value="篮球" />篮球
				<input type="checkbox" name="hobby" value="足球" />足球
				<input type="checkbox" name="hobby" value="排球" />排球
				<input type="checkbox" name="hobby" value="羽毛球" />羽毛球
			</td>
		</tr>
		<tr>
			<td>邮箱</td>
			<td><input type="text" id="email" name="email"></td>
		</tr>
		<tr>
			<td colspan="2"><input type="submit" value="注册"></td>
		</tr>
	</table>
</form>

然后再编写onsubmit事件触发的函数——checkForm(),如下:

<script>
	function checkForm() {
		// 获得文本框的值
		var username = document.getElementById("username").value;
		// alert(username);
		if (username == "") {
			alert("用户名不能为空!");
			return false;
		}
		
		// 校验密码
		var password = document.getElementById("password").value;
		if (password == "") {
			alert("密码不能为空!");
			return false;
		}
		
		// 校验确认密码
		var repassword = document.getElementById("repassword").value;
		if (repassword != password) {
			alert("两次输入密码不一致!");
			return false;
		}
		
		// 校验邮箱
		var email = document.getElementById("email").value;
		// JS校验正则表达式就有两个方法:一个是String对象中的match方法,还有一个是正则对象中的test方法
		// str.match("正则表达式");	
		// 正则对象.test("字符串");
		
		if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(email)) {
			alert("邮箱格式不正确!");
			return false;
		}	
	}
</script>

注意:JavaScript校验正则表达式有两个方法:

  • 一个是String对象中的match方法,如:

    str.match("正则表达式");
    
  • 一个是正则对象中的test方法,如:

    正则对象.test("字符串");
    

邮箱校验的正则表达式不用我们自己亲自编写,网上一搜一大把,多使用别人造好的轮子。完整代码可参考前端简单入门第七讲 使用JavaScript完成表单简单的数据校验

  • 0
    点赞
  • 0
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
目录 第1章 HTML 5简介 1 1.1 HTML历史与HTML 5 2 1.2 HTML 5的优势 6 1.3 HTML 5的基本结构和语法变化 8 1.4 本章小结 12 第2章 HTML 5的常用元素与属性 14 2.1 HTML 5保留的常用元素 15 2.2 HTML 5增强的iframe元素 34 2.3 HTML 5保留的通用属性 40 2.4 HTML 5新增的通用属性 44 2.5 HTML 5新增的结构元素 48 2.6 HTML 5新增的语义元素 55 2.7 HTML 5头部和元信息 59 2.8 HTML 5新增的拖放API 63 2.9 本章小结 71 第3章 HTML 5表单相关的元素和属性 72 3.1 HTML原有的表单表单控件 73 3.2 HTML 5新增的表单属性 83 3.3 HTML 5新增的表单元素 90 3.4 HTML 5新增的客户端校验 96 3.5 本章小结 100 第4章 HTML 5的绘图支持 101 4.1 使用canvas元素 102 4.2 绘图 103 4.3 坐标变换 118 4.4 控制叠加风格 123 4.5 控制填充风格 124 4.6 位图处理 128 4.7 输出位图 132 4.8 动画制作 133 4.9 本章小结 136 第5章 HTML 5的多媒体支持 137 5.1 使用audio和video元素 138 5.2 使用JavaScript脚本控制媒体播放 141 5.3 事件监听 144 5.4 track元素 146 5.5 本章小结 149 第6章 级联样式单与CSS选择器 150 6.1 样式单概述 151 6.2 CSS样式单的基本使用 152 6.3 CSS选择器 158 6.4 伪元素选择器 167 6.5 CSS 3新增的伪类选择器 176 6.6 在脚本中修改显示样式 195 6.7 本章小结 197 第7章 字体与文本相关属性 198 7.1 字体相关属性 199 7.2 CSS 3支持的颜色表示方法 205 7.3 文本相关属性 206 7.4 CSS 3新增的服务器字体 212 7.5 本章小结 215 第8章 背景、边框和边距相关属性 216 8.1 盒模型简介 217 8.2 背景相关属性 217 8.3 使用渐变背景 226 8.4 边框相关属性 239 8.5 使用opacity控制透明度 246 8.6 padding和margin相关属性 247 8.7 本章小结 249 第9章 大小、定位、轮廓相关属性 250 9.1 width、height相关属性 251 9.2 定位相关属性 255 9.3 轮廓相关属性 257 9.4 用户界面和滤镜属性 258 9.5 本章小结 263 第10章 盒模型与布局相关属性 264 10.1 盒模型和display属性 265 10.2 对盒添加阴影 275 10.3 布局相关属性 278 10.4 CSS 3新增的多栏布局 285 10.5 使用弹性盒布局 289 10.6 本章小结 306 第11章 表格、列表相关属性及media query 307 11.1 表格相关属性 308 11.2 列表相关属性 313 11.3 控制光标的属性 316 11.4 media query和响应式布局 317 11.5 本章小结 323 第12章 变形与动画相关属性 324 12.1 CSS 3提供的变形支持 325 12.2 CSS 3新增的3D变换 337 12.3 CSS 3提供的Transition动画 341 12.4 CSS 3提供的Animation动画 345 12.5 本章小结 349 第13章 JavaScript语法详解 350 13.1 JavaScript简介 351 13.2 数据类型和变量 356 13.3 基本数据类型 364 13.4 复合类型 376 13.5 运算符 381 13.6 语句 391 13.7 流程控制 395 13.8 函数 403 13.9 函数的参数处理 425 13.10 面向对象 429 13.11 创建对象 437 13.12 本章小结 443 第14章 DOM编程详解 444 14.1 DOM模型概述 445 14.2 DOM模型和HTML文档 446 14.3 访问HTML元素 448 14.4 修改HTML元素 456 14.5 增加HTML元素 458 14.6 删除HTML元素 463 14.7 传统的DHTML模型 467 14.8 使用window对象 469 14.9 navigator和地理定位 479 14.10 HTML 5增强的History API 485 14.11 使用do
相关推荐
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:白松林 返回首页

打赏

李阿昀

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值