一些碰到的正则验证,记录下来
2017-12-18 14:55
316 查看
在项目中碰到的一写正则验证,整理下来封装成一个JS插件
在HTML中的调用规则是
<script src="sys_validator.js"></script> // 引用JS
下面是JS中的内容,可以根据自己的需求进行编辑修改
![](http://static.blog.csdn.net/xheditor/xheditor_emot/default/smile.gif)
/**
* 匿名函数调用
* function(root, fn, plug){}
* 创建一个闭包对象
*/
(function(root, fn, plug){
return fn(root.jQuery, plug);
})(window, function($, plug){
// 默认参数
var __DEFS__ = {
trigger: "blur"
};
var __RULES__ = {
required: function(){
return this.val().trim() !== "";
},// 非空
regex: function(){
return new RegExp(this.data("rv-regex")).test(this.val());
},// 自定义正则
email: function(){
return /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(this.val());
},// email
mobile: function(){
return /^1[3|4|5|7|8][0-9]{9}$/.test(this.val());
},// 手机
telephone: function(){
return /^(\d{3}-)?\d{8}(-\d{3,4})?$|^(\d{4}-)?\d{7}(-\d{3,4})?$/.test(this.val());
},// 固定电话
integer: function(){
return /^[0-9]*[1-9][0-9]*$/.test(this.val());
},// 数字
postcode: function(){
return /^[0-9][0-9]{5}$/.test(this.val());
},// 邮政
twodecimal:function(){
return /^[-+]?\d*[.]?\d{0,2}$/.test(this.val());
},//保留2位小数
uri: function(){
return /((http|https|ftp):\/\/([\w\-]+\.)+[\w\-]+(\/[\w\u4e00-\u9fa5\-\.\/?\@\%\!\&=\+\~\:\#\;\,]*)?)/ig.test(this.val());
},// uri
isnum:function(){
return /^[0-9.{1}]+$/.test(this.val());
},
greatertan: function(){
return Number(this.val())>Number(this.data("rv-greatertan"));
},// 最大值
lessthan: function(){
return Number(this.val())<=Number(this.data("rv-lessthan"));
}// 最小值
};
var __RLUEMSG__ = {
required:'不能为空!',
email:'请输入正确邮箱格式',
mobile:'请输入正确手机号码',
telephone:'请输入正确固定电话',
integer:'请输入整数',
postcode:'请输入正确邮编',
twodecimal:'需要有两位小数',
greatertan:'输入的数字小了!',
lessthan:'输入的数字大了!',
isnum:'请输入数字'
};
// 创建rxValidator的插件
$.fn[plug] = function(opts){
var _this = this;
// console.log(this) // r.fn.init {trigger: "blur"}
$.extend(this, __DEFS__, opts); // 将_DEFS_, opts 都赋值给this
var $fileds = this.find("input").not("[type=button],[type=reset],[type=submit],[type=checkbox],[type=radio]");
// 给其添加事件
$fileds.on(this.trigger, function(){
var $filed = $(this); // 被验证的目标对象
var result = true; // 验证结果默认通过
$filed.next().remove(); // 验证之前,把之前的验证信息移除掉
$.each(__RULES__, function(rule, valider){
if($filed.data("rv-"+rule)){
// 我需要验证的rule规则
result = valider.call($filed); // 将验证的东西丢进去
if(!result){
var str = $filed.data("rv-"+rule+"-msg") != undefined ? $filed.data("rv-"+rule+"-msg") : __RLUEMSG__[rule];
$filed.after("<p style='position: relative;width: 100%; height:0px; margin:0;text-align: right;color: #c33;z-index: 99;top: -27px;right: 8px;'>"+str+"</p>");
_this.find('p').click(function(){
$(this).remove();
$filed.focus();
})
}
return result;
}
});
});
}
}, 'rxValidator')
在HTML中的调用规则是
<script src="sys_validator.js"></script> // 引用JS
<form id="vali"> <div> <input type="text" data-rv-email="true" placeholder="验证"/><br/> </div> <div> <input type="text" data-rv-telephone="true" placeholder="验证"/><br/> </div> </form>
<script> $('#vali').rxValidator({tigger:'blur'}) // 调用方法 </script>
下面是JS中的内容,可以根据自己的需求进行编辑修改
![](http://static.blog.csdn.net/xheditor/xheditor_emot/default/smile.gif)
/**
* 匿名函数调用
* function(root, fn, plug){}
* 创建一个闭包对象
*/
(function(root, fn, plug){
return fn(root.jQuery, plug);
})(window, function($, plug){
// 默认参数
var __DEFS__ = {
trigger: "blur"
};
var __RULES__ = {
required: function(){
return this.val().trim() !== "";
},// 非空
regex: function(){
return new RegExp(this.data("rv-regex")).test(this.val());
},// 自定义正则
email: function(){
return /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(this.val());
mobile: function(){
return /^1[3|4|5|7|8][0-9]{9}$/.test(this.val());
},// 手机
telephone: function(){
return /^(\d{3}-)?\d{8}(-\d{3,4})?$|^(\d{4}-)?\d{7}(-\d{3,4})?$/.test(this.val());
},// 固定电话
integer: function(){
return /^[0-9]*[1-9][0-9]*$/.test(this.val());
},// 数字
postcode: function(){
return /^[0-9][0-9]{5}$/.test(this.val());
},// 邮政
twodecimal:function(){
return /^[-+]?\d*[.]?\d{0,2}$/.test(this.val());
},//保留2位小数
uri: function(){
return /((http|https|ftp):\/\/([\w\-]+\.)+[\w\-]+(\/[\w\u4e00-\u9fa5\-\.\/?\@\%\!\&=\+\~\:\#\;\,]*)?)/ig.test(this.val());
},// uri
isnum:function(){
return /^[0-9.{1}]+$/.test(this.val());
},
greatertan: function(){
return Number(this.val())>Number(this.data("rv-greatertan"));
},// 最大值
lessthan: function(){
return Number(this.val())<=Number(this.data("rv-lessthan"));
}// 最小值
};
var __RLUEMSG__ = {
required:'不能为空!',
email:'请输入正确邮箱格式',
mobile:'请输入正确手机号码',
telephone:'请输入正确固定电话',
integer:'请输入整数',
postcode:'请输入正确邮编',
twodecimal:'需要有两位小数',
greatertan:'输入的数字小了!',
lessthan:'输入的数字大了!',
isnum:'请输入数字'
};
// 创建rxValidator的插件
$.fn[plug] = function(opts){
var _this = this;
// console.log(this) // r.fn.init {trigger: "blur"}
$.extend(this, __DEFS__, opts); // 将_DEFS_, opts 都赋值给this
var $fileds = this.find("input").not("[type=button],[type=reset],[type=submit],[type=checkbox],[type=radio]");
// 给其添加事件
$fileds.on(this.trigger, function(){
var $filed = $(this); // 被验证的目标对象
var result = true; // 验证结果默认通过
$filed.next().remove(); // 验证之前,把之前的验证信息移除掉
$.each(__RULES__, function(rule, valider){
if($filed.data("rv-"+rule)){
// 我需要验证的rule规则
result = valider.call($filed); // 将验证的东西丢进去
if(!result){
var str = $filed.data("rv-"+rule+"-msg") != undefined ? $filed.data("rv-"+rule+"-msg") : __RLUEMSG__[rule];
$filed.after("<p style='position: relative;width: 100%; height:0px; margin:0;text-align: right;color: #c33;z-index: 99;top: -27px;right: 8px;'>"+str+"</p>");
_this.find('p').click(function(){
$(this).remove();
$filed.focus();
})
}
return result;
}
});
});
}
}, 'rxValidator')
相关文章推荐
- 记录一些经常使用的正则表达式
- 让人郁闷了好久的问题,终于解决了,之前网上也看到一些解决方法,但大多没有解决问题,所以记录下来,以供参考之用(ADO Could Not Find The Specified Provider)
- 收集起来的一些常用的正则验证
- 最近在学习云服务器,一些学习笔记记录下来,留着以后查看
- JQuery入门常用的一些方法、表单操作、正则验证
- 一些常用的正则验证
- 表单验证的一些正则表达式
- 一些有用的js正则验证(是否为空,是否为正整数,email,手机,电话,身份证)
- 驱动开发中碰到的一些问题笔记记录一下
- Eclipse IDE 使用技巧 (Eclipse工作空间小技巧)(自己的一些学习笔记和心得,记录下来,备忘录和复习使用)
- 记录一些碰到的数学结论(大概会持续更新)
- 一直想有个博客,有一些新学会的技术、想法等之类的就记录下来,今天就当开博第一天吧,坚持
- 一些正则验证-JS
- 常用的一些数字的正则表达式验证方法
- C#代码实现邮箱验证C#中及一些常用的正则表达式
- 这两天安装了Team Foundation Server 2008,把碰到的问题和解决方案记录下来
- 微信开发IOS系统的一些坑(JS 正则表达式验证)
- 最近想写一个邮箱自动验证功能,在网上看了很多,写到自己上面出了很多问题,记录下来给后面的人一个参考
- 今天面试遇到的一些问题 【记录下来】
- Java 正则表达式的总结和一些小例子(验证和修改过的版本)