表单验证失败边框变红色

最新推荐文章于 2024-05-03 11:08:18 发布
最新推荐文章于 2024-05-03 11:08:18 发布
阅读量2.5k 收藏 3
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/chengkun101/p/6113233.html
版权 
if($("#name").val() == ""){
　　myFocus($("#name"));

}else{
　　myBlur($("#name"));
}   
 /*验证输入框内容*/
    function myFocus(ele){
        ele.css("borderColor", '#db2029');
    }
    function myBlur(ele){
        ele.css("borderColor", '#e0e3e9');
    }

 

转载于:https://www.cnblogs.com/chengkun101/p/6113233.html

deze0926
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 表单验证失败的提示语问题
12-13
前言 前端的童鞋在写页面时, 都不可避免的总会踩到 表单验证 这个坑. 这时候, 我们就要跪了, 因为要写一堆 js 来检查. 但是自从 H5 出现后, 很多常见的 表达验证 , 它都已经帮我们实现了, 让我们减轻了很多负担, 就好像下面的: 邮箱地址验证:   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> </head> <body> <form action=""> 邮箱: <input
element 动态使用rules控制输入框的边框效果（红色）
轻风细雨_林木木
03-25 5627
前言： 今天做了一个变态的效果，其实很简单但是要达到动态修改就麻烦了 目标： 登录页面进入以后满足基本验证的前提下； 调用后台接口错误之后要求input框边变红 重新修改input内容时，所有验证消失 很简单吧……，但是实际实现就很操蛋了，提醒千万不要源JS修改，后果自己体验。 实现逻辑和步骤： // 1. 隐藏所有提示语 <el-form :show-message="false" /...
element-ui表单初始化校验报红
qq_45256497的博客
09-07 2447
在开发中，我们经常会遇到element-ui表单回显，初始化页面就报红的情况。在回显赋值的时候，加上以下代码就好啦。
Element学习之表单验证输入框提示不消失
qq_41720578的博客
05-26 4369
在学习Element UI时碰见了一个让人头疼的问题，碰巧发现输入框提示信息一直消失 几经辗转才找到错误，最后发现原来是 el-form-item中的prop 要与 el-input中v-model绑定的值一致。仔细一样，不一致他那上验证去，所以才会一直提示。 <div id="app"> <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card"> .
JQuery validate 验证失败回调自定义方法及错误显示
热门推荐
shuai_wy的专栏
05-09 1万+
本篇文章主要介绍 JQuery validate 验证失败后回调自定义方法，并显示自定义样式。假设我想在使用 validate 基础上实现一个这么样的功能： 校验失败后，修改特定的样式（操作DOM 或发起AJAX请求），应该如何实现？
input required字段；django input输入框不填写会自动变红如何修改
weixin_30377461的博客
05-05 497
前端页面中，input不输入任何内容时，点击submit时，未填写的input会标红框，有些人还会有“该字段必填的字样”！！ 什么鬼，你妹的，js也见不到，css3动画也见不到，怎么就有这种现象！！！！ 就是这种现象： ，由于当时我的页面是django渲染出来的，先是看F12有没有js，css动画。没有啊，什么鬼，那这是怎么来的， 去看django框架源码吧，你妹啊，没有任何头绪啊。 看dj...
vue自定义指令——实现input内容校验不通过边框变红
weixin_49477258的博客
07-28 3118
模板 <input type="text" class="demo" v-check ref="cjy"> JS // 组件内部指令 directives: { // 指令名称 check: { // 钩子。被绑定元素插入父节点时调用 inserted: (el) => { // 正则-验证数字 const r = /^[0-9]*$/ // input 添加失焦时间 e
Android表单校验器，让你的文本校验清晰化
c664543330的博客
03-10 1555
对于一般项目的业务层，注册页的输入框都密密麻麻，对输入文本的检验也千奇百怪，在应对多个文本框文本进行判断时，总是if、else不仅让我们的代码写的过长，而且有时又会造成逻辑混乱，这时我们移动端可以采用表单的模式把当前模块中的所有文本框放入一个表单校验器中，统一进行验证处理。LZ封装了一个表单验证器，支持Textview及其子类。 LZ定义了一个规则接口，所有子规则都实现了这个Rule，定
Android 字段标红
轻描时光
02-03 311
Andrid 根据字段进行标红
Jquery表单验证失败后不提交的解决方法
11-26
就是一个普通的表单验证提交： <input type="botton" </code>onclick="[removed]checkUserInfo()"</code><code>/> checkUserInfo()是一个jquery验证方法，错误返回false。 问题在于：返回false后表单提交。 发现...
layui原生表单验证的实例
10-16
今天小编就为大家分享一篇layui原生表单验证的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue+ element ui 表单验证有值但验证失败问题
10-15
主要介绍了vue+ element ui 表单验证有值但验证失败，本文通过实例代码给大家分享解决方案，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue+element中表单验证成功后输入框变成绿色
独角戏top的博客
08-12 920
在assets目录下新建一个css文件夹，里面新建一个css文件复制下面的代码。因为element在新版本中取消了这个功能所以使用全局css来满足需求。在main.js中导入。
uni-app_uView1.0 输入框里获得焦点时边框颜色改变，失去焦点后边框恢复原颜色
彬sir哥的博客
10-27 2559
2、怎么快速改代码，不用去百度找(会浪费时间)，就是直接在。我不说多了，自己检查就即可。
【Element】el-form表单初始化，校验就报红提示
weixin_43951592的博客
09-01 2609
element表单
HTML5表单验证
学如逆水行舟，不进则退
03-09 7816
第一步：策划表单功能 首先，我们得为我们的表单策划一下该有什么功能，用什么形式表现。在这个示例中，我们就制作一个比较简单的留言表单。需要的功能如下： 名称 电子邮件 网站地址 提交按钮 我们都希望用户能够填写正确的信息再提交，要实现这一点，我们可以使用HTML5客户端验证新技术。那怎么样使用这个功能呢？在这里简单的使用服务器验证，不做进一步的深入了解。 第
vue快速入门（五十）重定向
最新发布
不起眼小菜菜的博客
05-03 328
注释很详细，直接上代码……
el-input 表单验证失败修改边框颜色
05-22
当 el-input 表单验证失败时，可以通过修改其边框颜色来提示用户输入有误。具体实现方法如下： 1. 在 el-input 标签中添加 :class 属性，用于动态绑定样式类。 2. 在 data 中添加一个变量 error，用于保存是否出现错误的状态。默认为 false。 3. 在 el-input 标签中添加 v-model 绑定一个变量，用于保存用户输入的值。 4. 添加一个方法 validate，用于验证用户输入是否符合要求。在该方法中，根据需求判断用户输入的值是否合法，并将 error 变量设置为 true 或 false。 5. 在 :class 中绑定样式类时，根据 error 变量的值来动态设置样式类，如果 error 为 true，则添加一个名为 'is-error' 的样式类，该样式类用于设置输入框的边框颜色为红色，表示输入有误。 6. 在 el-input 标签中添加 @blur 事件，当输入框失去焦点时，调用 validate 方法进行验证。 7. 最后，在模板中添加 el-input 标签即可。 示例代码如下： ```html <template> <div> <el-input v-model="inputValue" :class="{'is-error': error}" @blur="validate" ></el-input> </div> </template> <script> export default { data() { return { inputValue: '', error: false } }, methods: { validate() { // 判断用户输入是否合法 if (this.inputValue === '') { this.error = true } else { this.error = false } } } } </script> <style> .is-error .el-input__inner { border-color: red; } </style> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值