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 ...
随机推荐
- py之包和日志
第一章 包 只要文件夹下含有__init__.py文件就是一个包 回想一下,之前我们没有学习模块的时候将一个整体的功能写入到文件中,为了能够充分的将某个功能进行重用 我们使用了模块,但是慢慢的模块就会 ...
- flask中使用jsonify和json.dumps的区别
一.实验 python的flask框架为用户提供了直接返回包含json格式数据响应的方法,即jsonify,在开发中会经常用到.如下一段简单的flask后端代码,服务端视图函数根据请求参数返回json ...
- Exchange 2010的部署
实验拓扑: 实验准备条件:计算机基本配置的准备:DC (vbers):配置IP地址.子网掩码.网关EX (vbers2):配置IP地址.子网掩码.网关.指定DNS 域环境搭建的准备1.在计算机名为vb ...
- Java Web开发技术教程入门-项目-读取用户注册信息
昨天说要补个项目来巩固下这几天学的知识,于是今天咱们就写一个读取用户注册信息的小项目.读取用户信息注册信息这个功能在各大网站都是很常见的.好,话不多说.开始我们的编程之旅! 软件环境:JDK9.0 ...
- RabbitMQ入门教程(三)：Hello World
原文:RabbitMQ入门教程(三):Hello World 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog. ...
- MySQL查询最近一周（最近7天）数据
参考:https://blog.csdn.net/ouyang111222/article/details/77638826 -表结构 - CREATE TABLE `zk_score` ( `id` ...
- Vue分割音乐歌词数据函数
parseLyric(lyric) { var lines = lyric.split(/\n/); //使用/n换行,将数据切成一个数组 var getLtricTime = ...
- SpringBoot 1.x 之入门
1 SpringBoot简介 SpringBoot简化Spring应用开发,约定大于配置,去繁从简,just run就能创建一个独立的,产品级别的应用. 背景: J2EE笨重的开发.繁多的配置.低下的 ...
- ZROI 19.08.06模拟赛
传送门 写在前面:为了保护正睿题目版权,这里不放题面,只写题解. 今天正睿又倒闭了,从删库到跑路. 天祺鸽鸽txdy! A "不要像个小学生一样一分钟就上来问东西."--蔡老板 虽 ...
- vue history模式下的微信分享
// 微信验证 export function requireConfig() { let url = window.location.href systemApi.wxoption({ url: u ...