JavaScript完成简单的表单校验案例

最新推荐文章于 2022-08-07 16:46:59 发布
最新推荐文章于 2022-08-07 16:46:59 发布
阅读量125 收藏
点赞数
分类专栏： 学习案例 文章标签： Java JavaScript 注册案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fwyfwyfwy/article/details/83544354
版权 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<script type="text/javascript">
	function checkForm(){
		//alert("aa");
		/* 检验用户名 */
		//1.获取用户输入的数据
		var uValue = document.getElementById("user").value;
		//alert(uvalue);
		if(uValue == ""){
			//2.给出错误提示信息
			alert("用户名不能为空");
			return  false;
		}
	    /* 检验密码 */
	    var pValue = document.getElementById("password").value;
	    if(pValue == ""){
	    	alert("密码不能为空");
	    	return false;
	    }
		
	    /* 检验确认密码 */
	    var rpValue = document.getElementById("repassword").value;
	    if(rpValue != pValue){
	    	alert("两次密码输入不一致！");
	    	return false;
	    }
	}
</script>
</head>
<body>
	<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
		<table >
			<tr>
				<td>用户名</td>
				<td><input type="text" name="user" size="34px" 
				    id="user"></td>
			</tr>
			<tr>
				<td>密码</td>
				<td><input type="password" name="password" size="34px"
					id="password"></td>
			</tr>
			<tr>
				<td>确认密码</td>
				<td><input type="password" name="repassword" size="34px"
					id="repassword"></td>
			<tr>

				<td colspan="2"><input type="submit" value="注册"></td>
			</tr>
		</table>
	</form>
</body>
</html>
fwyfwyfwy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript表单校验
mqingo的博客
11-11 943
确认事件             事件触发函数             函数操作元素                          校验用户名                 1. 当用户鼠标移动到输入框中时候, 请给用户一个提示                     事件: 焦点事件 onfocus                     触发函数                     ...
JavaScript 完成注册页面表单校验的实例
12-10
1、步骤分析 第一步：确定事件(onsubmit)并为其绑定一个函数 第二步：书写这个函数(获取用户输入的数据&...2、完成注册页面表单校验 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
JavaScript前端开发案例教程-源代码.rar
07-02
JavaScript前端开发案例教程，包含本书中所有实例源代码
JavaScript - 表单验证实例
陆讯
04-26 9967
表单验证1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>表单验证
原生javascript表单验证实例教程
蒋伟平的博客
04-03 384
表单验证是web前端最常见的功能之一，也属于前端开发的基本功。自己完成一个表单验证的开发，也有助于加深对字符串处理和正则表达式的理解。 基础的表单验证包括如字母验证、数字验证、字母和数字验证、汉字验证、密码验证、日期验证、手机验证、邮箱验证，密码验证等。
javascript验证用户名不能为空_JavaScript 表单验证如何实现的？
weixin_39551993的博客
11-29 690
为了保证提交数据的正确性，用户在填写表单的过程中还需要编写一堆的验证操作，可以利用JavaScript来验证完成。下面就给大家分享在web开发中JavaScript 表单验证如何实现的？希望对用到的同学能有所帮助!JavaScript 表单验证如何实现的？JS 错误DOM 简介JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。JavaScript 表单验证...
JavaWeb——JavaScript精讲之事件监听机制与表单校验案例实战
数字世界 万物互联
05-22 645
目录 1、事件监听机制概述 2、表单验证实战 1、事件监听机制概述 事件监听机制，指的是某些组件被执行了某种操作后，触发某些代码的执行。 事件：某些操作，如：单击、双击操作，键盘按下了，鼠标移动了。 事件源：组件，如按钮、文本输入框； 监听器：代码。 注册监听：将事件、事件源、监听器结合在一起，当事件源上发生了某个事件，则触发执行某个监听代码。 常见的事件： 1）点击事件：1、onclick：单击事件 2、ondbclick：双击事件 2）焦...
Javascript知识【案例：注册表单校验】
若有所执，必有所成，心之所向，必显光芒
08-07 436
注册表单的校验【附源码】
使用JavaScript进行表单校验功能
10-19
最近在学习JavaScript，因此想到使用js实现表单校验。下面通过本文给大家分享使用javascript实现表单校验功能的步骤，需要的的朋友参考下吧
javascript将异步校验表单改写为同步表单
10-24
主要介绍了javascript将异步校验表单改写为同步表单,需要的朋友可以参考下
JavaScript案例-js表单验证
02-16
JavaScript案例-js表单验证
JavaScript实现表单验证（包含实例）
Cavewang的博客
09-06 3808
表单验证表单验证意义与场景降低服务器压力提升用户体验表单验证举例界面效果展示 表单验证意义与场景 降低服务器压力 拦截不合格的数据，避免直接提交到服务器，可以显著降低服务器开销 提升用户体验 早期的互联网，表单项都是非常多的，注册个账号，经常需要填写20+个字段。而其中有一个填写不正 确就要等待几十秒时间。如果有了表单验证，反馈是实时的，而且脚本还能把你定位到填写错误的具体 字段。现在虽然无刷新技术早已普及，但是只依赖服务端验证，还是会有几百毫秒的延迟，实际使用会 有一种很难受的粘滞感。 表单验证举例 js
【课件PPT】凯洛格：从战略地图到学习地图.pptx
06-14
【课件PPT】凯洛格：从战略地图到学习地图.pptx
计算机系统大作业2024
06-14
计算机系统大作业
人力资源部内训之职业生涯规划.pptx
06-14
人力资源部内训之职业生涯规划.pptx
金沙滩51单片机开发.zip
06-14
该资源内项目源码是个人的课程设计、毕业设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 该资源内项目源码是个人的课程设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。
考研c语言试题.zip
06-14
考研c语言试题
基于Selenium的Java爬虫实战(内含谷歌浏览器Chrom和Chromedriver版本122.0.6257.0)
最新发布
06-14
资源包括: 1.Java爬虫实战代码 2.selenium学习笔记 3.代码演示视频 4.谷歌浏览器chrom122.0.6257.0 chrome-linux64.zip chrome-mac-arm64.zip chrome-mac-x64.zip chrome-win32.zip chrome-win64.zip 5.谷歌浏览器驱动器Chromedriver122.0.6257.0 chromedriver-linux64.zip chromedriver-mac-arm64.zip chromedriver-mac-x64.zip chromedriver-win32.zip chromedriver-win64.zip 特别说明:Chrome 为测试版(不会自动更新) 仅适用于自动测试。若要进行常规浏览，请使用可自动更新的标准版 Chrome。)
简单的v-decorator表单校验
04-03
V-decorator是基于Vue.js的表单校验插件，它可以帮助我们在Vue.js中更方便地实现表单校验。 以下是一个简单的使用v-decorator进行表单校验的例子： ```html <template> <div> <form> <div> <label for="name">姓名：</label> <input type="text" id="name" v-model="name"> </div> <div> <label for="age">年龄：</label> <input type="number" id="age" v-model="age"> </div> <div> <button @click.prevent="submitForm">提交</button> </div> </form> </div> </template> <script> import { required, numeric } from 'vuelidate/lib/validators'; import { validationMixin } from 'vuelidate'; export default { name: 'MyForm', mixins: [validationMixin], data() { return { name: '', age: '', }; }, validations: { name: { required, }, age: { required, numeric, }, }, methods: { submitForm() { this.$v.$touch(); if (!this.$v.$invalid) { // 表单校验通过 console.log('表单校验通过'); } }, }, }; </script> ``` 在上面的例子中，我们使用了vuelidate来完成表单校验，具体步骤如下： 1. 安装vuelidate和v-decorator ```bash npm install --save vuelidate v-decorator ``` 2. 在组件中引入vuelidate和v-decorator ```javascript import { required, numeric } from 'vuelidate/lib/validators'; import { validationMixin } from 'vuelidate'; ``` 3. 在组件中使用validationMixin ```javascript mixins: [validationMixin], ``` 4. 在组件的data中定义需要校验的表单项 ```javascript data() { return { name: '', age: '', }; }, ``` 5. 在组件的validations中定义每个表单项的校验规则 ```javascript validations: { name: { required, }, age: { required, numeric, }, }, ``` 6. 在组件中调用$v.$touch()方法触发表单校验 ```javascript submitForm() { this.$v.$touch(); if (!this.$v.$invalid) { // 表单校验通过 console.log('表单校验通过'); } }, ``` 通过以上步骤，就可以轻松地使用v-decorator进行表单校验了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值