Form表单校验

最新推荐文章于 2024-05-11 02:50:29 发布
最新推荐文章于 2024-05-11 02:50:29 发布
阅读量414 收藏
点赞数
分类专栏： WEB前端@DHTML 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/schy_hqh/article/details/84508418
版权

 

正则表达式的两种使用方式及其用法上的区别

表单提交的两种方式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单校验</title>

<script type="text/javascript">
	function checkUname(node) {
		var flag = false;
		if(node==undefined) {
			node = document.getElementById("uname");
		}
		var uname = node.value;
		var unameSpan = document.getElementById('unameSpan');
		
		//限定只能为字母，不区分大小写，长度4位
		var reg = /^[a-z]{4}$/i;
		//var reg = new RegExp("^[a-z]{4}$","i");//匹配模式 i 忽略大小写 
		
		//正则表达式的2中定义方式
		//var reg = /^\d{4}$/i;//不需要对\d转义
		//var reg = new RegExp("^\\d{4}$","i");//由于在字符串中定义正则，所以需要对\d进行转义，这就是两种定义方式的区别  
		
		if(reg.test(uname)) {
			flag = true;
			unameSpan.innerHTML = "<b>ok</b>".fontcolor("green");
			//unameSpan.innerHTML = "<img src='ok.jpg' alt='ok'/>";
		}else {
			unameSpan.innerHTML = "<b>用户名不符合要求</b>".fontcolor("red");
		}
		
		return flag;
	}
	
	
	//控制form表单的提交 
	function checkForm() {
		return checkUname();
	}
	
	//另一种表单提交方式:
		//通过form表单的submit方法进行提交（更灵活，可以通过外部的各种事件来完成 ，如按钮被点击，超链接/图片被点击 ，等等 ） 
	function mySubmit() {
		if(!checkForm())
			return;
		var fm = document.getElementById("form_1");
		fm.submit();
	}
</script>

</head>
<body>
	<div>
		<form id="form_1" οnsubmit="return checkForm();">
			<table>
				<tbody>
					<tr>
						<td>
							用户名
						</td>
						<td>
							<input type="text" name="uname" id="uname" οnblur="checkUname(this);"/>
							<span id="unameSpan"></span>
						</td>
					</tr>
					<tr>
						<td>
							输入密码
						</td>
						<td>
							<input type="password" name="pwd" id="pwd" οnblur="checkPwd(this);"/>
							<span id="pwdSpan"></span>
						</td>
					</tr>
					<tr>
						<td>
							确认密码
						</td>
						<td>
							<input type="password" name="repwd" id="repwd" οnblur="checkRepwd(this);"/>
							<span id="repwdSpan"></span>
						</td>
					</tr>
					<tr>
						<td>
							邮件地址
						</td>
						<td>
							<input type="text" name="email" id="email" οnblur="checkEmail(this);"/>
							<span id="emailSpan"></span>
						</td>
					</tr>
					<tr>
						<td>
							<!-- submit具有默认的提交效果 -->
							<input type="submit" value="提交"/>
						</td>
					</tr>
				</tbody>
			</table>
		</form>
		
		<hr/>
		<input type="button" value="另一种提交方式 " οnclick="mySubmit();"/>
		
	</div>
</body>
</html>

 

 

复用校验逻辑，减少冗余代码

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单校验</title>

<script type="text/javascript">
	/*校验用户名*/
	function checkUname() {
		var reg = /^[a-z]{4}$/i;
		return check(reg,"uname","unameSpan", "用户名正确".fontcolor("green"), "用户名错误".fontcolor("red"));
	}
	/*校验密码*/
	function checkPwd() {
		var reg = /^\d{6}$/i;
		return check(reg,"pwd","pwdSpan","密码格式正确".fontcolor("green"),"密码格式错误".fontcolor("red"));
	}
	
	/*校验2次密码是否一致*/
	function checkRepwd() {
		var pwd = document.getElementById("pwd").value;
		var repwd = document.getElementById("repwd").value;
		var spanRepwd = document.getElementById("repwdSpan");
		if(pwd==repwd) {
			spanRepwd.innerHTML = "两次密码一致".fontcolor("green");
		} else {
			spanRepwd.innerHTML = "两次密码不一致".fontcolor("red");
		}
		return pwd==repwd;
	}
	
	/*校验邮箱格式*/
	function checkEmail() {
		var reg = /^\w+@\w+(\.\w+)+$/i;
		return check(reg,"email","emailSpan","邮件格式正确".fontcolor("green"),"邮件格式错误".fontcolor("red"));
	}
	
	
	//复用校验逻辑！！！ 
	function check(reg,nodeId,spanId,okInfo,errorInfo) {
		var flag;
		var val = document.getElementById(nodeId).value;
		var unameSpan = document.getElementById(spanId);
		if(reg.test(val)) {
			flag = true;
			unameSpan.innerHTML = okInfo;
		}else {
			flag = false;
			unameSpan.innerHTML = errorInfo;
		}
		return flag;
	}
	
	
	//控制form表单的提交 
	function checkForm() {
		//alert(checkUname() +","+ checkPwd()  +","+  checkRepwd()  +","+  checkEmail());
		//最后进行提交的时候，再次调用每个方法，确保都为true的情况下提交表单数据 
		return  checkUname() && checkPwd() && checkRepwd() && checkEmail();
	}
	
</script>

</head>
<body>
	<div>
		<form id="form_1" οnsubmit="return checkForm();">
			<table>
				<tbody>
					<tr>
						<td>
							用户名
						</td>
						<td>
							<input type="text" name="uname" id="uname" οnblur="checkUname();"/>
							<span id="unameSpan"></span>
						</td>
					</tr>
					<tr>
						<td>
							输入密码
						</td>
						<td>
							<input type="password" name="pwd" id="pwd" οnblur="checkPwd();"/>
							<span id="pwdSpan"></span>
						</td>
					</tr>
					<tr>
						<td>
							确认密码
						</td>
						<td>
							<input type="password" name="repwd" id="repwd" οnblur="checkRepwd();"/>
							<span id="repwdSpan"></span>
						</td>
					</tr>
					<tr>
						<td>
							邮件地址
						</td>
						<td>
							<input type="text" name="email" id="email" οnblur="checkEmail();"/>
							<span id="emailSpan"></span>
						</td>
					</tr>
					<tr>
						<td>
							<!-- submit具有默认的提交效果 -->
							<input type="submit" value="提交"/>
						</td>
					</tr>
				</tbody>
			</table>
		</form>
		
	</div>
</body>
</html>

 

 

 

schy_hqh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
form表单校验
var_da的博客
11-18 402
form表单 form表单用来前后端的交互 表单校验：过滤无效的请求 数据格式不合法 前端对数据的合法性进行校验 <form action="" method="" onsubmit=""></form> action:服务器的地址 method：数据传输方法GET POST GET 的缺陷：传输数据量有限 安全性欠佳 POST：比较安全 可以传输的数据量比较大 ...
表单校验
weixin_44794676的博客
06-30 165
表单校验 1. 掌握表单验证的实现流程 1.1 表单验证的作用 保证用户输入的内容符合我们项目的要求 降低服务器的压力 提升用户的体验 1.2 表单验证的实现思路 **1.程序的入口：**事件（表单提交事件onsubmit,失去焦点事件onblur，普通按钮的点击事件onclick，获取焦点事件onfocus，键盘录入事件onkeydown） 2.程序主体：（表单验证的实现思路（4步）） ...
el-form表单验证 限制只能输入数字及数字大小范围
weixin_53898445的博客
01-13 5860
el-form表单验证 限制只能输入数字及数字大小范围
form表单验证
qq_49975047的博客
08-26 1013
form表单校验、rules规则
2024年Web前端最全el-form表单验证的一些方法总结_el-form 必填验证，字节跳动Web前端三面凉凉
最新发布
2401_84434301的博客
05-11 475
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。如果有一些复杂的验证规则，也可以选择自定义验证,一般在vue中这样来写,就可以对表单进行验证。
Form 表单验证详细版
m0_73763853的博客
11-27 483
autorules。
原生JS经典小项目-form表单校验
05-18
原生JavaScript的表单校验则是为了确保用户输入的数据符合预期格式和规则，提高用户体验，防止无效或恶意数据的提交。这个经典小项目旨在通过JavaScript实现对HTML表单的验证，无需依赖外部库如jQuery或其他前端框架...
jQuery的form表单校验插件
03-25
**jQuery的form表单校验插件** 在Web开发中，表单验证是必不可少的一环，它确保用户输入的数据符合预设的规则，避免无效数据的提交，提高用户体验。jQuery作为一个强大的JavaScript库，提供了丰富的功能，包括对DOM...
解决antd Form 表单校验方法无响应的问题
01-18
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from....
vue-form表单验证是否为空值的实例详解
10-16
Vue-form 是 Vue.js 社区中用于处理表单的库，它提供了一种便捷的方式来管理表单状态、验证和提交。在这个实例中，我们将深入探讨如何使用 Vue-form 来验证表单字段是否为空值。 首先，我们需要创建一个表单。在 ...
【JavaScript源代码】Vue之ElementUI Form表单校验.docx
12-30
Vue之ElementUI Form表单校验 　表单校验是前端开发过程中最常用到的功能之一，根据个人的工作经验总结在此对表单校验功能的基础用法进行整理说明。　以下是form的demo　el-form :model="dynamicValidateForm" ref=...
form表单验证、校准
and_life的博客
06-15 821
userIdList: [{ type：‘array’ ,required: false, message: '请填写库管员', trigger: 'blur' }],\d)$/g, required: false, message: '请输入正确的邮政编码', trigger: 'blur' }],包含大写字母和 [ 、\ 、] 、^ 、- 、：^[A-Z]*$可以输入汉字：^[\u4e00-\u9fa5]*$可以输入字母（含大小写)：^[A-Za-z]*$不能输入纯空格：^[^\s]+[\s]*.*$
Vue-From表单校验步骤以及规则
weixin_54902466的博客
04-19 6299
Vue-From表单校验步骤以及规则 文章目录前言一、表单校验的步骤二、代码演示1.引入库2.读入数据总结 前言 提示：本章技术分享前端框架Vue中最常见的from表单验证步骤以及规则 提示：本章节主要是根据vue框架中能够的element-ui组件库为例进行编写 一、表单校验的步骤 定义验证规则 配置模板，应用规则 给表单设置 rules 属性传入验证规则 给表单设置model属性传入表单数据 给表单中的元素（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名 手动兜底
Form表单验证
weixin_30664539的博客
08-23 5470
Form表单提交前js验证 1. Onclick() 2. Onsubmit() Button标签input (属性submit button )标签 Input type=button 定义按钮，没有任何行为。多数情况下，用于通过javascript启动脚本 Input type=submit定义提交按钮，提交按钮会把表单数据发送到服务器 1. oncli...
el-form表单验证的一些方法总结
weixin_39639298的博客
07-08 4302
Form 组件提供了表单验证的功能，只需要通过 属性传入约定的验证规则，并将 Form-Item 的 属性设置为需校验的字段名即可。以一般的form表单为例： 一般在vue中这样来写,就可以对表单进行验证。 如果有一些复杂的验证规则，也可以选择自定义验证, 方式二（表单嵌套） 嵌套的表单,一般业务场景是，有一些表单项需要按照条件显示或者隐藏，data里面的model数据可能会是对象里面套对象的，el-form也同样支持嵌套的验证，写法一般如下：...
(ElementPlus)操作(不使用 ts): Form表单检验、规则及案例分析(这一篇就够了)
狮子座的男孩
08-19 5973
FormJavaScript在数据被送往服务器前对HTML中的Form 表单中的这些输入数据进行验证的行为就称为表单检验;
【element-ui】el-from的表单验证方式以及属性的使用总结
工作的日常记录和平凡的生活分享
04-12 3443
在后台管理系统的开发中，一般都是操作数据，因此表单的使用频率很高，然而表单的输入基本都需要输入验证来确保提交的数据格式符合需求，因此前端的验证很重要，就会避免一些不必要的错误提交到后台去
vueform表单校验
08-29
Vue Form表单校验是一种验证表单输入是否符合预期格式的技术。它的目的是为了提高用户填写表单的效率和准确性。在表单校验中，有三个关键要素：el-form上的model属性、el-form上的rules属性和el-form-item上的prop...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值