表单数据验证组件

最新推荐文章于 2024-04-20 14:59:10 发布
最新推荐文章于 2024-04-20 14:59:10 发布
阅读量117 收藏
点赞数
分类专栏： JavaScript 文章标签： bootstrap javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42223701/article/details/121127926
版权 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap表单样式一</title>
	<!-- 让页面样式根据设备大小进行调整显示 -->
	<meta name=viewport content="width=device-width,initial-scale=1">
	<script type="text/javascript" src="bootstrap/js/jQuery.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
	<!-- 导入验证文件 -->
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.min.js"></script>
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
	<script type="text/javascript" src="bootstrap/js/form_validate.js"></script>

</head>
<body>
	<div class="container">
		<form action="index_submit" class="form-horizontal" id="myform">
			<fieldset>
				<legend><span class="glyphicon glyphicon-user"></span>用户注册</legend>
				<div class="form-group" id="nameDiv">
					<label for="name" class="col-md-1 control-label">姓名</label>
					<div class="col-md-5">
						<input type="text" name="name" placeholder="请输入姓名" id="name" class="form-control">
					</div>
					<div class="col-md-3" id="nameSpan"></div>
				</div>
				<div class="form-group" id="pwdDiv">
					<label for="pwd" class="col-md-1 control-label">密码</label>
					<div class="col-md-5">
						<input type="password" name="pwd" placeholder="输入密码" id="pwd" class="form-control">
					</div>
					<div class="col-md-3" id="pwdSpan"></div>
				</div>
				<div class="form-group" id="ageDiv">
					<label for="age" class="col-md-1 control-label">年龄</label>
					<div class="col-md-5">
						<input type="text" name="age" placeholder="输入年龄" id="age" class="form-control">
					</div>
					<div class="col-md-3" id="ageSpan"></div>
				</div>
				<div class="form-group" id="emailDiv">
					<label for="email" class="col-md-1 control-label">邮箱</label>
					<div class="col-md-5">
						<input type="text" name="email" placeholder="输入邮箱" id="email" class="form-control">
					</div>
					<div class="col-md-3" id="emailSpan"></div>
				</div>
				<div class="col-md-2 col-md-offset-1">
					<input type="submit" class="btn btn-info" value="注册">
					<input type="reset"   class="btn btn-danger" value="重置">
				</div>
			</fieldset>
		</form>
	</div>
</body>
</html>

$(document).ready(function(){
	$("#myform").validate({
		debug:true,//取消表单的自动提交
		submitHandler:function(form){
			//实现表单提交的函数
			form.submit();
		},
		errorPlacement:function(error,element){
			//显示错误提示信息
			//将错误提示放在之前预留的div中
			$("#"+$(element).attr("id")+"Span").append(error);

		},
		highlight:function(element){
			$(element).fadeOut(1,function(){
				$(element).fadeIn(1);
				//将原来的蓝色改变为红色
				$("#"+$(element).attr("id")+"Div").attr("class","form-group has-error")
			})
		},
		unhighlight:function(element){
			$(element).fadeOut(1,function(){
				$(element).fadeIn(1);
				//将原来的蓝色改变为红色
				$("#"+$(element).attr("id")+"Div").attr("class","form-group has-success")
			})
		},
		errorClass:"text-danger",
		rules:{
			name:{
				required:true,
			},
			pwd:{
				required:true,
			},
			age:{
				required:true,
				digits:true
			},
			email:{
				required:true,
				email:true
			}
		}
	})
})

在这里插入图片描述

Dragon.liu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
form表单验证组件
08-07
为表单的提交前做验证本站这里提供一个纯js原生组件validate没有任何的依赖，支持全部的浏览器没有兼容问题
vue组件表单数据回显验证及提交的实例代码
12-29
最近项目需要到vue开发单页面，所以就研究一下表单数据的回显，验证及提交如何用vue组件的方式实现。 代码如下： <!--header-bar> 住户名称: <input type=text value=username v-model=...
表单验证组件
chuangboha500422的博客
08-14 167
demo文档链接 调用： var$=require('zepto'); $(function() {//引用模块 varVA=require('../modules/yue_ui/valid/index'); //...
框架----Django之Form组件
dejiong3425的博客
07-03 142
Django的Form主要具有一下几大功能： 生成HTML标签 验证用户数据（显示错误信息） HTML Form提交保留上次提交数据 初始化页面显示内容 一、小试牛刀 1、创建Form类 1 from django.forms import Form 2 from django.forms import widgets 3 from django....
通用的表单验证组件
iteye_8019的博客
11-08 113
一个通用的表单验证组件，可以根据验证类型自行扩展，可以被动验证和主动验证。需要用到方法ParamUtil.setParam(已贴出) 组件代码： [code="java"] package pizazz.flex4.manager{ import flash.events.Event; import flash.events.MouseEvent; import...
validate.js 表单校验插件
草木红的博客
12-09 3787
菜鸟教程： https://www.runoob.com/jquery/jquery-plugin-validate.html (一) 使用步骤 导入jquery.js，validate基于jquery 导入validate.js 页面加载成功后，对表单进行校验，$(“选择器”).validate(); <form action="" id="login"> 必填： <input type="text" name="userName" id=""><br /
Vue element-ui父组件控制子组件的表单校验操作
10-15
1. `el-form`上必须绑定一个对象，这是表单数据的模型。 2. `el-form-item`的`prop`属性应与`v-model`中绑定的字段名一致。 当这两个条件都满足时，Element-UI的表单验证就能正常工作，能够根据设定的规则对用户...
vue动态绑定组件子父组件多表单验证功能的实现代码
08-27
Vue 动态绑定组件子父组件多表单验证功能的实现代码 Vue 动态绑定组件子父组件多表单验证功能的实现代码是指在 Vue 项目中，使用动态绑定组件来实现子父组件之间的交互和验证的功能。这种方法可以解决前端项目中...
ElementUI多个子组件表单的校验管理实现
10-16
在 PersonForm.vue 文件中，我们创建了一个 PersonForm 类来初始化表单数据，并定义了一个 static 方法 `getRule` 来生成校验规则。这些规则遵循 ElementUI 的验证规则格式，如使用 `validator` 函数和 `trigger` ...
JSP表单自动数据验证组件
joyzhang 态度决定一切
07-14 184
从jsp到servlet或者action过程中还有很多需要处理的事情：数据有效性验证包括jsp页面的 javascript验证和服务器端的验证、对文件上传的处理、文件上传大小的控制、防止二次提交、multipart form的非文件字段的处理。这些事情不属于jsp也不属于action，我们的开发人员会把这些事情直接在jsp里处理或者交给了action处理,当然如果采用了mvc框架来开发的话，有...
vue表单验证组件vverifyplugin
08-10
vue表单验证组件 v-verify-plugin
js几种常用表单验证控件
04-18
NULL 博文链接：https://vipshow.iteye.com/blog/1838930
UI组件的表单校验
果果的博客
09-21 369
在开发中，表单校验是必不可少elementUI和iviewUI的表单校验都是类似的 目前我们开发大部分都用UI组件，下面来说一下element UI的表单校验。   1最简单的一种校验  2、官网提供的动态校验（具体看http://element-cn.eleme.io/#/zh-CN/component/form#form-biao-dan） 之前楼主用过iview的表单动态r...
表单验证插件 bootstrapValidator
fongwer的博客
09-05 127
自己使用后，记录一下 引入：除了bootstrap.css与bootstrap.min.js外，还引入了2个 bootstrapValidator.css    bootstrapValidator.js &lt;form id="defaultForm" method="post" class="form-horizontal" action=""&gt; ...
form表单验证插件 jquery-validation 的基本使用
right_hou的博客
01-22 723
所需要的插件下载地址见文章末 步骤：   首先项目中引入需要的.js文件 jquery-3.3.1.min.js    jquery.validate.min.js &lt;!--根据自己项目的包结构考虑 --&gt; &lt;script type="text/javascript" src="js/jquery-3.3.1.min.js"&gt;&lt;/script...
Form组件数据库校验
suger_yeezy的博客
04-26 330
Form组件的功能有校验输入内容和生成HTML代码，校验的一些基础功能，诸如： 自定义一个继承form.Form的类； 实例化类，传入前端 获得返回数据进行判断obj.is_valid() 自定制输入的错误类型，返回给前端 这些基础校验只是在我们进行简单地input的时候进行使用的，然而真正的校验，应该是和数据库联系起来，如何才能校验用户输入的数据与数据库里的数据是否重复，诸如此类的检验呢？ ...
不是一般地好用的jquery表单验证插件-Validform
十年砍柴的博客
02-24 5807
之前博主推荐过jQuery Validate，因为之前也在用，但是配置稍微显得有些麻烦，直到最近的这个项目用到了validform，才让我大开眼界，整个界面突然感觉太友好了，先来几张效果图吧。 整个过程引用的css及js非常少。 css如下： 1 2 3 4 5 6 7 8 9 10
表单验证+获取元素的三种方式
全栈
04-18 306
目录 JavaScript单词 表单验证 获取元素的三种方式 JavaScript单词 onclick:点击事件 onmouseout:鼠标离开事件 onmouseover：鼠标移上去事件 onload：页面加载事件 onblur:失去焦点 表单验证 这个可以直接用，你们可以再加一点css样式就可以运用到项目当中，效果就是上面那张图 <!DOCTYPE html> <html> <head> <meta charset="utf-.
JavaScript表单验证表单验证
最新发布
zzb_lly的博客
04-20 430
表单验证是JavaScript的高级选项之一.我们可以通过JavaScript在网页中对即将送往服务器的HTML表单中的输入数据进行验证.如果所输入内容与所需不符,我们就在页面中进行提示.这样就使得我们不用频繁的与服务器进行交互,减少了频率,提高了效率.在验证用户名与密码时,我们通常验证用户名与密码不能为空,用户名和密码必须在指定长度范围内,用户名和密码由数字和字母组成(使用正则表达式)等等。验证邮箱时是否为邮箱格式，是否添加@与符合标准的后缀名等。· 验证用户名与密码为指定格式。· 验证单选框所选内容。
纯vue3表单数据校验
09-14
在Vue 3中，可以使用VeeValidate库进行表单数据校验。VeeValidate是一个非常强大的表单验证插件，可以用于Vue.js应用程序的表单验证。它提供了丰富的验证规则和自定义验证规则的能力。 首先，需要安装VeeValidate库。可以使用npm或yarn进行安装： ``` npm install vee-validate@next ``` 或者 ``` yarn add vee-validate@next ``` 安装完成后，在你的Vue组件中引入并使用VeeValidate。具体步骤如下： 1. 在你的Vue组件中，引入`defineRule`和`configure`函数： ```javascript import { defineRule, configure } from 'vee-validate'; ``` 2. 使用`defineRule`函数定义你需要的验证规则。例如，如果想要验证一个字段是否为必填字段，可以使用`required`规则： ```javascript defineRule('required', value => { if (!value || value.trim() === '') { return '该字段为必填字段'; } return true; }); ``` 3. 在Vue组件的`setup`函数中使用`configure`函数来配置VeeValidate的行为。可以指定要使用的验证规则、错误消息等： ```javascript configure({ validateOnInput: true, // 当输入时进行验证 validateOnChange: true, // 当值发生变化时进行验证 }); ``` 4. 在Vue模板中，使用`v-model`指令绑定表单字段，并使用`validation`属性获取验证结果。示例代码如下： ```html <template> <form @submit.prevent="submitForm"> <div> <label for="name">姓名</label> <input id="name" type="text" v-model="name" /> <span>{{ validation.name ? validation.name : '' }}</span> </div> <!-- 其他表单字段 --> <button type="submit">提交</button> </form> </template> ``` 5. 在Vue组件中，定义`submitForm`方法来处理表单提交事件： ```javascript import { useForm, useField } from 'vee-validate'; export default { setup() { const { handleSubmit } = useForm(); const { value: name, errorMessage: nameError } = useField('name'); const submitForm = handleSubmit(() => { // 表单提交逻辑 }); return { name, nameError, submitForm, }; }, }; ``` 上述步骤中，我们引入了VeeValidate库，并定义了一个`required`验证规则来验证字段是否为必填字段。然后，在Vue模板中使用`v-model`指令绑定字段，并使用`validation`属性获取验证结果。最后，在表单提交时调用`handleSubmit`方法来处理表单提交事件。 这样，你就可以在Vue 3中实现纯Vue表单数据校验了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值