JavaScript表单校验

最新推荐文章于 2023-03-29 15:51:50 发布
最新推荐文章于 2023-03-29 15:51:50 发布
阅读量196 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Happy_syy/article/details/102766628
版权

1.Form 对象代表一个 HTML 表单。

		 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
			function check(){
				var element = document.getElementById("user_name");
				console.log(element.value);    //相当于是输出的意思，类似于System.out.println();
				
				if(element.value == ""){
					alert("请输入用户名");   //弹出一个框，上面显示“请输入用户名”
					return false;
				}
				
				var element = document.getElementById("password");
				console.log(element.value);
				if(element.value == ""){
					alert("请输入密码");
					return false;
				}
				return true;
			}
		</script>
			<form action="http://www.baidu.com"    οnsubmit="return check()">   <!-- 详见下面注释1-->
				<input id="user_name" placeholder="请输入用户名"/>
				<input id="password" type="password" placeholder="请输入密码" />
				<input type="submit" value="登录" />
			</form>
	</body>
</html>
	</body>
</html>

注释1
action表示：设置或返回表单的action属性
action表示如果提交成功onsubmit执行了，那么就会执行action的内容。
运行结果：
在这里插入图片描述
注意：
介绍input标签
（1） input标签中type标签属性属性值为button时即为按钮，input标签为单标签，其标签属性如下：
①id：设按钮唯一标识符；
②value:设置按钮上的显示的文本；
③disabled：设定是否禁用按钮，属性值为disabled则按钮不可点击。
（2）input标签中type标签属性属性值为submit时即为提交按钮，该按钮会把表单数据发送到服务器，input标签为单标签，其标签属性如下：
①id：设定提交按钮唯一标识符；
②value:设置提交按钮上的显示的文本；
③disabled：设定是否禁用提交按钮，属性值为disabled则按钮不可点击。
（3）input标签中type标签属性属性值为reset时即为重置按钮，该按钮会清除表单中的所有数据，input标签为单标签，其标签属性如下：
①id：设定提交按钮唯一标识符；
②value:设置提交按钮上的显示的文本；
③disabled：设定是否禁用提交按钮，属性值为disabled则按钮不可点击。
2. Form 对象常用方法：
在这里插入图片描述
3.文本域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
	<body>
		
		<style>
			#button{
				font-style: normal;   //i标签是斜体字,将字体调为正常的
				cursor:pointer;   //在鼠标在这个按钮上是,显示的是一个“手指着的”形状
				background: red;
				width: 90px;    
				height: 70px;
				display: inline-block;
				text-align: center;   //水平居中
				line-height: 70px;   //行高和button高度一样时,字体垂直居中
			}
		</style>
		
		<script>
			function ch(){
				var element = document.getElementById("summary"); 
				 //element代表<textarea id="summary"></textarea> 对象
				console.log(element.value);  
				if(element.value == ""){    //获取用户输入的值
					alert("请输入简介");
					return;
				}
				document.getElementById("login").submit();   //将form表单进行提交，进入百度界面
			}
		</script>
		<form action="http://www.baidu.com" id="login">
			<textarea id="summary"></textarea>   
            <!--textarea是文本域-->
            <i id="button" οnclick="ch()">登录</i>
		</form>
	</body>
</html>

运行结果：
（1）没有输入任何内容
在这里插入图片描述
（2）输入内容之后，就会进到百度界面
4.radio单选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
	<body>
		
		<style>
			#button{
				font-style: normal;   //i标签是斜体字,将字体调为正常的
				cursor:pointer;   //在鼠标在这个按钮上是,显示的是一个“手指着的”形状
				background: red;
				width: 90px;    
				height: 70px;
				display: inline-block;
				text-align: center;   //水平居中
				line-height: 70px;   //行高和button高度一样时,字体垂直居中
			}
		</style>
		
		<script>
			function ch(){
				var elements = document.getElementsByName("sex");
				var flag=0;
				for(var i=0; i<elements.length; i++){
					if(elements[i].checked){   //如果有值的话，返回true
						flag=1;
						break;
					}
				}
				if(flag==0){
					alert("请选择性别");
					return;
				}
				document.getElementById("login").submit();	
			}
		</script>
		<form action="http://www.baidu.com" id="login">
			<input type="radio" name="sex" >男</input> <input type="radio" name="sex" >女</input>
			<i id="button" οnclick="ch()">登录</i>
		</form>
	</body>
</html>

运行结果，如果选择那么就会进入百度界面
在这里插入图片描述
如果没有选择
在这里插入图片描述
5.复选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
	<body>
		
		<style>
			#button{
				font-style: normal;   //i标签是斜体字,将字体调为正常的
				cursor:pointer;   //在鼠标在这个按钮上是,显示的是一个“手指着的”形状
				background: red;
				width: 90px;    
				height: 70px;
				display: inline-block;
				text-align: center;   //水平居中
				line-height: 70px;   //行高和button高度一样时,字体垂直居中
			}
		</style>
		
		<script>
			function ch(){
				var elements = document.getElementsByName("hobby");
				var flag=0;
				for(var i=0; i<elements.length; i++){
					if(elements[i].checked){
						flag=1;
						break;
					}
				}
				if(flag==0){
					alert("请选择爱好");
					return;
				}
					document.getElementById("login").submit();
			}
		</script>
		<form action="http://www.baidu.com" id="login">
			<input type="checkbox" name="hobby"/>篮球
			<input type="checkbox" name="hobby"/>排球
			<input type="checkbox" name="hobby"/>足球
			<i id="button" οnclick="ch()">登录</i>
		</form>
	</body>
</html>

选择之后，点击登录就会进入百度界面
在这里插入图片描述
没选择点击登录就会弹出警告
在这里插入图片描述
6.下拉列表

7.完整登录的界面添加了重置的功能
重置功能：把表单的所有输入的元素重置为默认值，全部清楚了之前写的内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
	<body>
		
		<style>
			#button{
				font-style: normal;   //i标签是斜体字,将字体调为正常的
				cursor:pointer;   //在鼠标在这个按钮上是,显示的是一个“手指着的”形状
				background: red;
				width: 90px;    
				height: 70px;
				display: inline-block;
				text-align: center;   //水平居中
				line-height: 70px;   //行高和button高度一样时,字体垂直居中
			}
		</style>
		
		<script>
			function ch(){
			
				var element = document.getElementById("u_name");
				console.log(element.value);
				if(element.value == ""){
					alert("请输入用户名");
					return;  //？
				}
				
				var element = document.getElementById("pass");
				console.log(element.value);
				if(element.value == ""){
					alert("请输入密码");
					return;
				}
				
				var element = document.getElementById("summary");
				console.log(element.value);
				if(element.value == ""){
					alert("请输入简介");
					return;
				}
				
				var elements = document.getElementsByName("sex");
				var flag=0;
				for(var i=0; i<elements.length; i++){
					if(elements[i].checked){   //如果有值的话，返回true
						flag=1;
						break;
					}
				}
				if(flag==0){
					alert("请选择性别");
					return;
				}
				
				var elements = document.getElementsByName("hobby");
				var flag=0;
				for(var i=0; i<elements.length; i++){
					if(elements[i].checked){
						flag=1;
						break;
					}
				}
				if(flag==0){
					alert("请选择爱好");
					return;
				}
				
				var elements = document.getElementsId("grade").options();
				var flag=0;
				for(var i=0; i<elements.length && value==""; i++){
					if(elements[i].checked){
						flag=1;
						break;
					}
				}
				if(flag==0){
					alert("请选择年级");
					return;
				}
				
				document.getElementById("login").submit();
				
			}
		</script>
		
		
		<form action="http://www.baidu.com" id="login">
			<input id="u_name" placeholder="请输入用户名"/>
			<input id="pass" type="password" placeholder="请输入密码" />
			<textarea id="summary"></textarea>
			<input type="radio" name="sex" >男</input> <input type="radio" name="sex" >女</input>
			<input type="checkbox" name="hobby"/>篮球
			<input type="checkbox" name="hobby"/>排球
			<input type="checkbox" name="hobby"/>足球
			<select id="grade">
				<option value="">请选择</option>
				<option value="1">一年级</option>
				<option value="2">二年级</option>
			</select>
			<i id="button" οnclick="ch()">登录</i>
			<i id="reset" >重置</i>
		</form>
		
			
		<script>
			document.getElementById("reset").addEventListener("click",function(){
				document.getElementById("login").reset();
			});
		</script>
		
		</body>
</html>

运行结果
在这里插入图片描述

Happy_syy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript表单校验
04-15
校验表单的脚本，全面详实
寒假安恒培训班结业考试web题
qq_41618162的博客
01-23 1471
1.简单的post传值 2.input 输入框 查看源码可得一段云算的js代码 function check(){ var flag = document.getElementById(&amp;amp;amp;amp;amp;amp;quot;flag&amp;amp;amp;amp;amp;amp;quot;).value; var str = &amp;amp;amp;amp;amp;amp;quot;d84d9657e5e
JavaScript表单验证
weixin_52629592的博客
06-14 9813
表单验证是JavaScript的高级选项之一.我们可以通过JavaScript在网页中对即将送往服务器的HTML表单中的输入数据进行验证.如果所输入内容与所需不符,我们就在页面中进行提示.这样就使得我们不用频繁的与服务器进行交互,减少了IO的频率,提高了效率.在表单验证中,我们通常使用如下的验证功能:验证用户名与密码为指定格式在验证用户名与密码时,我们通常验证用户名与密码不能为空,用户名和密码必须在指定长度范围内,用户名和密码由数字和字母组成(使用正则表达式)等等验证单选框所选内容最常见的验证单选框就是验证
javascript表单验证
lijie1025的博客
03-16 1777
正则表达式适用单个字符串来描述，匹配一系列符合某个句法规则的字符串搜索模式用某种模式去匹配一类字符串的公式通过使用正则表达式，可以：1.测试字符串内的模式。2.替换文本。3.从字符串中提取字符串。//字面量方式，其由包含在斜杆之间的模式组成，如下所示：//构造函数方式，调用RegExp对象的构造函数，如下所示：var regex=/ 正则规则 /;//调用方法判断是否满足要求var flag = regex.test( '内容' );
使用javascript的str和substr方法验证非法字符
weixin_34187822的博客
02-21 79
    虽然验证非法字符有N多种方法，今天老师就让用str写个验证字符串，我也是迫不得已憋了好半天才写出来，哎，身不由己呀！这只是我的一个思路，如果大家有别的见解，不要吝啬，提给我嗯，哈！     首先先说我的大概这么一个思路吧：用str定义允许输入的字符，利用二层循环改变循环前初始好的这么一个状态值，最后由状态值判断出字符是否合法。 用到的知识点呢无非就是循环，字符截取等。 &lt;!...
javascript表单校验2
04-15
另一个表单校验脚本，详细完整
使用JavaScript进行表单校验功能
10-19
最近在学习JavaScript，因此想到使用js实现表单校验。下面通过本文给大家分享使用javascript实现表单校验功能的步骤，需要的的朋友参考下吧
JavaScript 完成注册页面表单校验的实例
10-19
下面小编就为大家带来一篇JavaScript 完成注册页面表单校验的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
javascript将异步校验表单改写为同步表单
10-24
主要介绍了javascript将异步校验表单改写为同步表单,需要的朋友可以参考下
js几种常用表单验证控件
04-18
NULL 博文链接：https://vipshow.iteye.com/blog/1838930
javascript表单验证方式一
04-07
NULL 博文链接：https://whitedaisy.iteye.com/blog/1562163
JavaScript表单验证类库Validate.js.zip
07-19
Validate.js是一个轻量级的JavaScript表单验证类库，它不依赖于其它任何JavaScript框架，经GZIP压缩后仅有1KB大小。它所提供的验证类型有：是否为空、数字、Email地址、判断输入值是否在某一范围内等，此外你也可以自定义验证规则，它也支持在一个输入框中使用多种验证规则。验证规则的提示信息是默认设置在JS文件中的，它也提供了函数让你可以自定义提示信息。 示例代码： var validator = new FormValidator('example_form', [{ name: 'req', display: 'required', rules: 'required' }, { name: 'alphanumeric', rules: 'alpha_numeric' }, { name: 'password', rules: 'required' }, { name: 'password_confirm', display: 'password confirmation', rules: 'required|matches[password]' }, { name: 'email', rules: 'valid_email' }, { name: 'minlength', display: 'min length', rules: 'min_length[8]' }], function(errors, events) { if (errors.length > 0) { // Show the errors } }); 标签：Validate
javaScript-06 表单验证 详细易懂，加案例分析
YZZdear的博客
03-29 1949
JavaScript表单验证，全网最详细
JavaScript之表单验证
热门推荐
weixin_64938628的博客
03-06 1万+
前言：我们这一次讲的表单验证运用了前面几篇文章说讲的的内容，比之前的要难一些，我会在代码里以注释的形式详细的讲解。 目录 一.简单的表单验证 验证方式一: 验证方式二： 二.正则验证 一.正则的规则 内容 次数 二.正则的注意事项 三.二级联动 一.简单的表单验证 验证方式一: <html> <head> <meta charset="UTF-8"> <title>Title&...
javascript 快速入门之第六章 表单验证
qq_61313896的博客
03-23 1420
一：表单验证的基本概念 为了保证用户提交的信息都是正确的，保证系统的安全性，验证是必不可少的，同时也为降低服务器的压力，减少资源损耗，在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 二：表单验证的实现方式 内置对象String 正则表达式 内置对象String基本概念 String 对象用于处理文本，也就是字符串。一个字符串用于存储一系列的字符，通常 JS 字符 串是原始值，可以使用变量声明，也可以使用 new 关键...
node-v9.2.1-linux-x86.tar.xz
最新发布
05-06
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
node-v9.1.0-linux-s390x.tar.xz
05-06
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
elementplus 表单校验 单项
03-02
Element Plus 是一套基于 Vue.js 的桌面端组件库，提供了丰富的 UI 组件和功能。其中，Element Plus 表单校验是指对表单中的输入内容进行验证，确保用户输入的数据符合预期的格式和要求。 在 Element Plus 中，表单校验是通过给表单元素添加校验规则来实现的。可以通过以下步骤来进行单项表单校验： 1. 导入 Element Plus 组件库和相关样式： ```javascript import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; ``` 2. 在 Vue 组件中使用表单组件： ```html <template> <el-form ref="form" :model="formData" :rules="rules"> <el-form-item label="用户名" prop="username"> <el-input v-model="formData.username"></el-input> </el-form-item> <!-- 其他表单项 --> <el-button type="primary" @click="submitForm">提交</el-button> </el-form> </template> ``` 3. 在 Vue 组件的 `data` 中定义表单数据和校验规则： ```javascript data() { return { formData: { username: '' // 其他表单项 }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, // 其他校验规则 ] } }; } ``` 4. 在 Vue 组件的方法中编写提交表单的逻辑： ```javascript methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 表单校验通过，执行提交逻辑 // ... } else { // 表单校验不通过，提示错误信息 return false; } }); } } ``` 以上就是使用 Element Plus 进行表单校验的基本步骤。通过定义校验规则和调用 `validate` 方法，可以实现对单项表单的校验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值