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 ...
随机推荐
- 文件的三种打开方式及with管理文件上下文
文件的三种打开方式及with管理文件上下文 一.文件的三种打开方式 1.1 只读 f = open(r'D:\pycharm\yjy\上海python学习\456.txt','r',encoding= ...
- 使用Koa.js离不开这十个中间件
随着ES6的普及,async/await的语法受到更多JS开发者的青睐,Koa.js作为比较早支持使用该语法的Node框架越来越受到大家的喜爱,虽然Koa.js本身支持的功能很有限,但官方和社区提供了 ...
- 微信内置浏览器不支持 onclick 如何解决？（原因是因为内面中的内容或者标签大部分是动态生成的）
使用了很多onclick事件,但是在Android的微信内置浏览器中,onclick是不能被执行的. 开始的写法是: // $(".contentPic").click(funct ...
- Spring+Spring MVC+Hibernate框架搭建实例
前言:这里只是说明整个搭建流程,并不进行原理性的讲解 一 下面所需要用到的数据库配置: 数据库方面,使用mysql创建一个users表,具体代码如下: 1 2 3 4 5 6 7 8 9 10 11 ...
- express-handlebars
https://www.npmjs.com/package/express-handlebars
- 2019-11-29-C#-标准性能测试高级用法
title author date CreateTime categories C# 标准性能测试高级用法 lindexi 2019-11-29 10:13:16 +0800 2018-07-08 0 ...
- (转)linux chattr lsattr 命令
转http://www.ha97.com/5172.html PS:有时候你发现用root权限都不能修改某个文件,大部分原因是曾经用chattr命令锁定该文件了.chattr命令的作用很大,其中一些功 ...
- 使用 gitolite 管理配置 git 库的权限
问题:每次创建git库都需要在gitolite的配置文件中添加git库的配置信息,为了方便管理git库,不在重复提交,所以修改gitolite的配置管理文件. 环境:ubuntu16.04 安装git ...
- AIX中卷组管理
1.创建卷组 使用mkvg指令创建卷组. mkvg 指令参数 -B 创建大型卷组,该卷组最大能容纳128个物理卷和512个逻辑卷 -C 创建增加型并发卷组 -f 强制创建卷组 -G 与-B一样,创 ...
- 登陆Oracle的管理员登陆
任务栏:开始——运行,CMD 超级管理员进入系统:conn sys/oracle@prod as sysdba; 修改的代码:alter user username identified by use ...