input中禁止输入特殊字符

最新推荐文章于 2024-05-10 10:32:46 发布
最新推荐文章于 2024-05-10 10:32:46 发布
阅读量7.7k 收藏 2
点赞数 3
分类专栏： JavaScript 文章标签： javascript jquery 源码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xy8199/article/details/78221791
版权

当我们在文本框中输入一些特殊符号时，有些特殊字符传入到后台是会产生错误的，所以我们应该从根本上解决问题。

例图：


当文本框中输入的文本含有特殊符号，就会弹出警示框

源码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script type="text/javascript">

        $(document).ready(function(){

            $("button").click(function(){
//                var regExp = /,/;
                var text = $("input").val();
                var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？%]");
                var result = text.match(pattern);
                if (!result)
                {
                    $("#content").append(text+"<br>");
                    $("input").val("");
                }else{

                    alert("含有特殊字符")
                }
            });
        });
    </script>
</head>
<body>
    <div style="width: 400px;width: 400px;margin: auto">
        <h3>公告墙</h3>
        <div style="width: 300px;height: 300px;border: 1px solid #b3d4fc" id="content"></div>
        <div style="margin-left: 50px;margin-top: 10px">输入框：<input type="text"></div>
        <div style="width:100px;;margin: auto;margin-top: 10px">
            <button>发布</button>
        </div>
    </div>
</body>
</html>

在这个例子的基础上 我们再进行一些操作

例图：


源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <title>Note Book</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        li {
            height: 24px;
            line-height: 24px;
            list-style: none;
        }

        main {
            position: relative;
            width: 512px;
            margin: 0 auto;
        }

        div {
            height: 48px;
            line-height: 48px;
        }

        section {
            width: 512px;
        }

        .ipt {
            width: 388px;
            margin: 0 auto;
        }

        .ipt input {
            width: 320px;
            height: 24px;
        }

        .btn {
            width: 80px;
            margin: 0 auto;
        }

        button {
            width: 80px;
            height: 24px;
        }

        .note_list {
            width: 512px;
            height: 384px;
            border: 2px solid #999;
            padding: 12px;
        }

        #toast {
            position: absolute;
            top: 256px;
            left: 128px;
            width: 160px;
            height: 148px;
            background-color: #fff;
            border: 1px solid #999;
        }

        #toast h3 {
            text-align: center;
        }

        #toast h5 {
            text-align: center;
        }

        #toast button {
            display: block;
            margin: 16px auto;
        }
    </style>
    <script type="text/javascript">
        var app = angular.module("myApp", []);

        app.constant("tips", {
            add_note_empty: ["请输入记录内容", "好吧"],
            add_note_exists: ["您记录的内容已经存在", "好吧"],
            search_empty: ["请输入搜索内容", "好吧"],
            search_success: ["搜到相关内容", "很好"],
            search_failure: ["未搜到相关内容", "失望"]
        });

        app.controller("myCtrl", function ($scope, tips) {
            var tipsShow = function (tips) {
                $scope.tips_message = tips[0];
                $scope.tips_btn = tips[1];
                $scope.tips_is_show = true;
                console.log($scope.tips_message);
                console.log($scope.tips_btn);
                console.log($scope.tips_is_show);
            };

            var tipsHide = function () {
                $scope.tips_is_show = false;
            };

            $scope.noteList = []; // 保存账本所有记录。

            $scope.addNote = function () {
                if ($scope.note == undefined) {
                    tipsShow(tips.add_note_empty);
                    return;
                }

                var note = $scope.note.trim();

                if (note.length == 0) {
                    tipsShow(tips.add_note_empty);
                    return;
                }

                if ($scope.noteList.indexOf($scope.note) >= 0) {
                    tipsShow(tips.add_note_exists);
                    $scope.note = "";
                    return;
                }

                $scope.noteList.push($scope.note);
                $scope.note = "";
            };

            $scope.search = function () {
                if ($scope.keyword == undefined || $scope.keyword.length == 0) {
                    tipsShow(tips.search_empty);
                    return;
                }
                if ($scope.noteList.indexOf($scope.keyword) >= 0) {
                    tipsShow(tips.search_success);
                } else {
                    tipsShow(tips.search_failure);
                }
                $scope.keyword = "";
            };

            $scope.tipsHide = function () {
                tipsHide();
            }
        });
    </script>
</head>
<body ng-app="myApp">
<main ng-controller="myCtrl">

    <div>记账本</div>

    <div class="note_list">
        <ul>
            <li ng-repeat="value in noteList">{{ value }}</li>
        </ul>
    </div>

    <section>
        <div class="ipt">输入框：<input type="text" size="48" ng-model="note"/></div>
    </section>

    <section>
        <div class="btn">
            <button ng-click="addNote()">记录</button>
        </div>
    </section>

    <section>
        <div class="ipt">搜索框：<input type="text" size="48" ng-model="keyword"/></div>
    </section>

    <section>
        <div class="btn">
            <button ng-click="search()">搜索</button>
        </div>
    </section>

    <div id="toast" ng-if="tips_is_show">
        <h3>提示</h3>
        <h5>{{ tips_message }}</h5>
        <button ng-click="tipsHide()">{{ tips_btn }}</button>
    </div>
</main>
</body>
</html>

xy8199
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
input 禁止输入特殊字符的四种实现方式
09-01
某些特殊字符传入后台会产生错误，可能导致sql注入，所以要想法从根本上拦截，接下来通过本文给大家介绍input 禁止输入特殊字符的方式，对input 禁止特殊字符知识感兴趣的朋友一起看下吧
js控制文本框禁止输入特殊字符详解
10-20
本文主要介绍了js控制文本框禁止输入特殊字符的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
如何禁止input框输入特殊字符
whisperSec的博客
12-18 6761
如何禁止input框输入特殊字符 前端开发中可能会碰到input框禁止输入特殊字符的情况，下面是解决办法，亲测有效 HTML部分 <div class="container"> <div class="test"> 用户名：<input type="text" name="name" id="name"/> </div> </d...
uni-app小知识点记录
最新发布
小白变怪兽
05-10 467
【代码】uni-app小知识点记录。
el-input 输入框禁止输入特殊字符
心痛丶如花败
06-29 1710
el-input 输入框禁止输入特殊字符
input禁止输入html转义字符,input 禁止输入特殊字符
weixin_35772916的博客
06-03 1050
方式一：拿到value值以后 在你传递之前处理function stripscript(value) {var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*()——|{}【】‘；：”“'。，、？]")var rs = "";for (var i = 0; i < value.leng...
Vue自定义正则指令全局限制Input框禁止输入特殊符号
liuwenzhuang的博客
02-26 1012
Vue自定义全局指令
vue input禁止输入特殊字符和空格正则
热门推荐
qq_42094027的博客
08-28 1万+
<input type=“text” class=“use_txt” v-model=“value34” placeholder=“点击输入协会名称” maxlength=“30” @keyup=“btKeyUp”/> methods：{ btKeyUp(e) { e.target.value = e.target.value.replace(/[\s+`!@#$%^&*()_...
element ui el-input禁止输入特殊字符
qq_42423991的博客
08-12 2187
Vue.prototype.validForbid = function (value) { value = value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, '').replace(/\s/g, ""); return value; } <el-input :value="name" @input="e => name =
input禁止输入html转义字符,input 输入值的监听 禁止输入特殊字符
weixin_33443972的博客
06-03 271
1.input 输入值的监听//用于监听input的值变化(input的值产生变化才会触发事件)(function($) {$.fn.watch= function(callback) {return this.each(function() {//缓存以前的值$.data(this, ‘originVal‘, $(this).val());//event$(this).on(‘keyup pa...
el-input禁止输入特殊字符以及对输入框做其他限制
whisperSec的博客
03-22 6446
对Element的el-input禁止输入特殊字符，这里是禁止输入，而不是输入特殊字符后校验。 这里试用过 @keyup 和 @input.native，感觉都有点问题。 <el-form :model="userForm" :rules="rules" ref="userRef" label-width="150px"> <el-form-item label="姓名" prop="name"> <el-input :value=
禁止输入特殊字符的js
10-09
这些js禁止输入特殊字符，使用起来还是非常方便。本人使用的心得分享大家一起看。如果大家觉得好用希望给个好评!
javascript实现图片左右移动动画
xy8199的博客
10-10 1万+
图片的左右移动，具备像荡秋千一样的动画效果，图片自己可重新定义，移动速度和距离也可在代码内设定，挺简单的Js生成动画的特效代码，仅供参考。 html> html> head lang="en"> meta charset="UTF-8"> title>自定义动画title> script type="text/javascript" src="jquery.1.12.
jquery实现注册表单验证
xy8199的博客
10-15 6177
要求：技术要求（html+css+jquery）图标题后有 1.  完成页面布局（页面布局合理、样式和图片一致、代码无误各） 2. 用jquery验证Email地址是否有效，要求Email地址中必须包含@符号，如果Email地址有效则显示”正确”的图标，并在图标后面提示用户可用，否则在Email注册框后面显示”错误”的图标，图标后面提示用户Email错误。 3. 在设置昵称框中要求用户输入的
jQuery 折叠菜单
xy8199的博客
10-11 5617
本文实例讲述了jQuery实现的简单折叠菜单(折叠面板)效果代码，主要介绍了jQuery实现的简单折叠菜单(折叠面板)效果代码,涉及jQuery中slideToggle与toggleClass方法的灵活使用技巧。 效果图： 源码： html> html> head lang="en"> meta charset="UTF-8"> title>jQuery
angular解析json数据
xy8199的博客
10-13 5282
这篇文章主要介绍了AngularJS获取json数据的方法,给大家分享一个简单的Demo。 源码： html> html> head> meta charset="UTF-8"> script type="text/javascript" src="angular-1.3.0.js">script> title>title> script type="tex
JS实现路由跳转
xy8199的博客
10-17 5162
之前我们用AngularJS实现路由跳转，这一篇我们将用JS实现路由跳转。 示例图： 源码： html> html lang="en"> head> meta charset="utf-8"> title>路由title> script type="text/javascript" src="http://code.jquery.com/jquery-la
H5 3D动画实现
xy8199的博客
10-08 3981
H5 3D动画 示例图 代码： html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> title
input禁止输入特殊字符
06-03
好的，您的问题是如何禁止输入特殊字符？您可以使用正则表达式来实现这个目的。具体来说，您可以在输入框的事件处理程序中使用一个正则表达式，来检查用户输入的字符是否为特殊字符。如果是特殊字符，您可以阻止该字符的输入。以下是一个示例代码，可以帮助您实现这个功能： ```javascript // 获取输入框元素 var input = document.getElementById("myInput"); // 添加事件监听器 input.addEventListener("keypress", function(event) { // 获取用户输入的字符 var char = String.fromCharCode(event.keyCode); // 定义一个正则表达式，用来匹配特殊字符 var regex = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/; // 如果用户输入的字符是特殊字符，阻止该字符的输入 if (regex.test(char)) { event.preventDefault(); } }); ``` 在上面的代码中，我们首先获取了输入框元素，然后添加了一个keypress事件监听器。在事件处理程序中，我们获取了用户输入的字符，并使用正则表达式来检查该字符是否为特殊字符。如果是特殊字符，我们就调用event.preventDefault()方法，来阻止该字符的输入。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值