当前位置: 首页 > 编程笔记 >

javascript验证form表单数据的案例详解

胥良平
2023-03-14
本文向大家介绍javascript验证form表单数据的案例详解,包括了javascript验证form表单数据的案例详解的使用技巧和注意事项,需要的朋友参考一下

直接po截图和代码

下面是CheckFormDemo.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>验证表单的案例</title>
<link rel="stylesheet" type="text/css" href="../css/body.css" rel="external nofollow" />
<script type="text/javascript" src="jsCheckDateDemo.js"></script>
</head>
<body>
<h1>验证表单的案例</h1>
<form name="form1" id="f1" action="../TestForm" method="get">
姓名:<input type="text" name="userName" id="uName">
<br/>
年龄:<input type="text" name="age" id="uAge">
<br/>
密码:<input type="password" name="pwd" id="myPwd">
<br/>
重复密码:<input type="password" name="repeatPwd" id="myRepeatPwd">
<br/>
<!-- 
虽然复选框设置了 name属性,但是如果复选框不选中,是不会提交到服务器端的,只
有选中了的复选框,才会提交到服务器端
 -->
爱好:<input type="checkbox" name="hobby" id="myHobby" value="football">足球
<input type="checkbox" name="hobby" id="myHobby" value="badminton">羽毛球
<input type="checkbox" name="hobby" id="myHobby" value="basketball">篮球
<input type="checkbox" name="hobby" id="myHobby" value="billiards">台球
<br/>
备注:<textarea rows="3" cols="30" id="remarks"></textarea>
<br/>
<!-- 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值 -->
测试字段:<input type="text" id="test" value="本文本框故意不设置name属性,看服务器端能不能接收到">
<br/>
<!-- 
onclick="checkForm();"这句话中的;分号也可以省略不写,但是如果有多行js代
码的话,那就要在每行js代码后面加上;分号,最后一行js代码后面可以不写;分号,也可以写上;分号
 -->
<input type="button" value="js验证表单" onclick="checkForm();">
<input type="submit" value="提交到servlet">
</form>
</body>
</html>

下面是jsCheckDateDemo.js

/**
 * 
 */
 
//验证表单数据
function checkForm(){
//	alert(document.form1.hobby.length);
//	alert(document.getElementsByName("hobby").length);
//	alert(document.getElementsByName("hobby")[0].value);
//	alert(document.getElementById("myHobby"));
	
//	for (var i = 0; i < document.forms[0].hobby.length; i++) {
//		alert("---" + document.forms[0].hobby[i].value);
//	}
	
	var flag = false;
	for (var i = 0; i < document.form1.hobby.length; i++) {
//		alert(document.form1.hobby[i].value);
//		alert(document.form1.hobby[i].checked);
		if (document.form1.hobby[i].checked) {
			flag = true;
			break;
		}
	}
	if (!flag) {//没有一个爱好被选中
		alert("请至少选择一个爱好!");
		//程序也没必要再往下走了,直接return
		return;
	}
	if (document.forms[0].pwd.value.length < 8) {
		alert("密码长度不能小于8位!");
		document.forms[0].pwd.focus();//让密码框获取焦点
		//程序也没必要再往下走了,直接return
		return;
	}
	if (document.forms[0].pwd.value != document.forms[0].repeatPwd.value) {
		alert("两次密码输入不一致!");
		document.forms[0].repeatPwd.focus();//让重复密码框获取焦点
		//程序也没必要再往下走了,直接return
		return;
	}
	if (document.getElementById("remarks").value == "") {
		alert("备注不能为空!");
		/*
这里可以不写return,因为程序执行到这里时,后面已经没有任何代码了,所
以写不写return都无所谓,所以就不要写return了,写了反而让人觉得你是个新手,水平有点菜!
		*/
	}
}
 

以上所述是小编给大家介绍的javascript验证form表单数据详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 本文向大家介绍详解Angular Reactive Form 表单验证,包括了详解Angular Reactive Form 表单验证的使用技巧和注意事项,需要的朋友参考一下 本文我们将介绍 Reactive Form 表单验证的相关知识,具体内容如下: 使用内建的验证规则 动态调整验证规则 自定义验证器 自定义验证器 (支持参数) 跨字段验证 基础知识 内建验证规则 Angular 提供了一些内

  • 本文向大家介绍详解ASP.NET MVC Form表单验证,包括了详解ASP.NET MVC Form表单验证的使用技巧和注意事项,需要的朋友参考一下 一、前言   关于表单验证,已经有不少的文章,相信Web开发人员也都基本写过,最近在一个个人项目中刚好用到,在这里与大家分享一下。本来想从用户注册开始写起,但发现东西比较多,涉及到界面、前端验证、前端加密、后台解密、用户密码Hash、权限验证等等,

  • 在构建Web应用程序时,验证是一个重要的过程。 它确保我们获得的数据适当且有效存储或处理。 CodeIgniter使这项任务变得非常简单。 让我们用一个简单的例子来理解这个过程。 例子 (Example) 创建一个视图文件myform.php并将以下代码保存在application/views/myform.php 。 此页面将显示用户可以提交其姓名的表单,我们将验证此页面以确保在提交时不应为空。

  • 主要内容:使用 JavaScript 进行表单验证,必填字段验证,数据格式验证表单是 Web 应用(网站)的重要组成部分,通过表单可以收集用户提交的信息,例如姓名、邮箱、电话等。由于用户在填写这些信息时,有可能出现一些错误,例如输入手机号时漏掉了一位、在输入的内容前后输入空格、邮箱的格式不正确等。为了节省带宽同时避免这些问题对服务器造成不必要的压力,我们可以使用 JavaScript 在提交数据之前对数据进行检查,确认无误后再发送到服务器。 使用 JavaScript 来验

  • 本文向大家介绍vue elementui form表单验证的实现,包括了vue elementui form表单验证的实现的使用技巧和注意事项,需要的朋友参考一下 最近我们公司将前端框架由easyui 改为 vue+elementui 。自学vue两周 就开始了爬坑之路。业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正,多多交流才能共同进步! 1.问题 我

  • 简介 Laravel 提供了几种不同的方法来验证传入应用程序的数据。默认情况下,Laravel 的控制器基类使用 ValidatesRequests Trait,它提供了一种方便的方法使用各种强大的验证规则来验证传入的 HTTP 请求。 快速验证 要了解 Laravel 强大的验证功能,让我们看一个验证表单并将错误消息显示回给用户的完整示例。 定义路由 首先,假设我们在 routes/web.ph