实现带样式的表单验证

最新推荐文章于 2023-10-19 23:28:30 发布
最新推荐文章于 2023-10-19 23:28:30 发布
阅读量495 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42103706/article/details/84137696
版权

html:

<!doctype html>
<html>
 <head>
	<meta charset="UTF-8">
	<title>实现带样式的表单验证</title>
	<link rel="Stylesheet" href="css/3.css" />
 </head>
 <body>
	<form id="form1">
		<h2>增加管理员</h2>
		<table>
			<tr>
				<td>姓名：</td>
        		<td>
					<input name="username"/>
					<span>*</span>
				</td>
				<td>
					<div class="vali_info">
						10个字符以内的字母、数字或下划线的组合
					</div>
				</td>
			</tr>
			<tr>
				<td>密码：</td>
				<td>
					<input type="password" name="pwd"/>
					<span>*</span>
				</td>
				<td>
					<div class="vali_info">6位数字</div>
				</td>
			</tr>
			<tr>
				<td></td>
				<td colspan="2">
         		 	<input type="button" value="保存"/>
          			<input type="reset" value="重填"/>
				</td>
			</tr>				
	    </table>
	</form>
	<script src="js/3.js"></script>
 </body>
</html>

js:

//Step1:为name为username和pwd的文本框绑定获得焦点事件
var form=document.forms[0];
var txtName=form.username;
var txtPwd=form.pwd;
//获得焦点时的事件
txtName.onfocus=getFocus;
txtPwd.onfocus=getFocus;
function getFocus(){
  //this->当前文本框
  //当前文本框边框加粗
  this.className="txt_focus";
  //清除旁边div的class
  var div=this.parentNode
      .nextElementSibling
      .firstElementChild;
  div.className="";
}
//txtName失去焦点时
txtName.onblur=function(){
  vali(this,/^\w{1,10}$/);
}
function vali(txt,reg){
  //清除当前文本框的class
  txt.className="";
  //获取旁边div
  var div=txt.parentNode
    .nextElementSibling
    .firstElementChild;
  //用reg测试当前文本框的内容
  //如果通过,就修改div的class为vali_success
  if(reg.test(txt.value)){
    div.className="vali_success";
    return true;
  //否则修改div的class为vali_fail
  }else{
    div.className="vali_fail";
    return false;
  }
}
txtPwd.onblur=function(){
  vali(this,/^\d{6}$/);
}
//单机保存时
form.elements[form.length-2].onclick=function(){
  //选验证所有文本框
  //var rName=vali(txtName,/^\w{1,10}$/);
  //var rPwd=vali(txtPwd,/^\d{6}$/);
  //if(rName==rPwd==true){//如果验证通过
  //  form.submit();//提交表单
  //}
  //如果txtName和txtPwd未验证通过,则不可提交
  if(!vali(txtName,/^\w{1,10}$/)){
    txtName.focus();//让txtNmame获得焦点
  }else if(!vali(txtPwd,/^\d{6}$/)){
    txtPwd.focus();
  }else{
    form.submit();//提交
  }
}
二八哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
MUI框架实现注册登录界面以及规则校验 实例源码下载
02-10
MUI框架实现注册登录界面以及规则校验
表单验证的简单实现
机械工程跑路哥
01-13 1891
如果没有表单验证，错误的数据就会发往服务端，会造成服务端压力过大； 所以在前端对数据进行过滤，以减轻服务端压力；
el-table加星标和表单验证以及控制单元格样式
weixin_48998930的博客
02-09 1630
1. 表头加星标 利用el-table-column中的插槽 <template #header> <span style="color: red; margin-right: 4px">*</span> <span>金额（元）</span> </template> 2.表单验证 用el-form将table表格包裹起来 <el-form :inline="true" v-model="dataLi.
css中常用伪类表单验证:invalid、:valid、:required、以及:not 、:lang、:empty的使用
weixin_45803990的博客
05-09 1635
CSS 伪类用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。CSS 伪类表示内容验证正确的 或其他 元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。CSS 伪类用于选择不包含任何子元素的元素。子元素可以是元素节点或文本（包括空格）。CSS 伪类表示任何设置了 required 属性的。是 CSS 伪类选择器，用来选择任何未通过验证的。CSS 伪类基于元素语言来匹配页面元素。
【Java 进阶篇】JavaScript 表单验证详解
最新发布
繁依Fanyi的博客
10-19 697
在上面的示例中，我们使用alert函数来显示验证错误消息。然而，这并不是最好的用户体验，通常我们会希望将错误消息直接显示在页面上，以便用户更容易理解。为此，您可以使用 HTML 元素来显示错误消息，并根据验证结果显示或隐藏它们。
Angular实现表单验证功能
08-28
Angular实现表单验证功能 Angular是目前最流行的前端框架之一，实现表单验证功能是Angular中非常重要的一部分。本文主要为大家详细介绍了Angular实现表单验证功能，具有一定的参考价值，感兴趣的小伙伴们可以参考...
纯JS实现表单验证实例
11-28
总的来说，纯JavaScript实现的表单验证实例是一个重要的实践技能，它涉及到HTML表单元素的使用，JavaScript事件处理，以及基本的CSS样式设计。通过这个实例，开发者可以学会如何动态检查用户输入，提升用户体验，并...
详解AngularJS实现表单验证
10-23
在AngularJS中，表单验证是一项至关重要的功能，它允许开发者在用户提交数据之前检查其输入的有效性。这种客户端验证可以极大地提升用户体验，因为它能够实时反馈用户输入的问题，而无需等待服务器响应。以下是对...
jQuery插件Validate实现自定义表单验证
10-22
在本文中，我们将深入探讨如何使用jQuery Validate插件实现自定义表单验证，特别是如何自定义一个验证方法。 首先，要使用jQuery Validate插件，你需要在页面中引入jQuery库以及jQuery Validate插件的JavaScript...
BootstrapValidator实现表单验证功能
10-16
这个插件充分利用了Bootstrap框架的样式，提供了美观的错误提示信息，使得表单验证更加直观和友好。 在实际应用中，BootstrapValidator 的使用通常包括以下几个步骤： 1. **引入依赖**：首先，你需要在HTML文件中...
漂亮的表单验证样式，纯HTML
03-27
漂亮的表单验证样式 纯HTML 单个文件 实用
移动端表单验证
10-28
在MUI构建的移动端表单中，pc端的网页表单验证器不支持移动端验证
基于vue3的京东nutui组件库的表单校验规则：怎样进行表单验证？怎样只使用指定的某一个规则进行校验呢？
南北极之间
06-16 2194
官网：NutUI - 移动端 Vue2、Vue3、小程序 组件库京东风格的轻量级移动端 Vue、React 组件库https://nutui.jd.com/#/component/form（详细的代码在下面，这里先只说主要的使用方法）如果.validate()里的参数是空，则默认校验全部规则如果想单独使用某一个规则的话。就在.validate()里面加上要验证的那个prop参数即可：比如只想校验手机号码的话：关键代码： 以文档的这个例子来改写： 官网的代码可以运行：在线代码开发平台https://c
如何设置好看的form表单样式_表单验证!!!
weixin_39788969的博客
11-20 896
1. 表单验证A(1) 如何可以产生一个4位的随机数验证码Math.floor(Math.random()*9000)+1000(2) 在案例中是如何控制表单是否提交的在方法中控制表单提交获得form标签form.submit()提交表单或者在form表单属性中 onsubmit=”return 方法(返回boolean类型表示是否提交)”2. 表单验证B(1) 代码中如何判断性别是否选择的判断是...
自定义element-ui表单验证的样式
我的博客
07-15 2488
一、默认样式 我们使用element-ui表单的时候，一般会使用该组件的规则验证器，比如注册时会定义以下规则： <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" autocomplete="off" hide-required-asterisk="true" size="medium
Javascript：简单的表单验证更改样式
KaiSarH
12-30 774
实现简单的表单验证样式更改
(day03-4)实现带样式的表单验证
乔的博客
05-08 161
<!doctype html> 实现带样式的表单验证 增加管理员 姓名： * 10个字符以内的字母、数字或下划线的组合 密码： * 6位数字 ...
element-ui修改表单自带验证的样式
weixin_30359021的博客
09-06 4574
1.比如重写在表单自带验证的样式 .el-form-item__error是对应是的文字的类名，图标我是通过伪元素插进去的 下面是伪元素代码 基本上要重写样式的，到控制台看样式名，因为是封装的，所以有些样式写在外面是不起作用的 转载于:https://www.cnblogs.com/shuen/p/9598542.html...
H5表单验证2(h5自带验证美化)
weixin_40512519的博客
09-25 5161
h5自带验证美化：要做出不一样的表单验证，我们要了解一些伪类及css选择器。 :required和:optional :in-range和:out-of-range :valid和:invalid :read-only和:read-write //:required和:optional &lt;style&gt; .container{ max-w...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值