【第六章】表单验证

最新推荐文章于 2022-03-11 00:10:13 发布
最新推荐文章于 2022-03-11 00:10:13 发布
阅读量139 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45695622/article/details/103226729
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单验证</title>
		<script language="JavaScript" src="js/jquery-1.11.1.min.js"></script>
	</head>

	<body>
		<form>
			<h3 align="center">用户注册</h3>
			<div class="dt">用户名：<input type="text" id="username" name="username" size="20" class="required"/>
			</div>
			<div class="dt">密&nbsp;&nbsp;码：<input type="password" id="pwd" name="pwd" size="20" class="required"/>
			</div>
			<div class="dt">性&nbsp;&nbsp;别：<input type="text" id="sex" name="sex" size="4" maxlength="3"/>
			</div>
			<div class="dt">密&nbsp;&nbsp;码：<input type="text" id="age" name="age" size="4" maxlength="3"/>
			</div>
			<div class="dt">
				<input type="submit" name="sub" value="注册" />
				</div>
		</form>
	</body>
	<script>
		$(function(){
			$("form :input.required").each(function(){
				var $required=$("<strong class='star'>*</strong>");
				$(this).parent().append($required);
			})
			$("form :input").blur(function(){
				if($(this).is("#username")){
					if($(this).val()==""){
						alert("用户名不能为空!");
					}
				}
				if($(this).is("#pwe")){
					if($(this).val()==""){
						alert("密码不能为空!");
					}
					if(this.value.length<8){
						alert("密码不能小于八位，请重新输入!");
					}
				}
			})
		})
	</script>
</html>
JavaScript豆豆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript之表单验证
m0_67331668的博客
03-07 817
兄弟们，我又又又来啦，今天给大家带来的是表单验证 目录 一、简单验证 二、 正则验证 《1》什么是正则验证？ 《2》正则的规矩 《3》正则的注意事项 《4》正则的使用 三、二级联动 什么是二级联动？ 一、简单验证 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>表单验证</title> <s...
Javascript第六章世上最全常用RegExp正则表达式及表单验证源码第七课
Camel
04-16 530
元字符： 很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。 一、校验数字的表达式 数字：1*$ n位的数字：^\d{n}$ 至少n位的数字：^\d{n,}$ m-n位的数字：^\d{m,n}$ 零和非零开头的数字...
纯js表单提交模板
qq_45774645的博客
07-22 737
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单验证</title> <style type="text/css"> span { color: red; font-size: 12px; } </style> </head> <body> <script
HTML—表单验证
qq_41139281的博客
05-23 269
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;表单注册&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form&gt; &lt;table
表单验证
qq_45337854的博客
11-24 101
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单验证</title> <script src="jquery-1.11.1.min.js" type="text/javascript"></script> &lt...
bootstarp表单验证
05-10
Bootstrap表单验证是一种在网页开发中确保用户输入数据有效性的技术。Bootstrap，作为最流行的前端框架之一，提供了优雅的样式和组件，使开发者能够轻松创建响应式和美观的界面。结合jQuery，我们可以实现动态和交互...
第11章 表单与验证
08-10
1. jQuery Validate插件：这是一个广泛使用的jQuery插件，提供了丰富的验证规则和易于定制的接口，简化了表单验证的实现。 2. Formik：对于React开发，Formik是一个强大的表单管理库，它包含验证功能，让表单状态...
微信小程序表单验证.rar
10-19
在微信小程序开发中，表单验证是一个至关重要的环节，它确保了用户输入的数据符合预期，提高了用户体验，并且有助于保持后台数据的准确性。由于微信小程序的原生表单组件并未内置完整的验证功能，开发者通常需要借助...
jQuery表单验证
10-29
jQuery表单验证结合了jQuery的便利性和第三方插件的强大功能，使开发者能够快速有效地实现表单验证。理解并熟练运用这些技术，不仅可以提高工作效率，还能确保应用的用户体验和数据质量。在实际开发中，要灵活运用...
vue实现表单数据验证的实例代码
09-29
Vue 提供了多种方式来实现表单验证，包括内置的`v-model`和自定义指令。 在Vue中，表单验证通常结合`el-form`组件和`v-model`一起使用，如给定的代码所示。`el-form`是Element UI库中的组件，专门用于创建表单，而`...
js validateForm 表单验证.html
weixin_42193179的博客
06-05 557
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js validateForm 表单验证</title> <script> /*参考：https://www.runoob.com/js/js-validation.html*/ function validateForm() { .
HTML5中的表单验证
Ahren_ye的专栏
08-07 1712
表单验证   在HTML 5中，在增加了大量的表单元素与属性的同时，也增加了大量在提交时对表单与表单内新增元素进行内容有效性验证的功能，本节将针对这些验证进行详细介绍。 一、 自动验证 在HTML 5中，通过对元素使用属性的方法，可以实现在表单提交时执行自动验证的功能。 1．required属性 HTML 5中新增的required属性可以应用在大多数输入元素上（除了隐藏元素、图片元素
HTML|表单初级验证
Alan_Lowe
07-22 368
HTML|表单初级验证 1.placeholder 很多时候文本框的提示信息可以帮助人们更好更快的进行浏览，我们可以可以placeholder来给用户提示信息，比如我们写一个个签，提示信息为请填写你的个性签名： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单初级验证</title> </head> <bo
【HTML】08-表单验证
JeffHan^_^的博客
03-11 721
<!-- 使用html提供的属性进行基础表单验证 1.required属性：非空检验 2.maxlength属性：最大内容长度 3.min属性：数字最小值 4.max属性：数字最大值 5.step属性：数字步长值 6.checked属性：默认选中 7.pattern属性：引入正则表达式 HTML提供的表单验证属性，功能性较弱，不安全。实际开发一般不使用。实际
HTML表单的初级验证
qishi45的博客
05-17 230
<!DOCTYPE html> <!-- 表单初级验证： 常用方式：1.placeholder 提示信息 2.required 非空判断 3.pattern 正则表达式 --> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单的初级验证</title> </head> <body>
【前端】表单验证
连通块的应用
09-03 430
1.JS实现表单验证 在form 中添加onsubmit 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单验证</title> </head> <script type="text/javascript"&g...
正则表达式（表单验证blur）
Mydtudysy的博客
09-21 1077
由于我们自己也经常需要用到一些常用的正则，每次都上网搜多次，这里脚本之家特为大家整理一些，方面使用。
Jquery实现表单验证
纸短情长的博客
12-30 229
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jquery实现表单验证</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值