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 ...
随机推荐
- python-day14(正式学习)
目录 三元表达式 列表推导式 字典生成式 zip()方法 生成器 yield关键字 迭代套迭代 send(value) close() throw() 自定义range方法 生成器表达式 匿名函数 与 ...
- 分位数回归及其Python源码
分位数回归及其Python源码 天朗气清,惠风和畅.赋闲在家,正宜读书.前人文章,不得其解.代码开源,无人注释.你们不来,我行我上.废话少说,直入主题.o(￣︶￣)o 我们要探测自变量 与因变量 的关 ...
- linux VMware 提供的网络连接有 5 种详细讲述
VMware 提供的网络连接有 5 种,分别是"桥接模式"."NAT 模式"."仅主机模式"."自定义"和"L ...
- ELK的搭建以及使用
一.架构如图: 二.工作机制: 在需要收集日志的应用上安装filebeat(需要修改配置文件,配置文件稍后介绍),启动filebeat后,会收集该应用的日志推送给redis,然后logstash从re ...
- mac系统homebrew安装mysql
homebrew 安装 mysql homebrew 是 macOS 缺失的软件包管理器,譬如可以下载 mysql.redis.wget 等等.操作系统:macOS High Sierra Versi ...
- Yii中实例化类的四种方式
1.最简单的也是最基本的,大家都会的一种 use yii\caching\FileCache; $cache = new FileCache(); $cache->set("name& ...
- 运维LVS-NAT模式理解
一.LVS-NAT模式的工作原理这个是通过网络地址转换的方法来实现调度的.首先调度器(LB)接收到客户的请求数据包时(请求的目的IP为VIP),根据调度算法决定将请求发送给哪个 后端的真实服务器(RS ...
- iphone手机软件安装目录
iPhone系统常用文件夹位置 1.[/Applications] 常用软件的安装目录 2. [/private /var/ mobile/Media /iphone video Recorder] ...
- 2019-11-29-Roslyn-通过-Nuget-管理公司配置
title author date CreateTime categories Roslyn 通过 Nuget 管理公司配置 lindexi 2019-11-29 08:58:52 +0800 201 ...
- Wine-Staging 4.9 发布，增添一些新补丁
Wine-Staging的工作还在继续,到4.9版为止,在上游Wine代码库上有超过830个补丁. 在上周五的Wine 4.9发布之后,Wine-Staging 4.9已经发布了,之前的一些暂存工作现 ...