您的位置:首页 > Web前端 > HTML

一些碰到的正则验证,记录下来

2017-12-18 14:55 316 查看
在项目中碰到的一写正则验证,整理下来封装成一个JS插件

在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中的内容,可以根据自己的需求进行编辑修改

/**
* 匿名函数调用
* 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 正则 插件
相关文章推荐