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

最新推荐文章于 2024-08-02 10:16:42 发布

Tiramisu_C

最新推荐文章于 2024-08-02 10:16:42 发布

阅读量9.7k

点赞数 2

分类专栏： vue 前端开发项目问题解决方案文章标签：自定义校验规则过滤特殊符号 js校验特殊符号 vue element

本文链接：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元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Tiramisu_C

关注关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue+element实现表单提交（正则验证表单项+限制特殊字符）

Debug的博客

03-23

538

【代码】vue+element实现表单提交（正则验证表单项+限制特殊字符）

vue表单自定义校验规则介绍

10-18

今天小编就为大家分享一篇vue表单自定义校验规则介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

3 条评论您还未登录，请先登录后发表或查看评论

VUE+ElementUI 校验表单的输入框是否含有特殊字符

qq_34169240的博客

02-14

3249

data() { let validateInput = (rule, value, callback) => { if (!this.checkSpecialKey(value)) { callback(new Error("不能含有特殊字符！！")); } else { callback(); ...

Vue.js学习笔记（六）element表单校验规则

最新发布

summer_gf的博客

08-02

293

本文主要介绍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

853

vue输入框限制特殊符号输入

vue+element-ui之全局过滤器

ssssummer的博客

08-13

914

在一个项目中，如果想把所有的时间都转换成想要的格式，每个页面都写一次未免过于麻烦。所以可以创建一个全局过滤器，这样需要时就可以直接使用。 1.在vue项目的components文件夹下创建一个fifter文件夹，在文件夹下创建转换时间的js文件（例如transTime.js，起什么名字随意）。 export default time => { var times = new Date(time); var y = times.getFullYear(); //年 var m = ti

解决vue+ element ui 表单验证有值但验证失败问题

10-15

在使用Vue与Element UI开发表单时，经常会涉及到表单验证功能，以确保用户输入的数据符合预期的格式或条件。但在实际开发过程中，可能会遇到即使表单有值，表单验证依然失败的问题，这往往是由于某些细节处理不当...

vue+element项目中过滤输入框特殊字符小结.docx

11-22

在基于 Vue.js 和 Element UI 的前端项目开发过程中，经常需要对用户输入的数据进行合法性校验，尤其是对于文本输入框中的数据，常常需要过滤掉一些特殊字符以确保数据的安全性和正确性。本文档详细总结了在 Vue + ...

vue+elementUI实现自定义表单模板组件（二）

weixin_43930421的博客

05-31

1124

前言在上一节主要解决了表单模板的创建问题，在数据库中的存储格式为字符串。主要是通过前端处理，保存为 json 数组的字符串，形如 [ { label:"文本", required:true, type:"text", icon:"el-icon-s-tools", placeholder:"", _vModel:"field0" } ] 再通过 JSON.stringify() 转为 json 串后存入数据库。有了表单模板之后，如何在前端进行呈现并编辑，这一节就理清这一思路。表

js中用正则表达式过滤特殊字符 校验所有输入域是否含有特殊符号

wonderfulpersuit的博客

01-13

712

1. function containSpecial( s ){ var containSpecial = RegExp(/[(\ )(\~)(\!)(\@)(\#) (\$)(\%)(\^)(\&)(\*)($)($)(\-)(\_)(\+)(\=) (\[)(\])(\{)(\})(\|)(\\)(\;)(\:)(\')(\")(\,)(\....

vue2配合element UI中身份证号的校验和脱敏

钱多多的博客

02-10

1598

【代码】vue2配合element UI中身份证号的校验和脱敏。

添加表单验证特殊字符处理

qq_41609150的博客

12-19

493

添加表单验证特殊字符处理添加正规表达式 var flag = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]") 进行判断 flag.test(e) 返回true为存在返回false不存在 ...

vue中检测敏感词，锚点

weixin_30663391的博客

07-10

586

当发布文章的时候，标题有敏感词则检测有敏感词的接口成功的时候，写锚点 eg: _this .$alert("检测到标题有敏感词，请修改后再发布", "提示", { cancelButtonText: "取消", confirmButtonText: "确定", showCancelButton: false, customClass: "applySucce...

vue+element 验证输入框是否包含特殊字符(赠送ip+域名双验证判断)

xu_duo_i的博客

05-15

416

vue+element 验证输入框是否包含特殊字符(赠送ip+域名双验证判断) 使用new RegExp()构造函数,然后通过regExp.test(value)方法,检测value中的值是否包含构造函数中的某些值

vue实现对一段文字中违禁词的校验

QZ9420的博客

12-30

1283

<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

1531

el-form文本框输入特殊字符校验，除中文句号，逗号，双引号，小括号，冒号，英文句号，逗号，双引号，小括号，冒号外，其余特殊字符全部禁止输入。

element el-input特殊字符校验

weixin_45852743的博客

12-06

2052

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> ``` 以上代码实现了一个带有两个输入框的表单，每个输入框都有校验规则，包括必填、长度限制等，点击提交按钮后，会触发表单验证，如果校验通过，则弹出提交成功的提示，否则不会提交表单。