前端相关校验

简介:

1,文本框失去焦点时若有值则trim

Js代码   收藏代码
  1. $('#identityTF').blur(function (e) {  
  2.             console.log('blur');  
  3.             //去掉首尾的空格  
  4.             var eventTarget = e.srcElement || e.target || e.toElement;  
  5.             if (eventTarget) {  
  6.                 var identityTmp = eventTarget.value;  
  7.                 identityTmp = util.trim(identityTmp);  
  8.                 if (identityTmp) {  
  9.                     eventTarget.value = identityTmp;  
  10.                 }  
  11.             }  
  12. })  

 

 

2,文本框聚焦或有键按下时清除错误样式

Js代码   收藏代码
  1. /*** 
  2.          * 清除错误样式 
  3.          * @param event 
  4.          */  
  5.         var cleanErrorStyle = function (event) {  
  6.             var errorClass = 'has-error-inp';  
  7.             var eventTarget = event.srcElement || event.target || event.toElement;  
  8.             $(eventTarget).removeClass(errorClass);  
  9.         };  
  10.         $('input[type=text]').keydown(cleanErrorStyle).focus(cleanErrorStyle);  

 

 

 

 

3,如何在事件处理方法中获取事件源(控件)

方式一:

var eventTarget = e.srcElement || e.target || e.toElement;

方式二:

var val=$(this).val();

 

相关文章
|
JavaScript 前端开发
前端基础 - JQuery自定义校验器
前端基础 - JQuery自定义校验器
86 0
|
8月前
|
JSON 前端开发 JavaScript
前端上传文件前校验文件数据
该文介绍了如何在Vue项目中实现批量导入Excel数据的校验。使用Element UI的`el-upload`组件上传文件,通过FileReader读取内容,结合XLSX库解析Excel为JSON。解析过程包括将二进制数据转换为workbook对象,提取worksheet并转化为JSON。之后,遍历JSON数据进行字段校验,若发现空值则记录错误。提供的Demo展示了选择Excel文件后控制台显示校验结果。技术栈包括vue 2.6.14、element ui 2.15.14和xlsx 0.17.0。建议将此类功能封装为通用组件以复用。
168 2
前端上传文件前校验文件数据
|
6月前
|
前端开发 JavaScript 数据安全/隐私保护
前端JS正则校验密码之3种实现方式
这篇文章展示了三种使用JavaScript正则表达式来校验密码的方法,密码需要满足包含大写字母、小写字母、数字及特殊字符,并在8到16位之间,同时提供了示例代码和实现效果。
209 1
前端JS正则校验密码之3种实现方式
|
7月前
|
前端开发 JavaScript 开发工具
前端优化之路:git commit 校验拦截
前面在git分支规范那篇文章里,介绍了commit提交规范,但是想要做到高效落地执行,就需要做些别的功课。
|
9月前
|
移动开发 前端开发 JavaScript
前端vue3——实现二次元人物拼图校验
前端vue3——实现二次元人物拼图校验
69 1
|
前端开发 Java 数据库
Spring Entity数据校验,分组校验,返回校验结果给前端
Spring Entity数据校验,分组校验,返回校验结果给前端
129 0
|
9月前
|
前端开发 数据安全/隐私保护
【sgPasswordInput】自定义组件:带前端校验密码强度的密码输入框,能够提供密码强度颜色提示和文字提示
【sgPasswordInput】自定义组件:带前端校验密码强度的密码输入框,能够提供密码强度颜色提示和文字提示
|
前端开发 JavaScript
JS前端实现身份证号码合法性校验(校验码校验)
JS前端实现身份证号码合法性校验(校验码校验)
769 0
|
JavaScript 前端开发
前端基础 - JQuery 简单的表单校验器
前端基础 - JQuery 简单的表单校验器
67 0
|
移动开发 前端开发 JavaScript
Vue 利用Canvas标签实现动态验证码校验(前端必备附源码)
Vue 利用Canvas标签实现动态验证码校验(前端必备附源码)
602 0

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    详解智能编码在前端研发的创新应用
  • 4
    智能编码在前端研发的创新应用
  • 5
    VSCode AI提效工具,通义灵码前端开发体验
  • 6
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 8
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
  • 9
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
  • 10
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
  • 1
    前端起dev从110秒减少到7秒, 开发体验大幅提升
    16
  • 2
    无前端经验如何快速搭建游戏站:使用 windsurf 从零到上线的详细指南
    32
  • 3
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    38
  • 4
    VSCode AI提效工具,通义灵码前端开发体验
    94
  • 5
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    12
  • 6
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    46
  • 7
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    84
  • 8
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    35
  • 9
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    159
  • 10
    详解智能编码在前端研发的创新应用
    122