js 实现简单的表格验证

最新推荐文章于 2024-09-20 16:32:06 发布

原创最新推荐文章于 2024-09-20 16:32:06 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js基础 #js表单验证

前端同时被 2 个专栏收录

9 篇文章

订阅专栏

js基础

6 篇文章

订阅专栏

该博客介绍了一个JS表单验证例子，目前仅涉及表格的空值判断，若表单内容为空或邮箱格式不正确，会给出相应提示信息，后续将继续完善表单验证功能。

此例子暂时只涉及表格的判断空，如果表单内容为空则给出提示信息，邮箱格式不正确也给出提示。后期再继续完善表单的验证功能。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<form action="#"  id="register" onsubmit="return check(this)">
			用户名：<input type="text" name="user" id="user" value="" /><br />
			密码：<input type="password" name="password" id="password" value="" /><br />
			
			邮箱：<input type="text" name="email" id="email" value="" /><br />
			
			<input type="submit" value="提交"/>
		</form>
		
		<script type="text/javascript">

            //为字符串增加 trim 方法，使用正则表达式截取空格
			String.prototype.trim = function(){
				return this.replace(/^s*/,"").replace(/\s*$/,"");
			}

			//负责处理表单 submit 事件的函数
			var check = function(){
				//访问页面中的第一个表单
				var form = document.forms[0];
                //错误字符串
				var errStr = '';
                //当用户名为空时
				if(form.user.value == null || form.user.value.trim() ==""){
					errStr += "\n 用户名不能为空。！";
					form.user.focus();
				}
                //当密码为空时
				if(form.password.value == null || form.password.value.trim() ==""){
					errStr += "\n 密码不能为空。！";
					form.password.focus();
				}
                //当邮件为空时
				if(form.email.value == null || form.email.value.trim() ==""){
					errStr += "\n 邮箱不能为空。！";
					form.email.focus();
				}
				//使用正则表达式校验邮箱的格式是否正确
				if(!/^\w +([-+.]\w+)*@\w+([-+.]\w+)*\.\w+([-+.]\w+)*$/
					.test(form.email.value.trim()))
				{
					errStr += "\n电子邮件格式不正确";
					form.email.focus();
				}
				//如果错误字符串不为空，则表明校验出错
				if(errStr != ""){
                    //弹出错误信息
					alert(errStr);
                    //返回 false ，用于阻止表单提价
					return false;
				}
			}
			
		</script>
	</body>
</html>