过滤页面上输入框的输入内容中的特殊字符

最新推荐文章于 2024-01-30 10:46:21 发布

追赶的蜗牛

最新推荐文章于 2024-01-30 10:46:21 发布

阅读量5.9k

点赞数

分类专栏： js 技术学习

本文链接：https://blog.csdn.net/yansong_8686/article/details/8623159

版权

技术学习同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

32 篇文章 0 订阅

订阅专栏

方法1：

<html>
<script language="javascript">
//特殊字符验证
function TextValidate()
{
var passPort = document.getElementById("passPort");
// alert(passPort.value.length+" "+passPort.value);

    //特殊字符正则表达式
    var txt=new RegExp("[ ,\\`,\\~,\\!,\\@,\#,\\$,\\%,\\^,\\+,\\*,\\&,\\\\,\\/,\\?,\\|,\\:,\\.,\\<,\\>,\\{,\\},\$,\$,\\',\\;,\\=,\"]");
    var flag = "0";
    for(var i = 0; i < passPort.value.length;i++){
    //alert(passPort.value.charAt(i));

//两种方法获取到每一个输入的字符

      //character = passPort.value.substr(i,1); 或者下面的方法
     character = passPort.value.charAt(i);//得到每一个输入的字符
      if (txt.test(character))

     {
         flag = "1";
         if (document.all)
         {
             window.event.returnValue = false;
         }
         else
         {
             arguments.callee.caller.arguments[0].preventDefault();
         }
     }
    }
    if(flag == "1"){
        alert("输入内容不能包含空格或任何这些特殊字符:\n , ` ~ ! @ # $ % ^ + & * \\ / ? | : . < > {} () [] \" ");
        passPort.select();//全选

        //passPort.value="";//或者清空
        passPort.focus();
    }
}
</script>
<body>
请输入您的登录帐号:<input type="text" id="passPort" size="17" style="width:180px;height:20px;" title="请输入您的登录帐号" οnblur="TextValidate();"/>
<input type="button" value="test"/>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------

本例是在用户全部输入之后，该输入框失去焦点是进行的校验，这种方法个人觉得有优点也有缺点。下面来看下面的方法：

方法2：

<html>
<script language="javascript">
//特殊字符验证
function TextValidate()
{
    var code;
    var character;
    var err_msg = "Text can not contain SPACES or any of these special characters other than underscore (_) and hyphen (-).";
    if (document.all) //判断是否是IE浏览器
    {
        code = window.event.keyCode;
    }
    else
    {
        code = arguments.callee.caller.arguments[0].which;
    }
    var character = String.fromCharCode(code);

    var txt=new RegExp("[ ,\\`,\\~,\\!,\\@,\#,\\$,\\%,\\^,\\+,\\*,\\&,\\\\,\\/,\\?,\\|,\\:,\\.,\\<,\\>,\\{,\\},\$,\$,\\',\\;,\\=,\"]");
    //特殊字符正则表达式
    if (txt.test(character))
    {
        alert("输入内容不能包含空格或任何这些特殊字符:\n , ` ~ ! @ # $ % ^ + & * \\ / ? | : . < > {} () [] \" ");
        if (document.all)
        {
            window.event.returnValue = false;
        }
        else
        {
            arguments.callee.caller.arguments[0].preventDefault();
        }
    }
}
</script>
<body>
请输入您的登录帐号:<input type="text" id="passPort" size="17" style="width:180px;height:20px;" title="请输入您的登录帐号"onkeypress="TextValidate();"/>
<input type="button" value="test"/>
</body>
</html>

这种方法一开始我觉得很好，很完美，使用onkeypress 事件每次按下按键就进行校验，是非法字符就直接给个提示不显示到输入框里面，很好！！

可是，问题出来了：我使用的是搜狗拼音输入法（想必用的人肯定不少吧），我还有个习惯，就是在中英文切换的时候喜欢按shift键，比如，在中文状态下我输入的是敲下回车，竟然也全部输入到输入框里了，躲过了非法字符校验。然后我又试着按下大写字母锁定键，

竟然校验又可以啦，不知道是不是搜狗的一个bug。当然，只要按着Ctrl+空格，别用搜狗输入法，那个校验还是起作用的，但是，像我这样比较习惯用的人，显然这样做无效。

鉴于此，我觉得还是第一种方法比较安全，虽然没第二种这么灵活。

最后，还有一种通用的方法，可以对整个项目里的所有收入框，进行校验,当然这种方法跟方法2效果一样，也有一定的bug。

方法3：

common.js

//处理特殊字符输入时的验证
function TextValidate(e)
{
    var ev = e || window.event;//获取event对象
    var obj = ev.target || ev.srcElement;//获取事件源
    var t = obj.type || obj.getAttribute('type');//获取事件源类型
    if(t=="text" || t=="textarea"){
      var code;
      var character;
      var err_msg = "Text can not contain SPACES or any of these special characters other than underscore (_) and hyphen (-).";
      if (document.all) //判断是否是IE浏览器
      {
          code = window.event.keyCode;
      }
      else
      {
          code = arguments.callee.caller.arguments[0].which;
      }
      var character = String.fromCharCode(code);
      var specialStr="<%=application.getAttribute("specialStr")%>";
      var txt=new RegExp(specialStr);
      //var txt=new RegExp("[ ,\\`,\\~,\\!,\\@,\#,\\$,\\%,\\^,\\+,\\*,\\&,\\\\,\\/,\\?,\\|,\\:,\\.,\\<,\\>,\\{,\\},\$,\$,\\',\\;,\\=,\"]");
      //特殊字符正则表达式
      if (txt.test(character))
      {
          alert("输入内容不能包含空格或任何这些特殊字符:\n , ` ~ ! @ # $ % ^ + & * \\ / ? | : . < > {} () [] \" ");
          if (document.all)
          {
              window.event.returnValue = false;
          }
          else
          {
              arguments.callee.caller.arguments[0].preventDefault();
          }
       }

    } //end
}
document.οnkeypress=TextValidate;

追赶的蜗牛

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
过滤页面上输入框的输入内容中的特殊字符

方法1： //特殊字符验证function TextValidate(){ var passPort = document.getElementById("passPort"); // alert(passPort.value.length+" "+passPort.value); //特殊字符正则表达式 var txt=new
复制链接

扫一扫