JavaScript表单校验

最新推荐文章于 2023-02-05 11:45:00 发布
最新推荐文章于 2023-02-05 11:45:00 发布
阅读量140 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56506584/article/details/117673731
版权

JavaScript表单校验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function check(){
				var username=document.getElementById("user_name").value;
				if(""==username){
					alert("请输入用户名");
					return false;
				}
				var password=document.getElementById("passward").value;
				if(""==password){
					alert("请输入密码");
					return false;
				}
				var summay=document.getElementById("summary").value;
				if(""==summay){
					alert("请输入简介");
					return false;
				}
				var float1=false;
				var radioes=document.getElementsByName("sex");
				for (var i = 0; i < radioes.length; i++) {
					var radio=radioes[i]
					if (radio.checked) {
						float1=true;
					}
				}
				if(!float1){
					alert("请输入性别");
					return false
				}
				
				var flag2=false;
				var hobbies=document.getElementsByName("hobby");
				for (var i = 0; i < hobbies.length; i++) {
					var hobby=hobbies[i];
					if(hobby.checked){
						console.log(hobby.value);
						flag2=true;
					}
				}
				if(!flag2){
					alert("请选择爱好");
					return false;
				}
				
				var flag3=false;
				var options=document.getElementById("city").options;
				for (var i = 0; i < options.length; i++) {
					var option=options[i];
					var value=option.value;
					if(option.selected&&""!=value){
						console.log(option.value);
						flag3=true;
					}
				}
				if (!flag3) {
					alert("请输入城市");
					return false;
				}
				
			};
			
		</script>
		<form action="" onsubmit="return check()">
			<input type="text" id="user_name">
			<input type="passward" id="passward">
			<textarea id="summary" placeholder="请输入简介"></textarea>
			<input type="radio" name="sex"  value="0" />男
			<input type="radio" name="sex"  value="1" />女
			
			<input type="checkbox" name="hobby" value="0">篮球
			<input type="checkbox" name="hobby" value="1">足球
			<input type="checkbox" name="hobby" value="2">乒乓球
			
			<select name="" id="city">
				<option value="">请选择</option>
				<option value="1">郑州市</option>
				<option value="2">商丘市</option>
			</select>
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

JavaScript单选和复选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" id="test">
			<input type="radio" name="sex"  value="0" />男
			<input type="radio" name="sex"  value="1" />女
			<script type="text/javascript">
				var radioes=document.getElementsByName("sex");
				for (var i = 0; i < radioes.length; i++) {
					if(radioes[i].value=="1"){
						radioes[i].checked=true;
					}
				}
			</script>
			<br>
			<input type="checkbox" name="hobby" value="0">篮球
			<input type="checkbox" name="hobby" value="1">足球
			<input type="checkbox" name="hobby" value="2">乒乓球
			<button type="button"id="btn">按钮</button>
		</form>
		<script type="text/javascript">
			document.getElementById("btn").addEventListener("click",function(){
				document.getElementById("test").submit();
			})
		</script>
	</body>
</html>

JavaScript表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table{
				border: 1px solid black;
				border-spacing: 0px;
				border-collapse: collapse;
			}
			th,td{
				border: 1px solid black;
			}
		</style>
		<script type="text/javascript">
			function changed(obj){	
				var ids=document.getElementsByName("id");
				if(obj.checked){
					for (var i = 0; i < ids.length; i++) {
						ids[i].checked=true;
					}
				}else{
					for (var i = 0; i < ids.length; i++) {
						ids[i].checked=false;
					}
				}
			}
		</script>
	</head>
	<body>
		<table>
			<tr>
				<th><input type="checkbox" onclick="changed(this)" id="all"></th>
				<th>姓名</th>
				<th>手机号</th>
				<th>家庭地址</th>
				<th>操作</th>

			</tr>
			<tr>
				<td><input type="checkbox" name="id"></td>
				<td>jim</td>
				<td>12222222222</td>
				<td>河南省郑州市高新技术开发区</td>
				<td>查看 修改 删除</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="id"></td>
				<td>lucy</td>
				<td>13333333333</td>
				<td>河南省郑州市高新技术开发区</td>
				<td>查看 修改 删除</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="id"></td>
				<td>jhon</td>
				<td>14444444444</td>
				<td>河南省郑州市高新技术开发区</td>
				<td>查看 修改 删除</td>
			</tr>
		</table>
		<script type="text/javascript">
			var ids=document.getElementsByName("id");
			for (var i = 0; i < ids.length; i++) {
				ids[i].addEventListener("click",function(){
					if(!this.checked){
						document.getElementById("all").checked=false;
						
					}else{
						var count=0;
						for (var i = 0; i < ids.length; i++) {
							if(ids[i].checked){
								count++;
							}
						}
						if(count==ids.length){
							document.getElementById("all").checked=true;
						}
					}
				})
			}
		</script>
	</body>
</html>

JavaScript地址设为默认

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="">
			<select name="" id="city">
				<option value="">---请选择---</option>
				<option value="1">郑州市</option>
				<option value="2">商丘市</option>
			</select>
		</form>
		<script type="text/javascript">
			var options=document.getElementById("city").options;
			for (var i = 0; i < options.length; i++) {
				var option=options[i]
				if(option.value=="1"){
					option.selected=true;
				}
			}
		</script>
		
		<img id="lunbo"/>
		<script>
			document.getElementById("lunbo").src="https://img30.360buyimg.com/babel/s590x470_jfs/t1/177829/11/7555/158871/60ba2508E54f2c249/610afd30ccb5f4b2.jpg.webp";
		</script>
		
		<a href="http://www.baidu.com" id="baidu">百度</a>
		<script>
			document.getElementById("baidu").target="_blank";
		</script>
	</body>
</html>
好人好报i
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
javascript表单校验
04-15
校验表单的脚本，全面详实
JavaScript表单简单校验
supersoulsoul
07-15 233
&lt;script&gt;function checkForm(){var uValue=document.getElementById("user").value;/*alert(uValue);*//*检验是否获取到了值，之后可以屏蔽掉*/if(uValue==""){            /*这里注意，不是null*///给出错误提示alert("用户名不能为空");return fal...
JavaScript实现表单校验
bravery__的博客
07-18 194
一、注册页面： RegisterServlet： package com.jd.regiter; import java.io.IOException; import java.util.UUID; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.Http
JavaScript_表单校验
mango
10-26 146
技术分析 1.html中的innerHTML属性 2.js中常用事件 1）onfocus事件：获得焦点事件 2）onblur事件：失去焦点 3）onkeyup:按键抬起事件 <html> <head> <meta charset="UTF-8> <title></title> <script> /* ...
JavaScript的表单校验
yswh11212的博客
05-10 227
利用正则表达式在前端验证数据是否值得传入后端
javascript表单校验2
04-15
另一个表单校验脚本，详细完整
使用JavaScript进行表单校验功能
10-19
最近在学习JavaScript，因此想到使用js实现表单校验。下面通过本文给大家分享使用javascript实现表单校验功能的步骤，需要的的朋友参考下吧
JavaScript 完成注册页面表单校验的实例
10-19
下面小编就为大家带来一篇JavaScript 完成注册页面表单校验的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
javascript将异步校验表单改写为同步表单
10-24
主要介绍了javascript将异步校验表单改写为同步表单,需要的朋友可以参考下
javascript/JS表单的校验
03-03 562
对于javaWeb往往需要注册，但是对于注册往往需要许多条件限制，比如用户名、密码、邮箱等等，下面小编就来整理下一些常用的限制。1、只允许输入数字 ：/\D+/2、只允许输入英文字母、数字和下划线：/[^\w\.\/]/ 3、只允许输入英文字母、数字和=@# ：/[^\w=@#]|_/4、只允许输入汉字 ：/[^\u4E00-\u9FA5]/5.只能输入数字："^[0-9]*$"。 6.只能输入n...
用javascript实现表单校验
kior的博客
07-23 961
通过javascript对用户名，密码，确定密码，邮箱进行校验 【js中的常用事件】 获得焦点：onfocus 失去焦点：onblur 按键抬起事件：onkeyuo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!...
JavaScript表单验证
weixin_52629592的博客
06-14 9903
表单验证是JavaScript的高级选项之一.我们可以通过JavaScript在网页中对即将送往服务器的HTML表单中的输入数据进行验证.如果所输入内容与所需不符,我们就在页面中进行提示.这样就使得我们不用频繁的与服务器进行交互,减少了IO的频率,提高了效率.在表单验证中,我们通常使用如下的验证功能:验证用户名与密码为指定格式在验证用户名与密码时,我们通常验证用户名与密码不能为空,用户名和密码必须在指定长度范围内,用户名和密码由数字和字母组成(使用正则表达式)等等验证单选框所选内容最常见的验证单选框就是验证
JavaScript 表单验证
QYgujingjing的专栏
02-05 1093
JavaScript 表单验证
javascript表单验证
m0_61857264的博客
03-06 517
目录 表单介绍： 建立表单 正则判断 案例 表单介绍： 一个表单由三个部分组成 表单标签：包含数据提交到服务器的方法 表单域：包含文本框、密码框、文本域、复选框、单选按钮、下拉按钮等 表单按钮：一般就是提交按钮 建立表单 <form action="" onsubmit="return check()"> //在提交时会返回一个参数 <p>名字:<input type="text" id="uname"/> //名字输入
用JavaScript验证表单
qq_43328996的博客
06-23 443
最简单的表单验证----禁止空白的必填项目 最简单表单的HTML结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>最简单表单的HTML结构</title> </head> <body> ...
elementplus 表单校验 单项
最新发布
03-02
其中，Element Plus 表单校验是指对表单中的输入内容进行验证，确保用户输入的数据符合预期的格式和要求。 在 Element Plus 中，表单校验是通过给表单元素添加校验规则来实现的。可以通过以下步骤来进行单项表单...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值