Html表单验证（纯js）

最新推荐文章于 2024-03-01 20:16:14 发布
最新推荐文章于 2024-03-01 20:16:14 发布
阅读量483 收藏
点赞数
文章标签： html 表单 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16055765/article/details/51517814
版权 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<html> 
<head> 
<title>用户登录</title> 
<script language="javascript" type="text/javascript">
function sub()
{
var user = document.userform.user.value;
var pass = document.userform.pass.value;

    if(user=="")
    {
    document.getElementById('usertag').innerText='用户名不能为空!';
        return ;
    }else if(pass=="")
    {
        document.getElementById('passtag').innerText='密码不能为空!';
        return;
    }else
    {
        document.userform.submit();
    }

}
</script>
</head> 
<body> 
<form action="#" method="post" name="userform"> 
用户名：<input type="text" name="user" style="width: 80px" /><span id="usertag"></span><br>
密码：<input type="text" name="pass" style="width: 80px" /><span id="passtag"></span><br> 
<input type="button" name="login" value="提交"  onClick="sub()"  /> 
</form> 


</body> 
</html>
qq_16055765
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML (4) JS实现表单验证，移动web开发框架
2401_84097520的博客
04-03 319
点击这里即可免费获取，包括答案解析。点击这里即可免费获取，包括答案解析。[外链图片转存中…(img-5Y9biUgm-1712103830672)]a-zA-Z_↩︎。
HTML (4) JS实现表单验证
m0_70274796的博客
05-04 386
<input type=“text” class=“textinput” 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 id=“username” name=“username” οnkeyup=“checkUsername();”/> 字母数字下划线1到10位，不能是数字开头 <input type=“password” class=“textinput” id=“password” n...
HTML---表单验证
zhoutong2323的博客
03-01 1330
前端中的表单验证是在用户提交表单之前，对用户输入的数据进行合法性检查的过程。这种验证的目的是确保用户输入的数据符合预期的要求，从而减少错误和无效的数据提交，提高数据的质量和准确性。输入类型的验证：检查用户输入的数据是否符合预期的输入类型，如文本、数字、邮箱、密码等。必填字段的验证：确保用户必须填写某些字段，这些字段通常是表单中的关键信息。日期和时间范围的验证：检查用户输入的日期或时间是否在允许的范围内。步长的验证：对于某些需要递增或递减的输入字段，如价格、评分等，验证其步长是否符合要求。
JS表单验证(HTML+CSS+JS)小实例【详细教程】
m0_59420288的博客
12-05 5760
大家好，分享一个HTML+CSS+JS表单校验，包括页面的简单布局，样式渲染，还有基础的JS校验方法。希望大家喜欢！哈哈 地址：组件 | Element ，也可使用其他组件库，根据自己的喜好。 （2）CSS （3）JavaScript JS代码逻辑 1.获取页面实体（输入框、表单），使用 getElementById() 2.form表单提交事件 3.总验证方法 4.简单封装验证成功和失败的方法验证原理：输入框的父组件上添加成功或失败的样式，并且将验证错误信息动态添加到标签中。setError方法
【html表单验证 】
qq_56058244的博客
01-05 2655
整理了一个表单验证
纯JS实现表单验证实例
11-28
在本文中，我们将深入探讨如何使用纯JavaScript实现一个表单验证实例，这涉及到HTML表单元素、属性以及相应的JavaScript事件处理。首先，我们要了解表单的基本结构和元素： 1. **`<form>` 标签**：用于创建一个表单...
javascript html5实现表单验证
10-22
主要为大家详细介绍了javascript html5实现表单验证的具体代码，感兴趣的小伙伴们可以参考一下
js浏览器html5表单验证
11-27
为了解决这些问题，开发者通常需要借助第三方插件或自定义JavaScript代码来实现跨浏览器的表单验证。一个示例插件能提供以下功能： 1. **统一UI**：通过插件可以实现所有浏览器下一致的验证提示样式和位置，且可...
html表单验证及javascript进行表单验证
最新发布
05-14
html表单验证及javascript进行表单验证
【HTML】HTML实现简单表单（不含验证）
A Lucky Boy的博客
02-19 4770
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>这是.
html网页用户注册表单验证校验JavaScript源码代码
05-02
html网页用户注册表单验证校验JavaScript源码代码，完整代码已经打包，还迎下载，代码仅供学习参考。 function checkuser(){//检查用户名的方法 var usernameNode=document.getElementById("username");//通过id得到input标签节点 var str=usernameNode.value;//获取到input标签框框里面输入的值，是一个字符串 var regExp = new RegExp("^\\w*$","gm");//一定要写上开头^和结尾$不然匹配上后，没办法排除别的，要打上*号，表示可以0个以上匹配的字符 var ismacth=regExp.test(str);//获得的字符串跟正则表达式做比较 if(str.length !==0){//字符串的长度不等于0则判断字符串是否匹配正则表达式 if(ismacth){//输入的用户名不为空时 document.getElementById("username1").innerHTML="√";//正确时候输出√ document.getElementById("username1").setAttribute("class","duitishi");//设置div标签的class属性为对提示，让它正确的时候显示绿色 }else{//输入的用户名不为空但是有不合法字符时 document.getElementById("username1").innerHTML="× 只能包含数字，字母，下划线"; document.getElementById("username1").setAttribute("class","cuotishi");//设置div标签的class属性为错提示，让它错误的时候显示红色 } }else{//输入的用户名为空时 document.getElementById("username1").innerHTML="请输入用户名"; document.getElementById("username1").setAttribute("class","cuotishi"); } }
漂亮的表单验证样式，纯HTML
03-27
漂亮的表单验证样式 纯HTML 单个文件 实用
html、js简单表单验证
01-27
一个简单的表单验证demo，原生验证方式，内置html、js、css代码
JavaScript、Html5——表单验证相关
Corn___的博客
09-13 1552
前端表单验证相关
html 表单
weixin_64195420的博客
03-22 3361
input类型 用户框： // input 默认是text maxlength 表示可输入的最大字符数 // size 表示表单的初始元素 name 表示表单元素的名称 value 表示初始值（type值为radio 必须指定一个值） 密码框： //密码框 类型为password 密码框里面内容是加密的 单选框： //密码框 类型为radio radio单选框的value值一般用英文表示 checked 表示单选按钮选中状态 可以给...
纯html的form表单实操练习
m0_64336780的博客
04-05 9171
纯html的form表单实操练习
用HTML写一个静态的表单，纯html
ax1971的博客
08-25 607
用HTML写一个静态的表单，纯html 登录页面 <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <h1>登录页面</h1> <form action="" method="get"> <label for="username">用户名</label&
js+html表单验证
m0_59159504的博客
12-07 408
先来看看错误代码 <!DOCTYPE html> <html> <head> <title> 写给某个欺负人的 </title> </head> <body> <h2>下面用一个form表单来演示校验</h2> <br> <br> &l
html 表单验证
热门推荐
Mike的博客
12-07 1万+
因为最近在做一个项目，需要实现前端表单验证，而这些只是简单的非空和数字之类的简单验证，可能大家都听说过 jQuery Validate，但是我觉得引用 jQuery Validate 太麻烦了。 我采用的表单验证不是使用 框架来实现，而是直接使用 html5 的新特性 1. 实现一个简单的用户名长度验证 我想实现表单验证，但是写js又太麻烦，有没有简单实用又灵活的方法 需求：用户名限制长度...
JavaScript与jQuery表单验证技术解析
这篇PPT主要讲解了在Web开发中如何使用jQuery进行表单验证，以及相关的JavaScript和String对象的使用技巧。表单验证对于确保用户输入的有效性和减少服务器负载至关重要。以下是详细的知识点概述： 1. **表单验证的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值