表单校验。

最新推荐文章于 2024-07-26 17:02:42 发布
最新推荐文章于 2024-07-26 17:02:42 发布
阅读量281 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44637905/article/details/115324266
版权

1、表单选择器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

:text案例
在这里插入图片描述
当加了下面代码以后

<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			$(function(){
				
				// $(":input").css("background-color","#D32C47");
				$(":text").css("background-color","#D32C47");
			});
			
		</script>

在这里插入图片描述

:checked及其遍历+change()事件

change事件，当内容发生改变时会触发

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>休闲网注册页面</title>
		<link rel="stylesheet" href="css/regin.css">
	</head>

	<body>
		<div id="header" class="main">
			<div id="headerLeft">
				<img src="images/logo.gif" />
			</div>
			<div id="headerRight">注册 | 登录 | 帮助</div>
		</div>
		<div class="register">
			<form id="userform" name="userform">
				<p>
					编号：<input name="code" disabled="disabled" value="10010" />
				</p>
				<p>
					姓名：<input name="name" type="text" value="张三" />
				</p>
				<p>
					性别：<input name="sex" type="radio" value="1" checked="checked" /> 男
					<input name="sex" type="radio" value="0" />女
				</p>
				<p>
					爱好：
					<input type="checkbox" checked="checked" value="1"/>编程
					<input type="checkbox"  value="2"/>读书
					<input type="checkbox"  value="3"/>运动
				</p>
				<p>
					家乡：
					<select name="hometown">
						<option value="1" selected="selected">北京</option>
						<option value="2">上海</option>
						<option value="3">天津</option>
					</select>
				</p>
			</form>
			<div id="add">

			</div>
		</div>
		<div id="footer" class="main">
			<a href="#">关于我们</a> |
			<a href="#">诚聘英才</a> |
			<a href="#"> 联系方式</a> |
			<a href="#">帮助中心</a>
		</div>

		<script src="js/jquery-1.12.4.js"></script>
		<script>
		
			//:checked也包括select里面的选中的option选项  本页面checked不止有一个
			$(function(){
				
				$("select[name=hometown]").change(function(){
					$(":checked").each(function(i,ele){
						// alert(i);
						alert($(ele).val());
					});
				});
			});
			
		</script>
	</body>

获取select下拉框的值
$(":enabled")+ $(":disabled")

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>休闲网注册页面</title>
		<link rel="stylesheet" href="css/regin.css">
	</head>

	<body>
		<div id="header" class="main">
			<div id="headerLeft">
				<img src="images/logo.gif" />
			</div>
			<div id="headerRight">注册 | 登录 | 帮助</div>
		</div>
		<div class="register">
			<form id="userform" name="userform">
				<p>
					编号：<input name="code" disabled="disabled" value="10010" />
				</p>
				<p>
					姓名：<input name="name" type="text" value="张三" />
				</p>
				<p>
					性别：<input name="sex" type="radio" value="1" checked="checked" /> 男
					<input name="sex" type="radio" value="0" />女
				</p>
				<p>
					爱好：
					<input type="checkbox" checked="checked" value="1"/>编程
					<input type="checkbox"  value="2"/>读书
					<input type="checkbox"  value="3"/>运动
				</p>
				<p>
					家乡：
					<select name="hometown">
						<option value="1" selected="selected">北京</option>
						<option value="2">上海</option>
						<option value="3">天津</option>
					</select>
				</p>
			</form>
			<div id="add">

			</div>
		</div>
		<div id="footer" class="main">
			<a href="#">关于我们</a> |
			<a href="#">诚聘英才</a> |
			<a href="#"> 联系方式</a> |
			<a href="#">帮助中心</a>
		</div>

		<script src="js/jquery-1.12.4.js"></script>
		<script>
			/*
			 * 需求： 1.给家乡下拉框绑定 change事件，当下拉框选中的内容发生改变就将下拉框内被选中的选项的内容添加到id名为
			 *       add的<div>内，并设置背景颜色为橙色。
			 */
			
			$(function(){
				$("select[name=hometown]").change(function(){
					//获取的是下拉框的value值 
					//var $selectedObj=$(":selected").val();
					//alert($selectedObj)
					
					//想获取下拉框的值  天津    <option value="3">天津</option>
					var $select=$(":selected").html();
					//alert($select)
					$("#add").text($select);
					$("#add").css("background","orange");
				})
				// $(":enabled").css("background-color","#FFA500");
				// $(":disabled").css("background-color","#FFA500");
			})
			
		</script>
	</body>

2、表单验证事件和方法

在这里插入图片描述

3、表单校验 (“选择器”).submit(）

在这里插入图片描述

1、要有返回值 否则即使你判断了 也不会生效
2、要选中整个表单进行提交
3、indexOf 返回字符串中检索指定字符第一次出现的位置 找不到就返回-1

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>休闲网登录页面</title>
		<link href="css/register.css" rel="stylesheet">
	</head>

	<body>
		<div id="header" class="main">
			<div id="headerLeft">
				<img src="images/logo.gif" /></div>
			<div id="headerRight">注册 | 登录 | 帮助</div>
		</div>
		<div class="register">
			<form action="success.html" id="myform" method="get" name="myform">
				<ul>
					<li class="bold">登录休闲网</li>
					<li>
						<span>Email：</span>
						<!--<input type="email"  class="inputs" id="email" />-->
						<input type="text"  class="inputs" id="email" />
						<span id="emailTip"></span>
					</li>
					<li><span>密码：</span><input type="password" class="inputs" /></li>
					<li><input name="btn" id="btn" type="submit" value="登录" class="rb1" /></li>
				</ul>
			</form>
		</div>
		<div id="footer" class="main">
			<a href="#">关于我们</a> |
			<a href="#">诚聘英才</a> |
			<a href="#"> 联系方式</a> |
			<a href="#">帮助中心</a>
		</div>
		<script src="js/jquery-1.12.4.js"></script>
		<script>
			/*
			 * 需求： 1.当提交表单时触发事件，通过表单过滤选择器 获取邮箱表单中的value值
			 *        判断是否为空，如果为空不能提交,并提示：Email不能为空。
			 *        判断是否包含@，如果不包含不能提交，并提示：Email格式不正确必须包含@
			 *        判断是否包含.，如果不包含不能提交，并提示：Email格式不正确必须包含.
			 *        判断@是否在.前面，如果不是不能提交，并提示：Email格式不正确\n@必须在.前面。
			 * 	zhangqichao@youyue.me
			 *        如果上述均可以 则提交
			 */
			$(function(){
				
				$("#myform").submit(function(){
					// 1.获取邮箱输入框的值
					var emailVal  = $("#email").val();
					$("#emailTip").html("");
					// 2.判空
					if(emailVal.trim() == ""){
						// alert("邮箱不能为空！");
						$("#emailTip").html("<font color='red'>邮箱不能为空！</font>");
						return false;
					}else if(emailVal.indexOf("@") == -1 || emailVal.lastIndexOf(".") < emailVal.indexOf("@")){
						// alert("邮箱格式不正确！");
						$("#emailTip").html("<font color='red'>邮箱格式不正确！</font>");
						return false;
					}
					return false;
				});
				
			});
		</script>
	</body>

</html>

3.1、表单校验注册案例1

charAt 返回指定索引(从0开始)的字符
isNaN(“变量名”)是否是非数字值 如果不是数字 返回true

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>休闲网注册页面</title>
		<link href="css/leisure.css" rel="stylesheet">
	</head>

	<body>
		<div id="header" class="main">
			<div id="headerLeft">
				<img src="images/logo.gif" />
			</div>
			<div id="headerRight">注册 | 登录 | 帮助</div>
		</div>
		<div class="register">
			<form method="post" name="myform" id="myform">
				<h1 class="bold">注册休闲网</h1>
				<dl>
					<dt>您的Email：</dt>
					<dd><input id="email" type="text" class="inputs" /></dd>
				</dl>
				<dl>
					<dt>输入密码：</dt>
					<dd><input id="pwd" type="password" class="inputs" /></dd>
				</dl>
				<dl>
					<dt>再输入一遍密码：</dt>
					<dd><input id="repwd" type="password" class="inputs" /></dd>
				</dl>
				<dl>
					<dt>您的姓名：</dt>
					<dd><input id="user" type="text" class="inputs" /></dd>
				</dl>
				<dl>
					<dt>性别：</dt>
					<dd>
						<input name="sex" type="radio" value="1" checked="checked" />男
						<input name="sex" type="radio" value="0" />女</dd>
				</dl>
				<dl>
					<dt class="left">出生日期：</dt>
					<dd>
						<select name="year">
							<option value="1998">1998</option>
						</select>年
						<select name="month">
							<option value="1">1</option>
						</select>月
						<select name="day">
							<option value="12">12</option>
						</select>日</dd>
				</dl>
				<dl>
					<dt>&nbsp;</dt>
					<dd><input name="btn" type="submit" value="注册" class="rb1" /></dd>
				</dl>
			</form>
		</div>

			<a href="#">关于我们</a> |
			<a href="#">诚聘英才</a> |
			<a href="#"> 联系方式</a> |
			<a href="#">帮助中心</a>
		</div>
		<script src="js/jquery-1.12.4.js"></script>
		<script>
			/*
			 * 需求： 1.当表单提交时，获取密码输入框的value值和确认密码框的value值
			 *       判断是否为空，如果为空不能提交，并提示：密码不能为空
			 *       判断是否长度小于6位，如果小于则不能提交，并提示：密码必须等于或大于6个字符
			 *       
			 *       判断确认密码框的值是否等于密码框，如果不等于则不能提交，并提示：两次输入的密码不一致！
			 *       
			 *       2.获取姓名文本框的值
			 *         如果姓名为空，不能提交，并提示：姓名不能为空
			 *         循环截取每一个字符，判断是否为数字，如果为数字，不能提交，并提示：姓名中不能包含数字
			 */
			$(function(){
				
				$("#myform").submit(function(){
					return checkPwd() && checkUser() && checkRepwd();
				});
				
				$("#pwd").blur(checkPwd);
				$("#repwd").blur(checkRepwd);
				$("#user").blur(checkUser);
				
				function checkPwd(){
					// 获取密码
					var pwd = $("#pwd").val();
					if(pwd.trim() == ""){
						alert("密码不能为空！");
						return false;
					}else if(pwd.length < 6){
						alert("密码不能小于6位！");
						return false;
					}
					return true;
				}
				
				function checkRepwd(){
					var repwd = $("#repwd").val();
					var pwd = $("#pwd").val();
					if(repwd != pwd){
						alert("两次密码输入不一致！");
						return false;
					}
					return true;
				}
				
				function checkUser(){
					var userVal = $("#user").val();
					if(userVal.trim() == ""){
						alert("姓名不能为空！");
						return false;
					}
					for(var i = 0; i < userVal.length; i++){
						var c = userVal.charAt(i);
						if(!isNaN(c)){
							alert("姓名不能包含数字！")
							return false;
						}
					}
					return true;
				}
				
			});
		</script>
	</body>

</html>

3.2、动态改变文本框效果

<input type="text" class="inputs" placeholder="请输入正确的电子邮箱" />
placeholder 你一输入东西就没有了
在这里插入图片描述

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>休闲网登录页面</title>
		<link href="css/register.css" rel="stylesheet">
	</head>

	<body>
		<div id="header" class="main">
			<div id="headerLeft">
				<img src="images/logo.gif" /></div>
			<div id="headerRight">注册 | 登录 | 帮助</div>
		</div>
		<div class="register">
			<form action="success.html" id="myform" method="get" name="myform">
				<ul>
					<li class="bold">登录休闲网</li>
					<li><span>Email：</span>
						<input type="text" class="inputs" value="请输入正确的电子邮箱" />
						<!--<input type="text" class="inputs" placeholder="请输入正确的电子邮箱" />-->
					</li>
					<li><span>密码：</span><input type="password" class="inputs" /></li>
					<li><input name="btn" id="btn" type="submit" value="登录" class="rb1" /></li>
				</ul>
			</form>
		</div>
		<div id="footer" class="main">
			<a href="#">关于我们</a> |
			<a href="#">诚聘英才</a> |
			<a href="#"> 联系方式</a> |
			<a href="#">帮助中心</a>
		</div>
		<script src="js/jquery-1.12.4.js"></script>
		<script>
			/*
			 * 需求： 1.获取焦点时如果value内容为预留内容，清空并将边框设置为红色实线
			 */
			$(function(){
				$(":text").focus(function(){
					var $emailObj=$(this).val();
					if($emailObj=="请输入正确的电子邮箱"){
						$(this).val("");
						$(this).css("border","1px solid red")
					}
				})
				
				$(":text").blur(function(){
					var $emailObj=$(this).val();
					if($emailObj==""){
						$(this).val("请输入正确的电子邮箱");
						$(this).css("border","1px solid black")
					}
				})
			})
			</script>
	</body>

</html>

1、一个事件里面调用另一个事件
2、对象.trim()进行非空判断

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>休闲网登录页面</title>
		<link href="css/register.css" rel="stylesheet">
	</head>

	<body>
		<div id="header" class="main">
			<div id="headerLeft">
				<img src="images/logo.gif" /></div>
			<div id="headerRight">注册 | 登录 | 帮助</div>
		</div>
		<div class="register">
			<form action="success.html" id="myform" method="get" name="myform">
				<ul>
					<li class="bold">登录休闲网</li>
					<li><span>Email：</span>
						<input type="text" class="inputs" value="请输入正确的电子邮箱" />
						<!--<input type="text" class="inputs" placeholder="请输入正确的电子邮箱" />-->
					</li>
					<li><span>密码：</span><input type="password" class="inputs" /></li>
					<li><input name="btn" id="btn" type="submit" value="登录" class="rb1" /></li>
				</ul>
			</form>
		</div>
		<div id="footer" class="main">
			<a href="#">关于我们</a> |
			<a href="#">诚聘英才</a> |
			<a href="#"> 联系方式</a> |
			<a href="#">帮助中心</a>
		</div>
		<script src="js/jquery-1.12.4.js"></script>
		<script>
			/*
			 * 需求： 当提交表单的时候，获取邮箱的value值
			 *      如果为空，不能提交，并提示：Email不能为空  并将邮箱输入框触发获取焦点事件

			 */
			$(function(){
				$("#myform").submit(function(){
					var $emailObj=$(":text").val();
					if($emailObj.trim()=="" || $emailObj=="请输入正确的电子邮箱"){
						alert("邮箱不能为空");
						/*调用下面的方法*/
						$(":text").focus();
						return false;
					}
				})
				
				$(":text").focus(function(){
					var $emailObj=$(this).val();
					if($emailObj=="请输入正确的电子邮箱"){
						$(this).val("");
						$(this).css("border","1px solid red")
					}
				})
				
				$(":text").blur(function(){
					var $emailObj=$(this).val();
					if($emailObj==""){
						$(this).val("请输入正确的电子邮箱");
						$(this).css("border","1px solid black")
					}
				})
				
				
			})
			</script>
	</body>

</html>

4、正则表达式

在这里插入图片描述

正则表达式符号
在这里插入图片描述
在这里插入图片描述

4.1 test()

1、定义正则表达式：var reg1=/user/;
alert(reg1.test(“字符串”));
2、var reg2="/user/i" 忽略user大小写

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>

		<script type="text/javascript">
			
			var str1 = "user18dsdfuser2dsfsd"; 

			//    /user/i  忽略大小写
			//定义一个正则
			var reg1=/user/;
			alert(reg1.test(str1)); //true
			
			var reg2=/User/;
			alert(reg2.test(str1));	//false	
		
			
		</script>
	</body>

</html>

1、

1、

A_奇怪的人类
关注
antdv a-form的校验方式（手把手 附送上传boundary二进制流方法）
qq_51111703的博客
05-11 1742
a-form校验解决方式（手把手）
Form表单密码校验
lmf13992427957的博客
04-14 2138
1.在Form表单新建一个密码框 <a-form-item label="密码" v-model:value="value" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-input-password placeholder="请输入用户密码" v-model="testModel" v-decorator="['password', validatorRules.password]"
Antd ＜a-form＞表单校验：v-model、v-decorator
chenyan0306i的博客
11-16 2914
a-form表单校验
antdesign的多个form表单校验
最新发布
weixin_59017683的博客
07-26 218
1.小例：手机号校验phone: {label: '电话',value: '',placeholder:'请输入',rules: <Rule>[{required: true,validator:validReg,trigger:'blur',pattern:regPhone,message:'请输入正确的电话格式'}],},……if () {return Promise.reject("不能为空");}else{if(!
a-form行内表单校验
mengyingqi的博客
03-07 332
【代码】a-form行内表单校验。
a-form（设计重置，赋值，校验）
weixin_44161385的博客
12-29 5926
1.在页面使用a-form 2.在beforeCreate中创建form beforeCreate() { this.form = this.$form.createForm(this); }, 3.使用 v-decorator 用idCard绑定input的值。 rules <a-form-item label="身份证号码" v-bind="formItemLayout" style="width: 40%;"> <a-input
微信小程序实现表单校验功能
08-29
"微信小程序实现表单校验功能" 微信小程序实现表单校验功能是小程序开发中最难实现的公共业务之一。表单校验的难点在于表单组件的多样性和校验规则的多样性，导致复杂度达到n³。解决这个问题的关键是组件化和非...
vue elementUI 表单校验的实现代码（多层嵌套）
10-16
在前端开发中，表单校验是一个重要环节，它能够保证用户提交的数据符合预期的格式，从而提高数据的准确性和安全性。Vue.js作为一套流行的前端框架，通过Element UI这个UI库，为开发者提供了丰富的表单组件和校验功能...
原生JS经典小项目-form表单校验
05-18
原生JavaScript的表单校验则是为了确保用户输入的数据符合预期格式和规则，提高用户体验，防止无效或恶意数据的提交。这个经典小项目旨在通过JavaScript实现对HTML表单的验证，无需依赖外部库如jQuery或其他前端框架...
vue elementUI 表单校验功能之数组多层嵌套
10-16
本文将深入探讨如何在 Vue Element UI 中实现针对这种数据结构的表单校验。 在 Vue Element UI 中，`el-form` 和 `el-form-item` 组件用于创建表单和表单项，并且通过 `v-model` 和 `prop` 属性进行数据绑定和验证...
Vue element-ui父组件控制子组件的表单校验操作
10-15
以下将详细介绍如何实现Vue Element-UI父组件控制子组件的表单校验操作。 首先，我们来看一下父组件的代码。在父组件的模板中，我们引入了一个名为`child-form`的子组件，并通过`ref`属性（`ref="childRules"`）来...
ValidaForm:表单验证脚本
05-04
验证表 最好的表单验证脚本 Validaform是一个脚本，旨在简化前端和后端的工作，因为它支持 ，AJAX， （选择自定义）等。 安装 validaform.js应该在<body>的末尾并且在之后： [removed][removed] [removed][removed] 无需调用任何脚本即可正常工作 如何使用 在<form>标记中，必须输入以下属性： 必需的 属性 价值 描述 [必需的] method 发布/获取 这是用于发送表格信息的方法类型 可选的 class 阿贾克斯 如果您想使用AJAX发送表单 [必需的] 如
js表单验证控制代码大全
beauty9235的专栏
05-01 1035
关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制、判断字符长度 、js限制输入、限制不能输入、textarea 长度限制 2.:js判断汉字、判断是否汉字 、只能输入汉字3:js判断是否输入英文、只能输入英文4:js只能输入数字,判断数字、验证数字、检测数字、判断是否为数字、只能输入数字5:只能输入英文字符和数字6: js email验证
表单校验
yananye的博客
03-02 1518
表单验证的必要性 使用javaScript可以十分便捷的进行表单验证，他不但能检查用户输入的无效或错误数据，还能检查用户遗漏的必选项，从而减轻服务器端的压力，避免服务器端的信息出现错误。 表单验证的内容 常见的表单验证：如下 表单验证的思路 在网上进行注册或填写一些表单数据时，如果数据不符合要求，通常会进行提示，例如：填写了不符合条件确定电子邮箱时，将会弹出提示信息，这些提示信息在什么条件下会被弹出？如何编写javascript来验证表单数据的合法性？具体分析如下： 首先获取表单元素的值，这些值一般都
【a-form表单动态添加项目校验】
weixin_41977129的博客
05-30 257
a-form-modal 动态添加表单
ant a-form/a-form-model用法(组件使用、表单验证、数据收集、数据重置、数据提交)
qq_45530512的博客
02-17 5174
ant a-form用法
表单验证和事件
qq_41695498的博客
12-02 350
form表单验证和事件 1、表单验证 (1).非空验证（去空格） (2).对比验证（跟一个值对比） (3).范围验证（根据一个范围进行判断） (4).固定格式验证：电话号码，身份证号，邮箱，信用卡号等的验证；需要用到正则表达式来进行验证。 (5).其它验证 2、正则表达式 用符号来描述书写规则:/ 中间写正则表达式 / ^ ：匹配开头，：匹配结尾；/ve/以ve开头的/ve：匹配结尾 ； /^ve...
06jQuery之表单校验（表单选择器、常见的校验、表单验证事件和方法、jq的正则使用）
Denial_learn的博客
09-24 478
val()方法，主要是获取form表单当中的内容（包括有value或者输入的内容） 表单验证的必要性： 减轻服务器的压力 保证输入的数据符合要求 表单选择器： 表单选择器用于选取某些特定的表单元素，比如所有单选按钮或隐藏的元素 常见的校验： 非空验证： 示例： if (mail == "") { alert("Email不能为空"); return false;...
uniapp 表单校验
05-07
在UniApp中进行表单校验可以通过以下几种方式实现： 1. 使用HTML5的表单验证属性：UniApp支持大部分HTML5的表单验证属性，例如`required`、`pattern`、`min`、`max`等。你可以在input标签中添加这些属性来进行基本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值