form-validation--表单验证插件

基于jquery的validationEngine表单验证插件，根据官网提示，该插件支持IE6-8，Chrome浏览器，火狐，Safari，Opera 10，但由于有使用到了css3的阴影和圆角样式，所以在IE浏览器下无法看到圆角和阴影效果(IE 9 支持圆角效果)，整体来说还是不错的。

1.默认校验规则

名称	示例	说明
required	validate[required]	表示必填项
optional	validate[optional]	表示可选项。若不输入，不要求必填，若有输入，则验证其是否符合要求。
dateRange[name]	validate[dateRange[grp1]]	验证日期范围
dateTimeRange[name]	validate[dateTimeRange[grp1]]	验证日期及时间范围
minSize[int]	validate[minSize[6]]	最少输入字符数
maxSize[int]	validate[maxSize[20]]	最多输入字符数
groupRequired[name]	validate[groupRequired[grp2]]	群组中至少输入一项
min[int]	validate[min[1]]	最小值（该项为数字的最小值，注意与 minSize 的区分）
max[int]	validate[max[9999]]	最大值（该项为数字的最大值，注意与 maxSize 的区分）
past[date]	validate[past[2012/12/20]]	日期必需在 date 或 date 的未来。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now
future[date]	validate[future[now]]	日期必须在 data 或 date 的过去。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now
maxCheckbox[int]	validate[maxCheckbox[2]]	最多选取的项目数（用于Checkbox）
minCheckbox	validate[minCheckbox[2]]	最少选取的项目数（用于Checkbox）
equals	validate[equals[id]]	当前控件值需与 id 这个控件的值相同
phone	validate[custom[phone]]	验证电话号码
email	validate[custom[email]]	验证 Email 地址
integer	validate[custom[integer]]	验证整数
number	validate[custom[number]]	验证数字
date	validate[custom[date]]	验证日期，格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D
dateFormat	validate[custom[dateFormat]]	验证日期格式，格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D
dateTimeFormat	validate[custom[dateTimeFormat]]	验证日期及时间格式，格式为：YYYY/MM/DD hh:mm:ss AM\|PM
ipv4	validate[custom[ipv4]]	验证 ipv4 地址
url	validate[custom[url]]	验证 url 地址，需以 http://、https:// 或 ftp:// 开头
onlyNumberSp	validate[custom[onlyNumberSp]]	只接受填数字和空格
onlyLetterSp	validate[custom[onlyLetterSp]]	只接受填英文字母（大小写）和单引号(')
onlyLetterNumber	validate[custom[onlyLetterNumber]]	只接受数字和英文字母
ajax	validate[ajax[ajaxUserCallPhp]]	在验证规则中自定义 "ajaxUserCallPhp":{ "url":"phpajax/ajaxValidateFieldUser.php", "extraData":"name=eric", "alertTextOk":"* 此帐号名称可以使用", "alertText":"* 此名称已被其他人使用", "alertTextLoad":"* 正在确认帐号名称是否有其他人使用，请稍等。" }
funcCall	validate[funcCall[functionName]]	调用外部函数

验证规则均写在 validate[] 中，如有多条规则，用英文逗号(,) 分割，如：

<input type="text" name="first_name" class="validate[required,minSize[6],custom[onlyLetterNumber]]">

2.引用

<link rel="stylesheet" href="assets/formvalidation/validationengine/css/jquery.validationEngine.min.css">

<script src="assets/formvalidation/validationengine/js/lang/jquery.validationEngine-zh_CN.js"></script>

<script src="assets/formvalidation/validationengine/js/jquery.validationEngine.min.js"></script>

3.初始化:

<script>

$("#form_validate_tooltip").validationEngine();

</script>

4.可以自定义提示内容

(function($){

    $.fn.validationEngineLanguage = function(){

    };

    $.validationEngineLanguage = {

        newLang: function(){

            $.validationEngineLanguage.allRules = {

                "required": { // Add your regex rules here, you can take telephone as an example

                    "regex": "none",

                    "alertText": "* 此处不可空白",

                    "alertTextCheckboxMultiple": "* 请选择一个项目",

                    "alertTextCheckboxe": "* 您必须钩选此栏",

                    "alertTextDateRange": "* 日期范围不可空白"

                },

                "requiredInFunction": {

                    "func": function(field, rules, i, options){

                        return (field.val() == "test") ? true : false;

                    },

                    "alertText": "* Field must equal test"

                },

                "dateRange": {

                    "regex": "none",

                    "alertText": "* 无效的 ",

                    "alertText2": " 日期范围"

                },

                "dateTimeRange": {

                    "regex": "none",

                    "alertText": "* 无效的 ",

                    "alertText2": " 时间范围"

                },

                "minSize": {

                    "regex": "none",

                    "alertText": "* 最少 ",

                    "alertText2": " 个字符"

                },

                "maxSize": {

                    "regex": "none",

                    "alertText": "* 最多 ",

                    "alertText2": " 个字符"

                },

                "groupRequired": {

                    "regex": "none",

                    "alertText": "* 你必需选填其中一个栏位"

                },

                "min": {

                    "regex": "none",

                    "alertText": "* 最小值為 "

                },

                "max": {

                    "regex": "none",

                    "alertText": "* 最大值为 "

                },

                "past": {

                    "regex": "none",

                    "alertText": "* 日期必需早于 "

                },

                "future": {

                    "regex": "none",

                    "alertText": "* 日期必需晚于 "

                },

                "maxCheckbox": {

                    "regex": "none",

                    "alertText": "* 最多选取 ",

                    "alertText2": " 个项目"

                },

                "minCheckbox": {

                    "regex": "none",

                    "alertText": "* 请选择 ",

                    "alertText2": " 个项目"

                },

                "equals": {

                    "regex": "none",

                    "alertText": "* 请输入与上面相同的密码"

                },

                "creditCard": {

                    "regex": "none",

                    "alertText": "* 无效的信用卡号码"

                },

                "phone": {

                    // credit: jquery.h5validate.js / orefalo

                    "regex": /^([\+][0-9]{1,3}[ \.\-])?([\(]{1}[0-9]{2,6}[\)])?([0-9 \.\-\/]{3,20})((x|ext|extension)[ ]?[0-9]{1,4})?$/,

                    "alertText": "* 无效的电话号码"

                },

                "email": {

                    // Shamelessly lifted from Scott Gonzalez via the Bassistance Validation plugin http://projects.scottsplayground.com/email_address_validation/

                    "regex": /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,

                    "alertText": "*邮箱地址地址无效,例如 abc@gmail.com"

                },

                "integer": {

                    "regex": /^[\-\+]?\d+$/,

                    "alertText": "* 不是有效的整数"

                },

                "number": {

                    // Number, including positive, negative, and floating decimal. credit: orefalo

                    "regex": /^[\-\+]?((([0-9]{1,3})([,][0-9]{3})*)|([0-9]+))?([\.]([0-9]+))?$/,

                    "alertText": "* 无效的数字"

                },

                "date": {

                    "regex": /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/,

                    "alertText": "* 无效的日期，格式必需为 YYYY-MM-DD"

                },

                "ipv4": {

                    "regex": /^((([01]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))[.]){3}(([0-1]?[0-9]{1,2})|(2[0-4][0-9])|(25[0-5]))$/,

                    "alertText": "* 无效的 IP 地址"

                },

                "url": {

                    "regex": /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i,

                    "alertText": "* 无效的URL地址"

                },

                "onlyNumberSp": {

                    "regex": /^[0-9\ ]+$/,

                    "alertText": "* 只能填数字"

                },

                "onlyLetterSp": {

                    "regex": /^[a-zA-Z\ \']+$/,

                    "alertText": "* 只接受英文字母大小写"

                },

                "onlyLetterNumber": {

                    "regex": /^[0-9a-zA-Z]+$/,

                    "alertText": "* 不接受特殊字符"

                },

                // --- CUSTOM RULES -- Those are specific to the demos, they can be removed or changed to your likings

                "ajaxUserCall": {

                    "url": "ajaxValidateFieldUser",

                    // you may want to pass extra data on the ajax call

                    "extraData": "name=eric",

                    "alertText": "* 此名称已被其他人使用",

                    "alertTextLoad": "* 正在确认名称是否有其他人使用，请稍等。"

                },

                "ajaxUserCallPhp": {

                    "url": "phpajax/ajaxValidateFieldUser.php",

                    // you may want to pass extra data on the ajax call

                    "extraData": "name=eric",

                    // if you provide an "alertTextOk", it will show as a green prompt when the field validates

                    "alertTextOk": "* 此帐号名称可以使用",

                    "alertText": "* 此名称已被其他人使用",

                    "alertTextLoad": "* 正在确认帐号名称是否有其他人使用，请稍等。"

                },

                "ajaxNameCall": {

                    // remote json service location

                    "url": "ajaxValidateFieldName",

                    // error

                    "alertText": "* 此名称可以使用",

                    // if you provide an "alertTextOk", it will show as a green prompt when the field validates

                    "alertTextOk": "* 此名称已被其他人使用",

                    // speaks by itself

                    "alertTextLoad": "* 正在确认名称是否有其他人使用，请稍等。"

                },

                 "ajaxNameCallPhp": {

                        // remote json service location

                        "url": "phpajax/ajaxValidateFieldName.php",

                        // error

                        "alertText": "* 此名称已被其他人使用",

                        // speaks by itself

                        "alertTextLoad": "* 正在确认名称是否有其他人使用，请稍等。"

                    },

                "validate2fields": {

                    "alertText": "* 请输入 HELLO"

                },

                //tls warning:homegrown not fielded

                "dateFormat":{

                    "regex": /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$|^(?:(?:(?:0?[13578]|1[02])(\/|-)31)|(?:(?:0?[1,3-9]|1[0-2])(\/|-)(?:29|30)))(\/|-)(?:[1-9]\d\d\d|\d[1-9]\d\d|\d\d[1-9]\d|\d\d\d[1-9])$|^(?:(?:0?[1-9]|1[0-2])(\/|-)(?:0?[1-9]|1\d|2[0-8]))(\/|-)(?:[1-9]\d\d\d|\d[1-9]\d\d|\d\d[1-9]\d|\d\d\d[1-9])$|^(0?2(\/|-)29)(\/|-)(?:(?:0[48]00|[13579][26]00|[2468][048]00)|(?:\d\d)?(?:0[48]|[2468][048]|[13579][26]))$/,

                    "alertText": "* 无效的日期格式"

                },

                //tls warning:homegrown not fielded

                "dateTimeFormat": {

                    "regex": /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])\s+(1[012]|0?[1-9]){1}:(0?[1-5]|[0-6][0-9]){1}:(0?[0-6]|[0-6][0-9]){1}\s+(am|pm|AM|PM){1}$|^(?:(?:(?:0?[13578]|1[02])(\/|-)31)|(?:(?:0?[1,3-9]|1[0-2])(\/|-)(?:29|30)))(\/|-)(?:[1-9]\d\d\d|\d[1-9]\d\d|\d\d[1-9]\d|\d\d\d[1-9])$|^((1[012]|0?[1-9]){1}\/(0?[1-9]|[12][0-9]|3[01]){1}\/\d{2,4}\s+(1[012]|0?[1-9]){1}:(0?[1-5]|[0-6][0-9]){1}:(0?[0-6]|[0-6][0-9]){1}\s+(am|pm|AM|PM){1})$/,

                    "alertText": "* 无效的日期或时间格式",

                    "alertText2": "可接受的格式： ",

                    "alertText3": "mm/dd/yyyy hh:mm:ss AM|PM 或 ",

                    "alertText4": "yyyy-mm-dd hh:mm:ss AM|PM"

                }

            };

        }

    };

    $.validationEngineLanguage.newLang();

})(jQuery);

留着以后开发时用，感觉很美观！

还有两种风格,可以去最代码查看且提供demo

巴特西

form-validation--表单验证插件

最新文章

热门文章