个人编写的一个JS表单验证插件

来源：互联网发布：关于大数据的新闻报道编辑：程序博客网时间：2024/09/21 06:35

SimpleValidation

突然想自己写一个JS的验证插件，就参考了validate.js，写了一个直接用中文提示的插件。

下面直接上代码（给的注释不是很多，有问题可以发评论）：

(function (window,document,undefined) {    "use strict";    var defaultsMessages = {        required: "%s不能为空",        valid_email: "不是正确的邮箱",        min_length: "%s的长度不能小于%n",        max_length: "%s的长度不能大于%n",        alpha: "%s只能包含英文",        alpha_numeric: "%s只能包含英文和数字",        alpha_dash: "%s只能包含英文、数字、_、-",        numeric: "%s只能包含数学",        noIdeograph : "%s 不能包含中文"    };    var defaultCallback = function (result) {        console.log("default callback.");    };    var defaultRegex = {        numericRegex : /^[0-9]+$/,        emailRegex : /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,        alphaRegex : /^[a-z]+$/i,        alphaNumericRegex : /^[a-z0-9]+$/i,        alphaDashRegex : /^[a-z0-9.@_\-]+$/i,        noIdeographRegex : /[\u4E00-\u9FFF]+/g,    };    /**     * 获取指定元素的属性     * @param element     * @param attributeName     * @returns {*}     */    var attributeValue =function (element, attributeName) {        var i,elementLength = element.length;        if ((element.length > 0) && (element[0].type === "radio" || element[0].type === "checkbox")) {            for (i = 0; i < elementLength; i++) {                if (element[i].checked) {                    return element[i][attributeName];                }            }            return;        }        return element[0][attributeName];    };    /**     * 根据name将一个element转换为自定义的结构     * @param name     * @returns {{}}     */    var element2Field =function (name) {        var element = document.getElementsByName(name);        var field = {};        field.value = attributeValue(element,"value");        field.type = attributeValue(element,"type");        return field;    };    var simpleValidation =function (messages,hooks) {        this._initial(messages,hooks);    };    simpleValidation.prototype = {        constructor : this,        _initial : function (messages,hooks) {            this._messages = Object.assign(defaultsMessages,messages);            this._regex = defaultRegex;            this._hooks = Object.assign(this._hooks,hooks);        },        _validate : function (name,display,rules,callback,min,max) {            var _callback = callback || defaultCallback;            var _field = element2Field(name);            var _rules = [];            if(rules && typeof rules === "string"){                _rules = rules.split("|");            }else{                _rules.push("required");                console.log("Rule is not found,setting 'required' as default rule.")            }            var i;            var result = {};            var resultFlag = false;            var resultMsg = "";            for(i = 0;i < _rules.length;i++){                if(this._hooks.hasOwnProperty(_rules[i])){                    if(min && this._regex.numericRegex.test(min)){                        resultFlag = this._hooks[_rules[i]].call(this,_field,min);                    }else if(max && this._regex.numericRegex.test(max)){                        resultFlag = this._hooks[_rules[i]].call(this,_field,max);                    }else{                        resultFlag = this._hooks[_rules[i]].call(this,_field);                    }                    if(resultFlag == false){                        break;                    }                }            }            if(resultFlag == false){                if(this._messages.hasOwnProperty(_rules[i])){                    resultMsg = this._messages[_rules[i]];                }            }            resultMsg = resultMsg != ""? resultMsg.replace("%s",display) : "No message has set.";            if(this._regex.numericRegex.test(min)){                resultMsg = resultMsg.replace("%n",min);            }            if(this._regex.numericRegex.test(max)){                resultMsg = resultMsg.replace("%n",max);            }            result.resultFlag = resultFlag;            result.resutlMsg = resultMsg;            if(_callback && typeof _callback === "function"){                _callback(result);            }else{                console.log(result.resultFlag + "|" + result.resutlMsg);                console.log("Validation is finished,but no callback.")            }        },        _hooks : {            required: function(field) {                var value = field.value;                if ((field.type === 'checkbox') || (field.type === 'radio')) {                    return (field.checked === true);                }                return (value !== null && value !== '' && value !== undefined);            },            valid_email : function (field) {                return (this._regex.emailRegex.test(field.value));            },            min_length : function (field,length) {                if(!this._regex.numericRegex.test(length)){                    return false;                }                return (field.value.length >= parseInt(length,10));            },            max_length: function(field, length) {                if (!this._regex.numericRegex.test(length)) {                    return false;                }                return (field.value.length <= parseInt(length, 10));            },            noIdeograph : function (field) {                return (!this._regex.noIdeographRegex.test(field.value));            },            alpha_numeric : function (field) {                return (this._regex.alphaNumericRegex.test(field.value));            },            alpha_dash : function (field) {                return (this._regex.alphaDashRegex.test(field.value));            },            numeric : function (field) {                return (this._regex.numericRegex.test(field.value));            }        }    };    if (typeof module !== "undefined" && module.exports) {        module.exports = simpleValidation;    } else if (typeof define === "function" && define.amd) {        define(function(){return simpleValidation;});    } else {        !('simpleValidation' in window) && (window.simpleValidation = simpleValidation);    }}(window,document));

一个使用示例（传入的第一个参数是input的name）：

var validate = new simpleValidation();validate._validate("username","用户名","required|alpha_dash",function (results) {   console.log(results.resultFlag + "|" + resultsMsg);   //do something                });

自定义消息和事件（传入的是两个对象，属性的名字一定要一样，不然不能使用，具体的return需要自己决定，如果像我这样，永远都是false不同验证）：

var validate = new simpleValidation({ myMsg : "my message" },{ myMsg : function(){ //do something return false; });validate._validate("username","用户名","myMsg",function(results){ console.log(results.resultFlag + "|" + resultsMsg); //do something });

如果觉的复制麻烦，可以直接上我github上下载：
SimpleValidation

<如果转载请加个链接，谢谢>

阅读全文

0 0