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 ...
随机推荐
- flask 后台表单验证模块
我不想直接用flask的wtf模块,太大,功能太多,用不了.但后台也不能不做验证吧,我比较懒,不想一行一行写代码验证,所以就写了一个验证模块,对于小项目也够用了 # encoding=utf-8 # ...
- http status 400,http 400,400 错误
转载:http://blog.csdn.net/xu_zh_h/article/details/2294233 4 请求失败4xx 4xx应答定义了特定服务器响应的请求失败的情况.客户端不应当在不更改 ...
- C++ 包含头文件 和 宏的使用 和 条件编译
1 #define命令剖析 1.1 #define的概念 #define命令是C语言中的一个宏定义命令,它用来将一个标识符定义为一个字符串,该标识符被称为宏名,被定义的字符串称为替换文本. ...
- XML的命名空间
XML命名空间提供避免元素命名冲突的方法. 命名冲突:在XML中,元素名称是由开发者定义的,当两个不同的文档使用相同的元素名时,就会发生命名冲突. 这个XML文档携带着某个表格中的信息: <ta ...
- Windows消息拦截技术的应用（作者博客里有许多相关文章）
民航合肥空管中心 周毅 一.前 言 众所周知,Windows程式的运行是依靠发生的事件来驱动.换句话说,程式不断等待一个消息的发生,然后对这个消息的类型进行判断,再做适当的处理.处理完此次消息后又回到 ...
- linux 下使用 tc 模拟网络延迟和丢包(转)
1 模拟延迟传输简介 netem 与 tc: netem 是 Linux 2.6 及以上内核版本提供的一个网络模拟功能模块.该功能模块可以用来在性能良好的局域网中,模拟出复杂的互联网传输性能,诸如低带 ...
- UML_行为图
活动图是UML用于对系统的动态行为建模的另一种常用工具,它描述活动的顺序,展现从一个活动到另一个活动的控制流.活动图在本质上是一种流程图.活动图着重表现从一个活动到另一个活动的控制流,是内部处理驱动的 ...
- hdu1588之经典矩阵乘法
Gauss Fibonacci Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- 移动端适配：font-size设置的思考
1. 问题的引出 如果html5要适应各种分辨率的移动设备,可以使用rem这样的尺寸单位,针对各个分辨率范围在html上设置font-size的代码: html{font-size:10px} @me ...
- C#整理6——数组的应用
数组的应用:(一).冒泡排序.1.冒泡排序是用双层循环解决.外层循环的是趟数,里层循环的是次数.2.趟数=n-1:次数=n-趟数.3.里层循环使用if比较相临的两个数的大小,进行数值交换. 作业:1. ...