web前端之表单验证（一）

最新推荐文章于 2024-04-20 14:59:10 发布

Zella Zhang

最新推荐文章于 2024-04-20 14:59:10 发布

阅读量2.2k

点赞数 2

分类专栏：前端文章标签： html5 jquery css3

本文链接：https://blog.csdn.net/FemaleHacker/article/details/106973822

版权

前端专栏收录该内容

19 篇文章 3 订阅

订阅专栏

表单验证之错误信息右方提示

说明

图1：简单效果图，
图2、3：当所有文本框都为空或者输入不符合要求时，会在右方提示错误。

效果图

未提交前效果图
点击提交时
在这里插入图片描述

html代码

<body>
	<h2>注册用户：</h2>
	<hr>
	<form action="#" >
		<p>用户名：</p>
		<p><input type="text" name="username" class="verify uname"> 
			<span class="error">长度不够或用户名已存在！</span>
		</p>
		<p>密码：</p>
		<p><input type="text" name="password" class="verify pw"> 
			<span class="error">密码长度至少6位！</span>
		</p>
		<p>确认密码：</p>
		<p><input type="text" name="repassword" class="verify repw"> 
			<span class="error">长度不够或两次密码不一致！</span>
		</p>
		<p>邮箱：</p>
		<p><input type="text" name="email" class="verify email"> 
			<span class="error">邮箱格式不正确！</span>
		</p>
		<p>手机号：</p>
		<p><input type="text" name="phone" class="verify phone"> 
			<span class="error">手机号格式不正确！</span>
		</p>
		<p>
			<input type="button" value="提交" class="ok" >
			<input type="reset" value="重置">
		</p>
	</form>
</body>

css代码

<style>	
		*{
			font-family: 微软雅黑;
		}

		.error{
			color: #f00;
			font-weight: bold;
			display: none;
		}
	</style>

jquery代码

<script>
	//给每一个都加一个属性
	$('.verify').data({'s':0});

	//----------用户名验证---------------
	$('.uname').blur(function(){
		val=$.trim(this.value);
		// alert(val);
		//此处先简单判断
		//学完php后可进行数据库操作
		if(val<3 || val=='zmy'){
			//如果当前用户已存在，则将提醒显示
			$(this).next().show();

			//显示就是错误的，则属性s就为0
			$(this).data({'s':0});
		}else{
			//否则，则将提醒隐藏
			$(this).next().hide();

			//不显示就是正确的，则属性s就为1
			$(this).data({'s':1});
		}
	});

	//-----------密码验证------------------
	$('.pw').blur(function(){
		val=this.value;
		if(val.length<6){
			$(this).next().show();
			$(this).data({'s':0});
		}else{
			$(this).next().hide();
			$(this).data({'s':1});
		}
	});

	//--------确认密码-------------------
	$('.repw').blur(function(){
		//确认密码的值
		val=this.value;
		//密码的值
		pwval=$('.pw').val();

		if(val.length<6 || val!=pwval){
			$(this).next().show();
			$(this).data({'s':0});
		}else{
			$(this).next().hide();
			$(this).data({'s':1});
		}
	});

	//----------邮箱格式------------------
	$('.email').blur(function(){
		val=this.value;
		if(val.match(/^\w+@\w+\.\w+$/i)){
			$(this).next().hide();
			$(this).data({'s':1});
		}else{
			$(this).next().show();
			$(this).data({'s':0});
		}
	});

	//----------手机格式------------------
	$('.phone').blur(function(){
		val=this.value;
		if(val.match(/^1[3456789]\d{9}$/)){
			$(this).next().hide();
			$(this).data({'s':1});
		}else{
			$(this).next().show();
			$(this).data({'s':0});
		}
	});

	//---------表单验证--------------------
	$('.ok').click(function(){
		//触发移开事件
		$('.verify').blur();

		//遍历收集每个人身上的s属性值值
		//将获取到的值进行相加，若值不等于5则不可以提交
		tot=0;
		$('.verify').each(function(){
			tot+=$(this).data('s');

		});
		//
		if(tot==5){
			$('form').submit();
		}
	});
</script>

欢迎大家批评指正😊！！！

Zella Zhang

关注

2
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
web前端之表单验证（一）

表单验证效果图图片: 带尺寸的图片: 居中的图片: 居中并且带尺寸的图片: 当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。如何插入一段漂亮的代码片去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的代码片.// An highlighted blockvar foo = 'bar';生成一个适合你的列表项目项目项目项目1项目2项目3 计划任务完成任务创建一个表格一个简单的表格是这么创建的：项目Value
复制链接

扫一扫