在表单必填项之前加上提示

最新推荐文章于 2022-12-26 11:34:12 发布
最新推荐文章于 2022-12-26 11:34:12 发布
阅读量1.1k 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44952766/article/details/89452020
版权
               

表单必填项之前加入红色的*符号

<!DOCTYPE HTML><html><head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <link rel="stylesheet" href="bootstrap.min.css">        <title>Personal Portfolio</title>    <style>                    </style></head><body>    <div class="container">    <form role="form">        <div class="form-group">            <label for="name">姓名</label>            <input id="name" type="text" class="form-control" placeholder="请输入用户名" required>        </div>        <div class="form-group">            <label for="pwd">密码</label>            <input id="pwd" type="password" class="form-control" required>        </div>        <button type="submit">提交</button>    </form>    </div>    <!--  加载第三方js库  -->
      <script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>        <!--  自定义javascript  -->    <script>        $('input[required]').before('<span style="color:red">*</span>');    </script></body></html> 
 
 
 
  
 
 
 
 
 

            


                

                
                
        

        

    

  


    

      

        

            

              
                
                  丰都县下辖
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
vue设置必填项和判断必填项是否填入的弹窗提示

				
			

			

				

					路飞船长的博客
				

				

					07-01
					
					1万+
					
				

			

		

		

			
				
有的功能需要设置必填项,当然也需要判断是不是添上了,还需要加上提示框1.如何设置必填项2.如何设置弹窗提示3.如何将二者结合起来实现点击时既可以判断必填项也可以弹出提示框 





2.设置提示弹框


 3.将二者结合起来一定要注意判断的位置还有你交互代码的位置以及else的位置,三个位置错的话效果会有偏差...

			
		

	



                

              
                



	

		

			

				
					
织梦dedecms自定义表单_“必填项”设置方法

				
			

			

				

					qq_30374065的博客
				

				

					09-08
					
					512
					
				

			

		

		

			
				
织梦dedecms是织梦一款开源建站程序，因为他的灵活和易用性受到很多新手站长和企业的欢迎，大多数企业站都是采用dedecms搭建，今天我们说一下织梦dede中的自定义表单功能，织梦的自定义表单功能可以让你轻松的创建自己的表单功能，收集用户的留言、订单等信息。

但是dedecms的自定义表单有一个缺点，没有验证功能，允许提交空表单，这样致使后台会显示很多空数据，不能收集到完整的用户信息。今天我们就要给织梦dedecms的自定义表单添加一个必填内容验证功能：

添加必填验证功能



先说下，已经试过确定有

			
		

	



                


  
              

                


	

		

			

				
					
简单js实现表单输入提示必填功能

				
			

			

				

					lena blog
				

				

					08-13
					
					2570
					
				

			

		

		

			
				
思路
为输入框绑定事件，在输入框获得焦点和离开焦点的时候触发校验事件。
在页面定义<span>标签，当校验发现没有输入内容时，则重写该标签的内容，实现动态显示的效果。
代码


效果


...

			
		

	





	

		

			

				
					
必填项提示

				
			

			

				

					兜里的米
				

				

					06-05
					
					656
					
				

			

		

		

			
				

check:function(){
			var valid = true,errors=$([]),i=0,
				interval = setInterval(function(){
					if(i++&gt;=4)clearInterval(interval);
					errors.toggleClass("inputerror");
				},200);
			$...

			
		

	



		

			
		



	

		

			

				
					
html表单必填项提示,使用$f.validate方法验证表单，页面必填项提示不展示

				
			

			

				

					weixin_39572152的博客
				

				

					06-23
					
					564
					
				

			

		

		

			
				
[{type: 'input',field: 'goods_name',title: '流程',validate: [{ type: 'string', required: true, message: '请输入名称' }],col: {span: 20,push: 1,}},{type: 'input',field: 'goods_name1',title: '名称',validate: [{ ...

			
		

	





	

		

			

				
					
element 结合vue 在表单验证时有值却提示错误的解决办法

				
			

			

				

					01-21
				

			

		

		

			
				
绑定的值与规则指定的值一定要相同——- 第一步： ...加上rules ref 第二部：  活动名称 prop=name> <el v-model=ruleForm.name></el>  加上prop 第三部：  rules: { name: [ { required: true, messag

			
		

	





	

		

			

				
					
bootstrap from必填_bootstrap 表单验证使用方法

				
			

			

				

					weixin_36284062的博客
				

				

					01-26
					
					2574
					
				

			

		

		

			
				
前言：做Web开发的我们，表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。博主搜索bootstrap表单验证，搜到的结果大部分都是文中的主题：bootstrapvalidator。今天就来看看它如何使用吧。一、源码及API地址介绍它之前，还是给出它的源码以及API的地址吧。二、代码以及效果展示1、初级用法来看bootstrapvalidator的描述：A jQuery form val...

			
		

	





	

		

			

				
					
vuelidate 表单验证：必填字段 / 数字，阻止提交 ；自定义验证规则

				
			

			

				

					Bule_daze的博客
				

				

					08-28
					
					4375
					
				

			

		

		

			
				
第一步：安装，导入main.js中
可以通过 npm 安装
npm install vuelidate --save


如果报错，试试加上 sudo

然后导入到 main.js 中
import Vuelidate from 'vuelidate'

Vue.use(Vuelidate)


第二步：在组件中使用
Vuetify：Forms
数据需要用 v-model 绑定， this.$v....

			
		

	





	

		

			

				
					
elementUI el-select多选设置必填和非必填反显时表单验证不通过

				
			

			

				

					vicky_minmin的博客
				

				

					01-13
					
					6851
					
				

			

		

		

			
				
最近碰到了一个需求，让一个字段动态设置必填和非必填
借鉴了https://blog.csdn.net/weixin_37865166/article/details/92431597这篇文件，默认在初始页面完成后
computed: {
    isHaveTo: function() {
      return this.isOfficeHaveTo
    }
  },

此处需要注意的是isHaveTo的初始化。 而isOfficeHaveTo则是根据数据和字段，动态更改的的属性。
isHaveTo

			
		

	





	

		

			

				
					
表单输入框提示必填

				
			

			

				

					weixin_43916418的博客
				

				

					07-18
					
					2169
					
				

			

		

		

			
				
在input标签里面增加required="true"属性即可。



			
		

	





	

		

			

				
					
python覆盖打印_Python 实现操作文档的读取，续写，覆盖重写自动备份

				
			

			

				

					weixin_39526238的博客
				

				

					12-17
					
					310
					
				

			

		

		

			
				
#coding:utf-8importtime#备份文件的时间格式化和操作暂停使用importshutil#作为文件备份使用#需求说明"""#需求：#1、可输入文档路径名称；#2、文本自动换行输入；#3、文本自动保存；#4、可读取文本#5、可覆盖重写；#6、若覆盖重写，则备份之前的文件。"""#定义读取文档函数...

			
		

	





	

		

			

				
					
vue 提示 先填写a才能填写b

				
			

			

				

					weixin_49393290的博客
				

				

					11-08
					
					832
					
				

			

		

		

			
				
效果图



代码如下：



    /**
     * 弹出填写表单窗体
     * tableType：1：农户基本情况表  ；  2：农药购买及使用情况表
     */
    writeHandle (row, rowIndex) {
      let id = row.id;
      let tableType = row.tableType;
      let pid = row.pid;
      // this.writeVisible = true
      if (.

			
		

	





	

		

			

				
					
使用JavaScript进行表单必填项目验证和改进

				
			

			

				

					技术是我的毕生追求
				

				

					03-20
					
					9972
					
				

			

		

		

			
				
在网页提交表单的呃时候，往往需要进行表单的必填项进行验证，下面我们以两个例子来写一下对表单的必填项进行
认证的两个例子，第二个例子是对第一个例子进行的改进。
首先是最基本的最简单的表单必填项的实例代码


  
    确认表单必填项完整性
	
    
    
    
    
    
    	
    	function $(str){
    		return (documen

			
		

	





	

		

			

				
					
输入框必填提示定位技巧

				
			

			

				

					张楠的博客
				

				

					12-18
					
					3142
					
				

			

		

		

			
				
现象

    如图所示：



    做web自动化的时候经常会遇到对必填项的校验，而其中一种必填项是鼠标高亮或者取消高亮的时候会在旁边出现tips框，框内书写一些提示性的文字，定位的时候在开发工具中该节点很难查看，鼠标稍微有所动作这个节点就消失了，眼神好的最多看到最上层的节点，无法深入定位，下来就介绍一种定位这种节点的方法。

工具

    介绍的方法是以robotframework为例，...

			
		

	





	

		

			

				
					
vue elementui form表单自定义必填*

				
			

			

				

					qq_21747731的专栏
				

				

					04-17
					
					1896
					
				

			

		

		

			
				
<span slot="label"><span style="color: #F56C6C;margin-right: 3px;">*</span>使用版谷</span>




			
		

	





	

		

			

				
					
el-input设置必填提示（单个&多个）

				
			

			

				

					song_song0927的博客
				

				

					12-26
					
					1万+
					
				

			

		

		

			
				
el-input设置必填

			
		

	





	

		

			

				
					
layui必填提示框修改，layui提交form表单必填提示框修改，select提示弹出位置不对处理，layui自定义提示文字，layui自定义条件提示

				
			

			

				

					weixin_43992507的博客
				

				

					10-09
					
					8825
					
				

			

		

		

			
				
效果
修改前

修改后

实现方式
我的layui版本是2.6.8
js文件只有layui.js（之前的版本可修改form.js文件源码）
所以打开layui.js修改源码，修改如下
// 将
i.msg(f,{icon:5,shift:6})
// 替换成
i.tips(f, r)

如图1下所示（Hbuilder颜色未改，则是黄背景）

或如图2所示

我喜欢把提示框颜色改了，以下就是我修改的样式（打开layui.css换行放到后面即可）
/* layer提示*/
.layui-layer-tips .

			
		

	





	

		

			

				
					
给element表单添加必填*星号的方法

					
热门推荐

				
			

			

				

					肖肖肖丽珠的博客
				

				

					07-23
					
					3万+
					
				

			

		

		

			
				
1，利用rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。


<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
 <el-form-item label="活动名称" prop="name">
 <el-input v-model="ruleForm.name"&g....

			
		

	





	

		

			

				
					
elementUI from表单必填项日期时间范围已有值但是提示信息还在

					
最新发布

				
			

			

				

					06-08
				

			

		

		

			
				
如果 elementUI form 表单必填项日期时间范围已有值但是提示信息还在，很可能是因为验证规则中设置了手动触发验证，即 `trigger: 'manual'`，导致表单验证未能及时触发。解决方法是，将验证规则中的 `trigger` 属性...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值