jquery validation plugin 使用
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="signupForm" method="get" action="">
<div class="error"></div>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname"/>
</p>
<p>
<label for="email">E-Mail</label>
<input id="email" name="email"/>
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password"/>
</p>
<p>
<label for="confirm_password">确认密码</label>
<input id="confirm_password" name="confirm_password" type="password"/>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
<input id="reset" type="button" value="重置表单"/>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
(function() {
$.validator.setDefaults({
debug: true
}) var validator = $("#signupForm").validate({
rules: {//验证规则
firstname: "required",
email: {
required: true,
email: true,
// remote: {//远端验证
// url: "check-email.php",
// type: "post",
// data: {
// username: function() {
// return $("#username").val();
// }
// }
// }
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: {//错误消息
firstname: "请输入姓名",
email: {
required: "请输入Email地址",
email: "请输入正确的email地址"
},
password: {
required: "请输入密码",
minlength: $.validator.format("密码不能小于{0}个字符")
},
confirm_password: {
required: "请输入确认密码",
minlength: "确认密码不能小于5个字符",
equalTo: "两次输入密码不一致不一致"
}
},
// errorPlacement: function(error, element) {//显示错误消息的位置
// if (element.is(":radio"))
// error.appendTo(element.parent().next().next());
// else if (element.is(":checkbox"))
// error.appendTo(element.next());
// else
// error.appendTo(element.parent().next());
// },
// errorClass: "invalid", //错误消息框的类
// errorElement: "a", //错误消息框的元素
// errorContainer: "div.error", //当验证时显示或隐藏这个容器
// errorLabelContainer: "#signupForm div.error",//当验证时显示或隐藏这个容器
// wrapper: "li",//包裹住单条错误信息
// success: function(label) {//验证成功后的操作
// label.addClass("valid").text("Ok!")
// },
// onsubmit: false, //提交表单时验证
// onfocusout: false, //失去焦点是验证
// onkeyup: false,//这个好像不能用也许是我jquery版本太高了
submitHandler: function(form) {//处理程序
alert("submitted");
//form.submit();
}
}); // 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码"); // 中文字两个字节
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
var length = value.length;
for (var i = 0; i < value.length; i++) {
if (value.charCodeAt(i) > 127) {
length++;
}
}
return this.optional(element) || (length >= param[0] && length <= param[1]);
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)")); //重置错误信息
$("#reset").click(function() {
validator.resetForm();
}); //原文http://blog.csdn.net/phiberg/article/details/7344853?reload
})();
</script>
</body>
</html>
jquery validation plugin 使用的更多相关文章
- jQuery Validation Plugin学习
http://blog.csdn.net/violet_day/article/details/14109261 jQuery Validation Plugin Demo 一.默认校验规则 (1)r ...
- （转）jQuery Validation Plugin客户端表单证验插件
jQuery Validation Plugin客户端表单验证插件 官方文档:http://jqueryvalidation.org/documentation/ 官方demo:http://jque ...
- 表单验证的validate.js插件---jQuery Validation Plugin
早上在公交车上看了一个关于慕课网的教程<表单验证的validate.js插件---jQuery Validation Plugin>,正好可以用到自己近期开发简易微博的注册页面和登录页面, ...
- jQuery Validation Plugin
使用方式很简单,简单测试代码如下: <html> <head> <script type="text/javascript" src="./ ...
- jQuery Validation remote的缓存请求
不知大家有没有遇到,用jQuery Validation(本文讨论的版本为jQuery Validation Plugin 1.11.1)用remote方式做校验时,如果验证元素的值保持一致,进行多次 ...
- JQuery 表单验证--jquery validation
jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 < ...
- jQuery Validation让验证变得如此easy(一)
一.官网下载jquery,和jquery validation plugin http://jqueryvalidation.org/ 二.引入文件 <script src="js/j ...
- jQuery Validation让验证变得如此容易(一)
一.官网下载jquery,和jquery validation plugin http://jqueryvalidation.org/ 二.引入文件 <script src="js/j ...
- Jquery Validation 验证控件的使用说明
转载自:http://blog.csdn.net/huang100qi/article/details/52453970,做了一些简化及修改 下载地址:https://jqueryvalidation ...
随机推荐
- 水池（DFS）
水池数目 点我 描述 南阳理工学院校园里有一些小河和一些湖泊,现在,我们把它们通一看成水池,假设有一张我们学校的某处的地图,这个地图上仅标识了此处是否是水池,现在,你的任务来了,请用计算机算出该地图中 ...
- 烧饼（nyoj779）
描述烧饼有两面,要做好一个兰州烧饼,要两面都弄热.当然,一次只能弄一个的话,效率就太低了.有这么一个大平底锅,一次可以同时放入k个兰州烧饼,一分钟能做好一面.而现在有n个兰州烧饼,至少需要多少分钟才能 ...
- MySQL query_cache_type 详解
MySQL设置查询缓存的用意: 把查询到的结果缓存起来,下次再执行相同查询时就可以直接从结果集中取:这样就比重新查一遍要快的多. 查询缓存的最终结果是事与愿违: 之所以查询缓存并没有能起到提升性能的做 ...
- SQL Server 的内存分类
第一类. 根据申请方式分: commit 型 它是指先reserve申请一大块,再通过commit提交后得到的空间.这种方式申请到的空间可以启用 awe ! stolen型 与commit 相对应!它 ...
- android TextView EditTextView一些技巧使用 （视图代码布局）
android TextView 是最常用的控件 可以用作普通的显示,还可以用作有显示文字的按钮,用作有显示图片的图文组合 1. 图文组合 xml 中: <TextView android:id ...
- 【配置】电信华为HG8245 无线路由器配置 有贴图
引子:家里的电信无线路由器连接之后无法直接上上网,只能再次通过PPPoe方式拨号上网.经过网上查询和一番折腾之后,整理攻略如下. 1. 用超级用户登录192.168.1.1(默认密码) 用 ...
- Dispatcher.BeginInvoke()方法使用不当导致UI界面卡死的原因分析
原文:Dispatcher.BeginInvoke()方法使用不当导致UI界面卡死的原因分析 前段时间,公司同事开发了一个小工具,在工具执行过程中,UI界面一直处于卡死状态. 通过阅读代码发现,主要是 ...
- linux系统怎么改为中文版(转)
linux系统安装好后怎么改为中文版呢?今天就跟大家介绍下linux系统改为中文版的方法,希望能帮助到大家! 以下是linux系统改为中文版的四种方法,一起来看看: 方法1:写入环境变量 echo & ...
- hdu 4497 GCD and LCM 质因素分解+排列组合or容斥原理
//昨天把一个i写成1了 然后挂了一下午 首先进行质因数分解g=a1^b1+a2^b2...... l=a1^b1'+a2^b2'.......,然后判断两种不可行情况:1,g的分解式中有l的分解式中 ...
- hdu - 4709 - Herding
题意:给出N个点的坐标,从中取些点来组成一个多边形,求这个多边形的最小面积,组不成多边形的输出"Impossible"(测试组数 T <= 25, 1 <= N < ...