vue+element中自定义表单校验特殊字符

最新推荐文章于 2024-08-02 10:16:42 发布
最新推荐文章于 2024-08-02 10:16:42 发布
阅读量9.7k 收藏 10
点赞数 2
分类专栏： vue 前端开发项目问题解决方案 文章标签： 自定义校验规则 过滤特殊符号 js校验特殊符号 vue element
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nongweiyilady/article/details/82813225
版权
本文介绍在Vue和Element-UI项目中如何实现自定义表单校验，防止用户输入特殊字符。通过定义校验规则方法，检查字符串是否包含特殊符号，并在vue文件中应用该方法，实现在用户输入或失去焦点时触发校验，若存在特殊字符则给出相应错误提示。
摘要由CSDN通过智能技术生成

本次项目基于vue和element-ui，需要在前端用户输入的时候去校验输入的内容中是否含有特殊符号，如果有，则提示用户不支持输入特殊符号。

校验规则方法

export function checkSpecificKey(str) {
   
  var specialKey = "[`~!#$^&*()=|{}':;',\\[\\].<>/?~！#￥……&*（）——|{}【】‘；：”“'。，、？]‘'"; 
  for (var i = 0; i < str.length; i++) {
最低0.47元/天 解锁文章
Tiramisu_C
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue+element实现表单提交（正则验证表单项+限制特殊字符）
Debug的博客
03-23 536
【代码】vue+element实现表单提交（正则验证表单项+限制特殊字符）
vue+elementUI实现自定义表单模板组件（二）
weixin_43930421的博客
05-31 1122
前言 在上一节主要解决了表单模板的创建问题，在数据库中的存储格式为字符串。 主要是通过前端处理，保存为 json 数组的字符串，形如 [ { label:"文本", required:true, type:"text", icon:"el-icon-s-tools", placeholder:"", _vModel:"field0" } ] 再通过 JSON.stringify() 转为 json 串后存入数据库。 有了表单模板之后，如何在前端进行呈现并编辑，这一节就理清这一思路。 表
vue表单自定义校验规则介绍
10-18
今天小编就为大家分享一篇vue表单自定义校验规则介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE+ElementUI 校验表单的输入框是否含有特殊字符
qq_34169240的博客
02-14 3247
data() { let validateInput = (rule, value, callback) => { if (!this.checkSpecialKey(value)) { callback(new Error("不能含有特殊字符！！")); } else { callback(); ...
Vue.js学习笔记（六）element表单校验规则
最新发布
summer_gf的博客
08-02 272
本文主要介绍element 表单组件校验如何使用，包括对象、对象数组、自定义校验规则等情况。
html前台检验特殊字符正则,正则校验密码 数字字母特殊字符
weixin_39911056的博客
05-31 428
public class RegexTest {public static final String PW_PATTERN = "^(?![A-Za-z0-9]+$)(?![a-z0-9\\W]+$)(?![A-Za-z\\W]+$)(?![A-Z0-9\\W]+$)[a-zA-Z0-9\\W]{8,}$";public static void main(String[] args) {Strin...
vue输入框限制特殊符号输入
weixin_60265082的博客
11-21 814
vue输入框限制特殊符号输入
vue+element-ui之全局过滤器
ssssummer的博客
08-13 908
在一个项目中，如果想把所有的时间都转换成想要的格式，每个页面都写一次未免过于麻烦。所以可以创建一个全局过滤器，这样需要时就可以直接使用。 1.在vue项目的components文件夹下创建一个fifter文件夹，在文件夹下创建转换时间的js文件（例如transTime.js，起什么名字随意）。 export default time => { var times = new Date(time); var y = times.getFullYear(); //年 var m = ti
vue+element 学习之路（五）自定义表单校验
weixin_39327044的博客
04-26 987
示例： 非空校验： 格式校验： 几个常用的校验规则 required：是否非空 max：最大字符数 min：最小字符数 首先给表单绑定校验规则，表单加上ref属性，最后方便遍历表单校验 定义规则： rules中定义的校验方法通过prop属性传递 当然了这只是第一步校验，当输入框变化时进行校验，为了保证数据正确性，我们通常在提交表单时需要再校验一次 看控制台 源码： <template...
vue+element项目中过滤输入框特殊字符小结.docx
11-22
在基于 Vue.js 和 Element UI 的前端项目开发过程中，经常需要对用户输入的数据进行合法性校验，尤其是对于文本输入框中的数据，常常需要过滤掉一些特殊字符以确保数据的安全性和正确性。本文档详细总结了在 Vue + ...
js中用正则表达式 过滤特殊字符 校验所有输入域是否含有特殊符号
wonderfulpersuit的博客
01-13 712
1. function containSpecial( s ){                 var containSpecial = RegExp(/[(\ )(\~)(\!)(\@)(\#) (\$)(\%)(\^)(\&amp;)(\*)(\()(\))(\-)(\_)(\+)(\=) (\[)(\])(\{)(\})(\|)(\\)(\;)(\:)(\')(\")(\,)(\....
vue2配合element UI中身份证号的校验和脱敏
钱多多的博客
02-10 1586
【代码】vue2配合element UI中身份证号的校验和脱敏。
添加表单验证特殊字符处理
qq_41609150的博客
12-19 490
添加表单验证特殊字符处理 添加正规表达式 var flag = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]") 进行判断 flag.test(e) 返回true为存在 返回false不存在 ...
vue中检测敏感词，锚点
weixin_30663391的博客
07-10 580
当发布文章的时候，标题有敏感词 则检测有敏感词的接口成功的时候，写锚点 eg: _this .$alert("检测到标题有敏感词，请修改后再发布", "提示", { cancelButtonText: "取消", confirmButtonText: "确定", showCancelButton: false, customClass: "applySucce...
vue+element 验证输入框是否包含特殊字符(赠送ip+域名双验证判断)
xu_duo_i的博客
05-15 398
vue+element 验证输入框是否包含特殊字符(赠送ip+域名双验证判断) 使用new RegExp()构造函数,然后通过regExp.test(value)方法,检测value中的值是否包含构造函数中的某些值
vue实现对一段文字中违禁词的校验
QZ9420的博客
12-30 1281
<template> <div> <ks-dialog ref="categoryDialog" title="不建议使用词排查入口" class="dialog-style" :visible.sync="dialogVisible" :modal-append-to-body="false" :close-o
el-form特殊字符校验
qq_43145310的博客
07-16 1515
el-form文本框输入特殊字符校验，除中文句号，逗号，双引号，小括号，冒号，英文句号，逗号，双引号，小括号，冒号外，其余特殊字符全部禁止输入。
element el-input特殊字符校验
weixin_45852743的博客
12-06 2046
html: <el-form-item label="名称：" prop="askName"> <el-input placeholder="请输入名称" v-model="ruleFormlist.askName" style="width: 340px" ></el-input> </el-form-item> methods: rules:
vue3+element-plus 表单校验
05-08
表单验证是前端开发中一项非常重要的工作。Vue3和Element-Plus提供了更加便捷和灵活的表单验证方式。下面是一个示例，使用Vue3和Element-Plus实现表单验证: 1. 安装Element-Plus ```shell npm i element-plus -S ``` 2. 在Vue3项目中引入Element-Plus并注册表单组件 ```javascript import { createApp } from 'vue'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; import App from './App.vue'; const app = createApp(App); app.use(ElementPlus); app.mount('#app'); ``` 3. 在Vue3组件中使用Element-Plus表单组件，并设置校验规则 ```html <template> <el-form :model="form" :rules="rules" ref="form" label-width="80px"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="form.password" show-password></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('form')">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { alert('提交成功'); } else { console.log('error submit!!'); return false; } }); } } }; </script> ``` 以上代码实现了一个带有两个输入框的表单，每个输入框都有校验规则，包括必填、长度限制等，点击提交按钮后，会触发表单验证，如果校验通过，则弹出提交成功的提示，否则不会提交表单。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值