jquery.validation.js 使用
引用文件:
"~/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 <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>
* @before $.metadata.setType("class")
* @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
* @desc Reads metadata from the class attribute
*
* @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</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 <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</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[];
} else if ( settings.type == "elem" ) {
if( !elem.getElementsByTagName )
return undefined;
var e = elem.getElementsByTagName(settings.name);
if ( e.length )
data = $.trim(e[].innerHTML);
} else if ( elem.getAttribute != undefined ) {
var attr = elem.getAttribute( settings.name );
if ( attr )
data = attr;
} if ( data.indexOf( '{' ) < )
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[], opts );
};
$.validator.setDefaults({
debug: true,
errorPlacement: function (error, element) {
var p = $("<p class='errmsg'>");
p.append(error);
p.appendTo(element.parent());
}
})
})(jQuery);
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} 的值")
}); }));
有一些公用的写在了metadata.js里面
$.validator.setDefaults({
debug: true,
errorPlacement: function (error, element) {
var p = $("<p class='errmsg'>");
p.append(error);
p.appendTo(element.parent());
}
})
<style type="text/css">
.errmsg {
margin: -30px -40px 0px;
float: right;
color: #F30;
}
</style>
就是显示错误信息位置设定
使用:
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文件
<form id="registerForm" method="get" action="">
<fieldset>
<p>
<label for="cusername">用户名</label>
<input id="cusername" name="username" type="text" data-rule-required="true" data-rule-rangelength="[2,10]" data-msg-required="用户名不能为空" data-msg-rangelength="用户名长度必须是2到10个字符">
</p>
<p>
<label for="cpassword">密码</label>
<input id="cpassword" name="password" type="password" data-rule-required="true" data-rule-minlength="" data-msg-required="密码不能为空" data-msg-minlength="至少设置6位密码">
</p>
<p>
<label for="cconfirmpassword">确认密码</label>
<input id="cconfirmpassword" name="confirmpassword" type="password" data-rule-equalTo="#cpassword" data-msg-equalTo="两次密码不一致">
</p>
<p>
<label for="cemail">邮箱</label>
<input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-required="邮箱不能为空" data-msg-email="邮箱的格式不正确">
</input>
</p>
<p>
<label for="chasreferee">有推荐人请勾选</label>
<input type="checkbox" id="chasreferee" name="hasreferee">
</p>
<p>
<label for="creferee">推荐人</label>
<input id="creferee" name="referee" data-rule-required="#chasreferee:checked" data-msg-required="推荐人不能为空">
</input>
</p>
<p>
<input type="submit" value="提交">
</p>
</fieldset>
</form>
直接data-属性使用
也可以自己手动设置具体信息:
$("#formFinance").validate({
rules: {
fFinanceName: { required: true },
fLoanCount: { required: true ,min:}
},
messages: {
fFinanceName: {
required: "必填",
},
fLoanCount: {
required: "必填",
},
fRate: {
required: "必填",
},
fFee: {
required: "必填",
},
fPeriod: {
required: "必选",
}
},
errorPlacement: function (error, element) {
var p = $("<p class='errmsg'>");
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
jquery.validation.js 使用的更多相关文章
- jquery.validation.js 表单验证
jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
- jquery.form.js+jquery.validation.js实现表单校验和提交
一.jquery引用 主要用到3个js: jquery.js jquery.form.js jquery.validation.js 另外,为了校验结果提示本地化,还需要引入jquery.vali ...
- jquery.validation.js的自定义方法
jQuery.validator.addMethod(name,method[,message]) name方法名 method:function(value,element,params)//val ...
- 转载 jQuery validation
之前做客户端验证感觉自己javascript 不行,虽然能写出来一完整的验证,但从不自信,一直觉得客户端验证是比较繁琐的事情,但是又不能不做,只到最开始接触ajax ,遇到了一个jQuery vali ...
- jQuery validation
之前做客户端验证感觉自己javascript 不行,虽然能写出来一完整的验证,但从不自信,一直觉得客户端验证是比较繁琐的事情,但是又不能不做,只到最开始接触ajax ,遇到了一个jQuery vali ...
- jQuery Validation Plugin
使用方式很简单,简单测试代码如下: <html> <head> <script type="text/javascript" src="./ ...
- jQuery.vilidation.js登录&注册
代码解析:通过ajax获取url路径链接php接口做登录和注册获取到的数据传到数据库. ajax利用四步: //1.创建一个ajax对象; //2.打开请求: //判断用户传递的是get还是post请 ...
- 表单验证的validate.js插件---jQuery Validation Plugin
早上在公交车上看了一个关于慕课网的教程<表单验证的validate.js插件---jQuery Validation Plugin>,正好可以用到自己近期开发简易微博的注册页面和登录页面, ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
随机推荐
- Unity3D笔记九 发送广播与消息、利用脚本控制游戏
一.发送广播与消息 游戏对象之间发送的广播与消息分为三种:第一种向子对象发送,将发送至该对象的同辈对象或者子孙对象中:第二种为给自己发送,发送至自己本身对象:第三种为向父对象发送,发送至该对象的同辈或 ...
- 树形DP求各点能走到的最远距离
hdu2196 Computer Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- apache工作模式worker以及prefork的切换
apache比较常用的工作模式有worker以及prefork两种方式. 如果在编译时候不指定,系统默认的是prefork模式:如果需要换成worker模式,需要在编译的时候带上编译参数:--with ...
- 170726、常用 Git 命令清单
,下面是我整理的常用 Git 命令清单.几个专用名词的译名如下: Workspace:工作区 Index / Stage:暂存区 Repository:仓库区(或本地仓库) Remote:远程仓库 一 ...
- 170630、springboot编程之普通类中调用spring管理的bean对象
我们知道如果我们要在一个类使用spring提供的bean对象,我们需要把这个类注入到spring容器中,交给spring容器进行管理,但是在实际当中,我们往往会碰到在一个普通的Java类中,想直接使用 ...
- 更快写入的落脚点不是线程数而是mysql连接数 对数据库 批处理 批写入
批提交mysql 单线程的批提交 nohup python fromRedisoToMysqlSingleThreadOneConnBatchInsert.py 100 10.24.192.192 ...
- ubuntu ---QQ install/desktop/ibus reinstall
http://www.linuxidc.com/Linux/2016-09/134923.htm ( Ubuntu 16.04安装QQ国际版图文详细教程) [ sudo apt-get install ...
- inotify+rsync安装配置
环境 系统 IP地址 主服务器 CentOS7.4 192.168.1.1 备份服务器 CentOS7.4 192.168.1.2 一.备份服务器 安装rsync(备) wget https://rs ...
- Qt::浅谈信号槽连接,参数在多线程中的使用
Qt的信号槽有五种连接方式定义在enum Qt::ConnectionType,下面简单介绍 Qt::AutoConnection:自动判断连接方式,如果信号发送对象和执行槽对象在同一线程,那么等于Q ...
- Spark集群安装和WordCount编写
一.Spark概述 官网:http://spark.apache.org/ Apache Spark™是用于大规模数据处理的统一分析引擎. 为大数据处理而设计的快速通用的计算引擎. Spark加州大学 ...