使用js自制输入框验证

来源：互联网发布：阿里云服务器受到ddos 编辑：程序博客网时间：2024/06/10 18:57

为了实现一个管理系统，少不了用户的输入作为系统的内容。一旦涉及输入就需要对用户的输入内容进行判断，避免错误，无效，有害数据内容进入系统。

今天通过javascript对页面的输入框进行校验，主要思路是通过正则表达式对输入内容进行校验，并结合上一篇博客《自制右下角弹窗》http://blog.csdn.net/u010115177/article/details/44526279给用户友好提示。

为了降低前端代码的耦合性，我把校验相关的内容独立成一个js文件ipt_validate.js:

var v_type = {integer : /^\d+$/,float : /^\d+(\.\d+)?$/,Chinese : /^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9])*$ /,char_digit : /^[A-Za-z0-9]+$/,phone_void : /(^1\d{10}$)|(^$)/, //可为空password:/^[\w|\W]{3,18}$/};// http://colbybobo.iteye.com/blog/1769993$(document).ready(function() {$(".validate").on("blur", function() {var regex;if ($(this).hasClass("integer")) {regex = v_type.integer;} else if ($(this).hasClass("float")) {regex = v_type.float;} else if ($(this).hasClass("Chinese")) {regex = v_type.Chinese;} else if ($(this).hasClass("char_digit")) {regex = v_type.char_digit;} else if ($(this).hasClass("phone_void")) {regex = v_type.phone_void;}else if ($(this).hasClass("password")) {regex = v_type.password;}if(typeof(regex) != "undefined" ){var $node = $(this);var value = $node.val();if(regex.test(value)){//正确 $node.css("background-color","#FFF");}else{if($("#tipbox").length>0){showTips("警告","输入有误！",3000);}else{alert("输入有误！");}twinkle($node,3);//闪烁3次}}});});function twinkle ($ipt_node,times){error($ipt_node,3);}function normal($ipt_node,times){$ipt_node.css("background-color","#FFF");    if(times<0)    {        return;    }    times=times-1;    setTimeout(function(){    error($ipt_node,times);    },500);}function error($ipt_node,times){$ipt_node.css("background-color","#F6CECE");    times=times-1;    setTimeout(function(){    normal($ipt_node,times);    },500);}

页面输入框如果需要进行校验，只需要引入这一个js文件：

<script type="text/javascript" src="./js/jquery.js"></script><script type="text/javascript"  src=" ./js/ipt_validate.js" ></script><script type="text/javascript"  src=" ./js/tipmess.js" ></script>

并在对应的输入标签中添加class属性：

<input type="text" class="input validate char_digit" id="username" name="staff.Loginid" title="由字母、数字组成的登录名">

其中class 属性值validate 标志需要校验，而后面的校验内心说明内容对应的正则表达式，在js文件中v_type中定义。

到此已经完成！

以下是我参考的网站：

js正则对象

http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

输入框背景闪烁提示

http://www.oschina.net/code/snippet_124007_7301

jquery判断节点存在

http://www.cnblogs.com/xiangdingdingVictory/archive/2011/01/04/1925302.html

正则表达式相关

http://blog.csdn.net/zaifendou/article/details/5746988

http://www.jb51.net/article/4976.htm

http://www.jb51.net/article/43190.htm

http://blog.csdn.net/flm_0722/article/details/6292938

http://colbybobo.iteye.com/blog/1769993

http://www.cnblogs.com/jihua/archive/2012/09/28/yanzheng.html

http://www.cnblogs.com/zfc2201/archive/2012/12/18/2824107.html

http://www.jb51.net/article/20719.htm

0 0