jquery数据验证插件(自制,简单,练手)
2013-10-22 22:22
549 查看
一:最近项目中js数据验证比较多,为了统一风格,移植复用,于是顺手封装了Jquery的插件。
调用:
(function($) { var defaults = { bugColor: '#FFCCCC', //数据有误的时候文本框颜色 color: 'white', //数据正确时候文本框颜色 type: "alert", //数据错误时候提示方式 alert 弹出框方式 text 赋值span html msg: "Msg", //数据有误的时候提示内容 ResOjId: 'no'// 当test方式的时候 被赋值的标签 #id }; function UiProcess(options, rexString, object) { var options = $.extend(defaults, options); var values = object.val(); if (rexString.test(values)) { object.css("backgroundColor", options.color); return true; } else { object.css("backgroundColor", options.bugColor); if (options.type == "alert") { alert(options.msg); } if (options.type == "text") { $(options.ResOjId).html(options.msg); } return false; } } //验证ip是否符合格式 $.fn.RegIp = function(options) { var rexString = /^\d{1,3}\.{1}\d{1,3}\.{1}\d{1,3}/; return UiProcess(options, rexString, this) } //验证座机是否符合格式 $.fn.RegTelPhone = function(options) { var rexString = /^[0-9]+[-]?[0-9]+[-]?[0-9]$/; return UiProcess(options, rexString, this) } //验证手机是否符合格式 $.fn.RegMombilePhone = function(options) { var rexString = /(^189\d{8}$)|(^13\d{9}$)|(^15\d{9}$)/; return UiProcess(options, rexString, this) } //验证中文是否符合格式 $.fn.RegCHZN = function(options) { var rexString = /[\u4e00-\u9fa5]/; return UiProcess(options, rexString, this) } //验证decimal是否符合格式 $.fn.RegDecimal = function(options) { var rexString = /^[0-9]+[.]?[0-9]+$/; return UiProcess(options, rexString, this) } //验证decimal保留一位小数是否符合格式 $.fn.RegDecimalSign = function(options) { var rexString = /^[+-]?[0-9]+[.]?[0-9]+$/; return UiProcess(options, rexString, this) } //验证整数保留一位小数是否符合格式 $.fn.RegNumber = function(options) { var rexString = /^[0-9]+$/; return UiProcess(options, rexString, this) } //验证各位整数保留一位小数是否符合格式 $.fn.RegNumberSign = function(options) { var rexString = /^[+-]?[0-9]+$/; return UiProcess(options, rexString, this) } //验证非空字符 $.fn.IsEmpty = function(options) { var rexString = /(^.+$)|([\u4e00-\u9fa5])/; return UiProcess(options, rexString, this) } })(jQuery);
调用:
<script type="text/javascript"> function submitOk() { var interfaceNameInput = $("#<%=interfaceName.ClientID %>"); var userNameInput = $("#<%=userName.ClientID %>"); var passWordInput = $("#<%=passWord.ClientID %>"); var interfaceUrlInput = $("#<%=interfaceUrl.ClientID %>"); ; if (!interfaceNameInput.IsEmpty({ "msg": "接口名称格式不正确!" })) { return false } if (!userNameInput.IsEmpty({ "msg": "格式不正确!" })) { return false } if (!passWordInput.IsEmpty({ "msg": "格式不正确!" })) { return false } if (!interfaceUrlInput.IsEmpty({ "msg": "格式不正确!" })) { return false } } </script>
相关文章推荐
- jquery数据验证插件(自制,简单,练手)实例代码
- jquery数据验证插件(自制,简单,练手)实例代码
- 基于jquery,bootstrap数据验证插件bootstrapValidator 教程
- 基于jquery的一个简单的脚本验证插件
- 基于jquery,bootstrap数据验证插件bootstrapValidator 教程
- jQuery表单验证插件 - 使用方式非常简单,明了
- JQuery插件第十四个:简单验证表单
- 基于jquery,bootstrap数据验证插件bootstrapValidator 教程
- JQuery表单验证插件EasyValidator,超级简单易用!
- jQuery form插件的使用--用 formData 参数校验表单,验证后提交(简单验证).
- 基于jquery,bootstrap数据验证插件bootstrapValidator 教程
- jquery插件整理篇(九)数据验证类
- (转载)ASP.NET MVC结合jQuery插件进行数据验证
- ASP.NET jQuery 随笔 使用allValidator插件简单实现客户端验证功能
- jquery table表格添加删除数据(含批量删除,全选全不选和简单的表单验证)
- 简单的表单验证插件(Jquery)
- 基于jquery,bootstrap数据验证插件bootstrapValidator 教程
- jquery 最简单易用的表单验证插件
- jquery插件bootstrapValidator数据验证详解
- ASP.NET jQuery 食谱12 (通过使用jQuery validation插件简单实现用户注册页面验证功能)