javascript基础学习-表单验证(五)

最新推荐文章于 2020-09-19 18:13:44 发布
最新推荐文章于 2020-09-19 18:13:44 发布
阅读量1.4k 收藏
点赞数
分类专栏： ------javascript 文章标签： java javascript 基础 表单验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sidongxue2/article/details/23972193
版权
下面是用javascript写的一个非常简单的表单验证,亲们一起学习下吧! 
<html>
	<head>
		<title>FormTest1</title>
		<script language="javascript">
			function validateData(){
				if(document.form.username.value==""){
					alert("请输入用户名");
					return false;
				}else if(document.form.username.value.length<6||document.form.username.value.length>12){
					alert("请输入用户名:6-12位字符");
					return false;
				}
				return true;
			}
		</script>
	</head>
	<body>
		<form name="form" action="RegisterSuccess.html" onSubmit="return validateData()">
			<input type="text" name="username" value="请输入用户名:6-12位字符" size="30">
			<input type="submit" name="register" value="注册">
		</form>
	</body>
</html>
针对上面的表单验证是通过弹出窗口提示,用户体验不是很好,如何优化呢？看下面的表单验证的改进版. 
<html>
	<head>
		<title>FormTest2</title>
		<script language="javascript">
			function validateData(){
				if(document.form.username.value==""){
					document.getElementById("usernameerror").innerHTML="请输入用户名";
					return false;
				}else if(document.form.username.value.length<6||document.form.username.value.length>12){
					document.getElementById("usernameerror").innerHTML="请输入用户名:6-12位字符";
					return false;
				}
				return true;
			}
		</script>
	</head>
	<body>
		<form name="form" action="RegisterSuccess.html" onSubmit="return validateData()">
			<input type="text" name="username" value="请输入用户名:6-12位字符" size="30">
			<span id="usernameerror"></span>
			<input type="submit" name="register" value="注册">
		</form>
	</body>
</html>
注意针对上面的<span id="usernameerror"></span>,我们也可以换成<div id="usernameerror"></div>,他们的区别是
div会另起一行显示,而span因为是行内快所以会和文本框在同一行显示.
IluckySi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript案例-js表单验证
02-16
本案例重点聚焦于JavaScript在表单验证中的应用，旨在帮助开发者掌握如何使用纯JavaScript实现有效的用户输入验证，提高用户体验并减少服务器端的压力。 在网页表单中，验证通常是必不可少的步骤，它可以确保用户...
java script 用户名_用户名和密码验证
weixin_42651748的博客
02-13 607
function isValidate(form){//取得用户登录信息username = form.username.value;userpass = form.userpass.value;//判断用户名长度if(!minLength(username,6)){alert("用户名长度小于6位！");form.username.focus();return false;}if(!maxLen...
不通过getElementByName实现获取表单数据 (document.form表单的name值.input输入框的name值)...
A458545418的博客
06-25 313
function update() { //document.form表单的name值.input输入框的name值 var username = document.form1.username; var mobile = document.form1.mobile; var qq = document.form1.qq; ...
获取form表单的有name属性的value值
ChenYaJie
05-13 7083
var model = {}; var x = $(“form”).serializeArray(); // var czr_seria = {}; $.each(x, function (i, field) { //czr_seria += field.name + “:” + field.value + “,”; model[field.name] = field.value; }); ...
Javascript的表单验证-提交表单
10-22
在JavaScript中，表单验证通常是通过事件监听来实现的。例如，`onBlur`事件会在用户离开特定输入字段时触发，这时可以调用验证函数。在提供的示例中，有两个验证函数：`validate_Length` 和 `validate_ZipCode`。 `...
Javascript的表单与验证-非空验证
10-22
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。本文给大家介绍javascript的表单与验证-非空验证，对javascript表单验证相关知识感兴趣的朋友一起学习吧
一套自己写的JSP注册登录页面及后台数据库
期待...等待...一只蝴蝶的出现
09-18 309
本人刚学JAVA, 记下学习的点点滴滴, 里面涉及到JAVA的很多内容,初学者可以借鉴 不过要花时间仔细看! 第一个Zhuce.jsp function check(form) { if(form.username.value==null || form.username.value==""){ alert('对不起！...
form表单 用户名，密码和邮箱验证
u013658068的专栏
11-21 5081
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1ArrayArrayArray/xhtml" lang="zh-CN">     function check(){  var  username=document.getElementById("username").value;
document.forms用法示例介绍
xyjikl
12-12 1495
概述 forms 返回一个集合 (一个HTMLCollection对象),包含了了当前文档中的所有form元素. 语法 var collection = document.forms; 例子 获取表单信息 $(function(){ var thisForm = document.forms['form1']; //获取name为form1的form表单 //或者 //v
JavaScript常用内置对象（window、document、form对象）
webdev
06-29 455
由于刚开始学习B/S编程，下面对各种脚本语言有一个宏观的简单认识。 脚本语言(JavaScript,Vbscript,JScript等)介于HTML和C,C++,Java,C#等编程语言之间。它的优势在于代码执行时不用像编程语言那样必须经过“编译”，先生成二进制机器码再执行，而是由其所对应的解释器（或称虚拟机）直接解释执行。程序代码既是脚本程序，亦是最终可执行文件。 历史: JavaSc...
html中如何获取表单的数据
热门推荐
StuTan
05-27 2万+
使用表单中的id属性获取表单中的数据 在表单的input标签中指定id属性值，在script脚本中可以通过 “表格的名称.id名称.value”来访问表单中的值，例如：register_form.username.value 表单代码： <form name = "register_form" action="" method="post"> 昵称:<input type="text" name="username" maxlength="20" id="username
一个简单的form表单验证
L_beaman的博客
09-19 390
在用html以及javascript写一个简单的表单验证时遇到了不少小问题。 因为javascript是脚本语言不用编译和检查，所以一旦代码上出现一些小问题可能很难发现。 我的代码如下 // An highlighted block <script> function check(form) { var n=form.username.value; if(n.length==0) { document.getElem
表单提交的三种方法
CY的博客
05-27 791
（1）submit按钮结合onsubmit事件，实现表单提交 function checkForm() { var theForm = document.form1; if(theForm.username.value=="") { window.alert("用户名不能为空"); return false; }else if(theForm.userpwd.value.len
用户名和密码验证
第一份博客
04-19 319
function isValidate(form) { //取得用户登录信息 username = form.username.value; userpass = form.userpass.value; //判断用户名长度 if(!minLength(username,6)) { alert("...
用document.forms[formname].elements[elementname].value获取FORM元素的value--测试通过
东垂小夫
06-03 4061
用新方法document取得FORM中的元素的value function sub() { var name = document.forms['theForm'].elements['name'].value; var sex = document.forms['theForm'].elements['sex'].value; alert(name); alert(sex); ret

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值