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

时间:2022-06-02 18:48:43

在项目中碰到的一写正则验证,整理下来封装成一个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')