博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery.validation.js 使用
阅读量:6438 次
发布时间:2019-06-23

本文共 7482 字,大约阅读时间需要 24 分钟。

引用文件:

"~/assets/global/plugins/jquery-validation/js/jquery.validate.min.js",    "~/assets/global/plugins/jquery-validation/js/jquery.metadata.js",    "~/assets/global/plugins/jquery-validation/js/localization/messages_cn.js",

jquery.metadata.js

/* * Metadata - jQuery plugin for parsing metadata from elements * * Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan * * Dual licensed under the MIT and GPL licenses: *   http://www.opensource.org/licenses/mit-license.php *   http://www.gnu.org/licenses/gpl.html * * Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $ * *//** * Sets the type of metadata to use. Metadata is encoded in JSON, and each property * in the JSON will become a property of the element itself. * * There are three supported types of metadata storage: * *   attr:  Inside an attribute. The name parameter indicates *which* attribute. *           *   class: Inside the class attribute, wrapped in curly braces: { } *    *   elem:  Inside a child element (e.g. a script tag). The *          name parameter indicates *which* element. *           * The metadata for an element is loaded the first time the element is accessed via jQuery. * * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements * matched by expr, then redefine the metadata type and run another $(expr) for other elements. *  * @name $.metadata.setType * * @example 

This is a p

* @before $.metadata.setType("class") * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label" * @desc Reads metadata from the class attribute * * @example

This is a p

* @before $.metadata.setType("attr", "data") * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label" * @desc Reads metadata from a "data" attribute * * @example

This is a p

* @before $.metadata.setType("elem", "script") * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label" * @desc Reads metadata from a nested script element * * @param String type The encoding type * @param String name The name of the attribute to be used to get metadata (optional) * @cat Plugins/Metadata * @descr Sets the type of encoding to be used when loading metadata for the first time * @type undefined * @see metadata() */(function($) {$.extend({ metadata : { defaults : { type: 'class', name: 'metadata', cre: /({.*})/, single: 'metadata' }, setType: function( type, name ){ this.defaults.type = type; this.defaults.name = name; }, get: function( elem, opts ){ var settings = $.extend({},this.defaults,opts); // check for empty string in single property if ( !settings.single.length ) settings.single = 'metadata'; var data = $.data(elem, settings.single); // returned cached data if it already exists if ( data ) return data; data = "{}"; if ( settings.type == "class" ) { var m = settings.cre.exec( elem.className ); if ( m ) data = m[1]; } else if ( settings.type == "elem" ) { if( !elem.getElementsByTagName ) return undefined; var e = elem.getElementsByTagName(settings.name); if ( e.length ) data = $.trim(e[0].innerHTML); } else if ( elem.getAttribute != undefined ) { var attr = elem.getAttribute( settings.name ); if ( attr ) data = attr; } if ( data.indexOf( '{
' ) <0 ) data = "{
" + data + "}"; data = eval("(" + data + ")"); $.data( elem, settings.single, data ); return data; } }});/** * Returns the metadata object for the first member of the jQuery object. * * @name metadata * @descr Returns element's metadata object * @param Object opts An object contianing settings to override the defaults * @type jQuery * @cat Plugins/Metadata */$.fn.metadata = function( opts ){ return $.metadata.get( this[0], opts );};$.validator.setDefaults({ debug: true, errorPlacement: function (error, element) { var p = $("

"); p.append(error); p.appendTo(element.parent()); }})})(jQuery);

View Code

messages_cn.js

(function (factory) {    if (typeof define === "function" && define.amd) {        define(["jquery", "../jquery.validate"], factory);    } else {        factory(jQuery);    }}(function ($) {    $.extend($.validator.messages, {        required: "必填",        remote: "请修正该字段",        email: "请输入正确格式的电子邮件",        url: "请输入合法的网址",        date: "请输入合法的日期",        dateISO: "请输入合法的日期 (ISO).",        number: "请输入合法的数字",        digits: "只能输入整数",        creditcard: "请输入合法的信用卡号",        equalTo: "请再次输入相同的值",        accept: "请输入拥有合法后缀名的字符串",        maxlength: $.validator.format("请输入一个长度最多是 {0} 的字符串"),        minlength: $.validator.format("请输入一个长度最少是 {0} 的字符串"),        rangelength: $.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),        range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),        max: $.validator.format("请输入一个最大为 {0} 的值"),        min: $.validator.format("请输入一个最小为 {0} 的值")    });}));
View Code

有一些公用的写在了metadata.js里面

$.validator.setDefaults({    debug: true,    errorPlacement: function (error, element) {        var p = $("

"); p.append(error); p.appendTo(element.parent()); }})

 

就是显示错误信息位置设定

使用:

1.建表单form,

2.把控件name赋值(只要各不相同即可),并在class里面赋值,比如required

3.在最后时判断是否验证通过再进行下一步操作

if ($("#formFinance").valid()) {                    if (!financeFlag) {                        financeFlag = true;                        o = self.selectFinanceItem();

上面的是早期的jquery.validate.js,我测的是1.5.5版本

最新的1.13版本的使用方法发生了变动,不需要jquery.metadata.js文件

直接data-属性使用

 

也可以自己手动设置具体信息:

$("#formFinance").validate({                    rules: {                        fFinanceName: { required: true },                        fLoanCount: { required: true ,min:0}                    },                    messages: {                        fFinanceName: {                            required: "必填",                        },                        fLoanCount: {                            required: "必填",                        },                        fRate: {                            required: "必填",                        },                        fFee: {                            required: "必填",                        },                        fPeriod: {                            required: "必选",                        }                     },                    errorPlacement: function (error, element) {                        var p = $("

"); p.append(error); p.appendTo(element.parent()); } });

 

http://blog.csdn.net/hliq5399/article/details/6557789

http://www.cnblogs.com/linjiqin/p/3431835.html

http://www.runoob.com/jquery/jquery-plugin-validate.html

http://www.cnblogs.com/yanjunwu/p/3764740.html

 https://github.com/ffmike/jquery-validate

你可能感兴趣的文章
oracle常用函数
查看>>
hibernate的映射文件字段长度和数据库里面的字段长度
查看>>
CSS(二)选择符
查看>>
jquery的$().each,$.each的区别
查看>>
harris角点检测的学习
查看>>
global与nonlocal关键字
查看>>
数据库树状结构的关系表的删除方案
查看>>
vue生命周期探究(一)
查看>>
mysql-3 检索数据(1)
查看>>
data source from bit.ly
查看>>
React版本更新及升级须知(持续更新)
查看>>
mybatis和spring整合
查看>>
其他样式
查看>>
Android 开发笔记“关闭默认键盘”
查看>>
转 执行计划突变分析
查看>>
Oracle 高水位问题
查看>>
html5,表格与框架综合布局
查看>>
A + B Problem II
查看>>
Java基础查漏补缺(2)
查看>>
eclipse打开jar包出现乱码问题解决方法
查看>>