jQuery-validate插件初级篇
1、效果示例
1、右侧提示
2、底部提示
2、代码示例
1、validateUtil.js
/*
* 基于jquery 校验插件
* by mao2080@sina.com
*/
$(function (){
window.validateUtil = {
/**
* 显示提示信息
* @param {Object} error 提示信息
* @param {Object} element 当前表单元素
* @param {Object} insert 是否是insert
*/
showTips : function(error, element, insert){
if($(element).parent().data("pos") == "bottom"){
error.addClass("pointing tipslabel bottom");
}else{
error.addClass("pointing tipslabel right");
}
if($(element).parent().data("top")){
error.css({"top":$(element).parent().data("top")});
}
if($(element).parent().data("left")){
error.css({"left":$(element).parent().data("left")});
}
$(element).parent().css({"position":"relative"});
if(insert){
error.insertAfter(element);
}else{
$(element).parent().append(error);
}
},
/**
* 验证表单
* @param {Object} args 规则
*/
validate : function(args){
var validator = $(args.formId).validate( {
rules: args.rules,
messages: args.messages,
errorPlacement: function (error, element) {
validateUtil.showTips(error, element);
}
});
if(!validator.form()){
validator.focusInvalid();
return false;
}
return true;
}
};
});
2、validate.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JQuery-validation</title>
<link rel="stylesheet" href="css/validate.css"/>
<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/validateUtil.js"></script>
<style>
tr{
height: 45px;
}
</style>
</head>
<body>
<form id="form" style="padding: 10px; width: 800px; margin: auto;">
<fieldset>
<legend>Register</legend>
<table>
<tr>
<td align="right">userName：</td>
<td><input id="userName" name="userName" placeholder="userName"/></td>
</tr>
<tr>
<td align="right">Password：</td>
<td><input id="password" name="password" type="password" placeholder="Password"/></td>
</tr>
<tr>
<td align="right">Confirm password：</td>
<td><input id="confirm_password" name="confirm_password" type="password" placeholder="Confirm password"/></td>
</tr>
<tr>
<td align="right">Email：</td>
<td><input id="email" name="email" type="text" placeholder="Email"/></td>
</tr>
<tr>
<td align="right">sex：</td>
<td data-left="-4px" data-top="0" data-pos="right">
<select id="sex" style="width: 173px;" name="sex" placeholder="Confirm sex">
<option></option>
<option value="1">male</option>
<option value="0">female</option>
</select>
</td>
</tr>
<tr>
<td align="right">color：</td>
<td>
<input type="radio" id="s1" name="color"/>red
<input type="radio" id="s2" name="color"/>blue
</td>
</tr>
<tr>
<td align="right"></td>
<td>
<input name="agree" type="checkbox"/><label>Please agree to our policy</label>
</td>
</tr>
</table> <button type="button" id="submit" class="ui primary button">Register</button>
</div>
</fieldset>
</form> <script type="text/javascript"> var validator = function() {
return {
rules: {
userName: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
sex:{
required: true
},
color:{
required: true
},
agree: "required"
},
messages: {
userName: {
required: "Please enter a userName",
minlength: "Your userName must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
sex:{
required: "Please select a sex"
},
color:{
required: "Please choose a color"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
},
formId:"#form"
};
}; $(document).ready( function () {
$("#submit").bind("click", function(){
if(validateUtil.validate(validator())){
alert("Congratulations...");
}
});
} );
</script>
</body>
</html>
3、login.html
通过给父元素标记： data-left="-11px" data-top="2px" data-pos="bottom"定义提示框的位置。
data-left相对父元素左间距。
data-top相对父元素上间距。
data-pos小箭头的方向，默认为right（bottom和right两个选项）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JQuery-validation</title>
<link rel="stylesheet" href="css/validate.css"/>
<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/validateUtil.js"></script>
<style>
tr{
height: 35px;
}
</style>
</head>
<body>
<form id="form" style="padding: 10px; width: 600px; margin: auto;">
<fieldset>
<legend>Login</legend>
<table>
<tr>
<td align="right">userName：</td>
<td data-left="-11px" data-top="2px" data-pos="bottom"><input id="userName" name="userName" style="width: 300px; height: 30px;" placeholder="userName"/></td>
<tr>
</tr>
<td align="right">Password：</td>
<td data-left="-11px" data-top="2px" data-pos="bottom"><input id="password" name="password" style="width: 300px; height: 30px" type="password" placeholder="Password"/></td>
</tr>
</table>
<br><br>
<button type="button" id="submit" class="ui primary button">Login</button>
</div>
</fieldset>
</form> <script type="text/javascript"> var validator = function() {
return {
rules: {
userName: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
}
},
messages: {
userName: {
required: "Please enter a userName",
minlength: "Your userName must consist of at least 2 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
}
},
formId:"#form"
};
}; $(document).ready( function () {
$("#submit").bind("click", function(){
if(validateUtil.validate(validator())){
alert("Congratulations...");
}
});
} );
</script>
</body>
</html>
3、参考网站
https://jqueryvalidation.org/files/demo/semantic-ui/index.html
4、资料下载
jQuery-validate插件初级篇的更多相关文章
- jquery.validate插件在booststarp中的运用
现在在网络上已经可以找到很多基于bootstarp的表单认证,但是验证的都不全面的,下载后,我们还要理解作者的思路然后进行修改添加,这种修改方式往往适合学习,时间很多的时候.但是我们很多时候是没有时间 ...
- jQuery Validate 插件
>>>>>>>>>>>>>>>>>>>>>>>>> ...
- jquery validate 插件使用小结
项目中整合了jquery validate插件,仿照别人的使用写了我的表单验证,结果不起作用.然后就各种找原因. 在网上下了jquery validate插件的完整包,看了看里边的例子,跟我的使用貌似 ...
- 【jQuery】(6)---jQuery validate插件
jQuery validate插件 一.导入js库 先导入jQuery库,然后导入Validate插件,如果是中文提示还需要 ...
- JQuery Validate插件与实现
菜鸟拙见,望请纠正 一:效果展示:以下是两个注册表单验证,左边使用Jquery validate插件实现,右边是自己用JQuery实现,效果差不多,但个人推荐用插件,毕竟前人栽了树而且长大了后人当然好 ...
- jQuery Validate 插件为表单提供了强大的验证功能
之前项目开发中,表单校验用的jQuery Validate 插件,这个插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的 ...
- 使用JQuery.Validate插件来校验页面表单有效性
使用JQuery.Validate插件来校验页面表单有效性1. [代码] 常见的注册表单元素 <form action="#" method="post" ...
- jQuery Validate插件实现表单强大的验证功能
转自:http://www.jb51.net/article/76595.htm jQuery Validate插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自 ...
- 前端验证，jquery.validate插件
jQuery Validate 简介: jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用 ...
- （转）jquery.validate插件的使用
JQuery Validate使用总结:一.导入js库<script src="../js/jquery.js" type="text/javascript&quo ...
随机推荐
- url简单加密
使用urlencode和urldecode可以对传输的字符串进行简单的加密,也可用于将汉字转换为16进制数字进行传输,每个16进制数前面都带一个% urlencode : 将中文转换为16进制数 ur ...
- 084、Prometheus 到底NB在哪里？（2019-05-06 周一）
参考https://www.cnblogs.com/CloudMan6/p/7709970.html 本节学习Prometheus的核心,多维数据模型 比如要监控容器 webapp1 的内存使 ...
- 吴恩达深度学习：python中的广播
1.python中的广播: (1)广播是一种手段,可以让python代码执行得更快,我们来看看python实际如何执行. 下面矩阵列出了100克苹果.牛肉.鸡蛋和蛋白质中含有的碳水化合物.蛋白质和脂肪 ...
- 2019-11-29-C#-序列类为-xml-可以使用的特性大全
title author date CreateTime categories C# 序列类为 xml 可以使用的特性大全 lindexi 2019-11-29 8:59:2 +0800 2018-6 ...
- spring boot基础学习教程
Spring boot 标签(空格分隔): springboot HelloWorld 什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新 ...
- lua基础（2）
错误处理: local function add(a,b) assert(type(a) == "number", "a 不是一个数字") assert(typ ...
- Matlab 快速多通道积分图计算函数
所谓快速多通道积分图计算,其实就是 cumsum2D. 我写了一个比较快的版本(比 VLFeat 的快),用 mex 编译一下就能用了. 代码 #include <string.h> #i ...
- windows设置通过NFS连接到Linux共享数据
win7下增加了很多有用的功能,只是默认没有开启而已,今天简述下一个WIN7下的NFS功能,通过这个功能,可以让win7共享Linux下面的磁盘分区或者目录数据,这个功能原理只能通过samba或者ft ...
- Big Data（七）MapReduce计算框架（PPT截图）
一.为什么叫MapReduce? Map是以一条记录为单位映射 Reduce是分组计算
- 关于PHP://input
$data = file_get_contents("php://input"); php://input 是个可以访问请求的原始数据的只读流. POST 请求的情况下,最好 ...