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 安装 redis
https://pypi.org/project/redis/ pip install redis import redis pool = redis.ConnectionPool( host = & ...
- Python_2day
选择 布尔类型.数值和表达式 注意:比较运算符的相等是两个等号,一个等到代表赋值 在Python中可以用整型0来代表False,其他数字来代表True 后面还会讲到 is 在判断语句中的用发 In [ ...
- 猎豹wifi的坑
最近想看看外面的风景,装了Cisco的VPN,但总是连不了外网,国内的网站连接速度比较慢. 运维人员看了很长时间都没发现原因,route print查看之后,说: 在连接外网之前,多走了层路由... ...
- luogu P4382 [九省联考2018]劈配
luogu 我记得我第一次做这道题的时候屁都不会qwq 先考虑第一问,暴力是依次枚举每个人,然后从高到低枚举志愿,枚举导师,能选就选.但是可以发现前面的人选的导师可能会导致后面的人本来可以选到这个志愿 ...
- how to create a flask server
1. use database 2. use redis 3. inport/export excel2007 version+ from flask import send_from_directo ...
- 初探 -2 JavaScript
JavaScript 简介 JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. JavaScrip ...
- 从HTTP request的body中拿到JSON并反序列化为一个对象
import com.google.gson.Gson; import org.apache.struts2.ServletActionContext; import javax.servlet.Se ...
- laravel-admin后台框架基本使用
建立控制器 在app/Admin/Controllers新建对应的控制器来管理某个数据表.控制器例子: <?php namespace App\Admin\Controllers; use En ...
- Ubuntu 双网卡route
ip route flush table sz ip route add default via 183.2.218.254 dev eth0 src 183.2.218.4 table sz ip ...
- (转) IntelliJ IDEA2018激活
IntelliJ IDEA2018破解教程 破解方法:下载破解补丁→修改配置文件→输入激活码→激活成功 由于JetBrains封杀,大部分激活服务器已经不能使用,使用下面的比较麻烦的方法也可以进行破解 ...