表单验证插件之jquery.validate.js
提到表单验证的插件，第一个想到的就是jquery.validate.js，所以小生想在这里稍微详细地说一下这款插件的具体使用方法，便于理解，我直接附上整段demo的代码（没怎么调样式，主要是看js）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JQuery表单验证插件jQuery.validate.js</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.myform{
width:800px;
margin:30px auto;
}
.myform legend{
margin-left:30px;
}
p{
margin:30px;
}
.side{
text-align: center
}
em.success{
color:green;
}
em.error{
color:red;
}
/*还可以引入validation.css样式表，可以增加图标显示*/
</style>
</head>
<body>
<form class="myform" id="myForm" method="get" action="">
<fieldset>
<legend>注册账号</legend>
<p>
<label for="username">用户名</label>
<input type="text" id="username" name="username"/>
</p>
<p>
<label for="password">密码</label>
<input type="password" id="password" name="password" value="" />
</p>
<p>
<label for="confirm_password">确认密码</label>
<input type="password" id="confirm_password" name="confirm_password" value="" />
</p>
<p>
<label for="email">邮箱</label>
<input id="email" name="email" class="required" />
</p>
<p>
<label for="tel">手机号码</label>
<input id="tel" name="tel"/>
</p>
<p>
<label for="url">项目链接</label>
<input id="url" name="url" class="url"/>
</p>
<p>
<label for="code">验证码</label>
<input id="code" name="code" class="num"/>
</p>
<p>
<label for="sex">性别</label>
<select id="sex" name="sex">
<option value="0">男</option>
<option value="1" class="woman">女</option>
</select>
</p>
<p>
<label for="">是否已婚</label>
<label><input type="radio" value="0" name="married">是</label>
<label><input type="radio" value="1" name="married">否</label>
<label><input type="radio" value="2" name="married">离异</label>
</p>
<p>
<label for="">爱好</label>
<label><input type="checkbox" name="hobby_0" value="0" class="travel">旅游</label>
<label><input type="checkbox" name="hobby_1" value="1">睡觉</label>
<label><input type="checkbox" name="hobby_2" value="2">上网</label>
<label><input type="checkbox" name="hobby_3" value="3">看电影</label>
</p>
<p>
<input type="submit" name="submit" value="提交" class="btn_submit"/>
</p>
</fieldset>
</form>
<p class="side">此处填写的内容可以用来判断是否刷新了页面<input type="text" /></p>
<script type="text/javascript" src="jquery-1.12.0.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<!-- 引入支持固定格式解析的jQuery插件，可以将验证规则全部编写到class属性中，当然我还没试过，好不好用就不知道了 -->
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript" >
//DOM节点树生成后
$(document).ready(function() {
//配置参数，选择器里放id或者class名都可以
$(".myform").validate({
//通过name属性来设置验证规则
rules: {
username: {
required:true, //也可以直接在标签里添加class="required"
minlength:2 //设置最小长度
},
password: {
required: true,
minlength: 6
},
confirm_password: {
required: true,
minlength: 6,
equalTo: "#password" //要求与指定元素的值相匹配
},
tel:{
number:true //也可以直接在标签里添加class="number"
},
email:{
email:true //也可以直接在标签里添加class="email"
},
url:"url", //可以直接在标签里添加class="url"，也可以像上面一样改成{url:true}
code:{
calculate:"1+1"
}
},
//通过name属性来设置验证提示信息的内容
messages: {
username: {
required:"用户名必填",
minlength:"至少2个字符",
},
password: {
required: "请输入密码",
minlength: "密码不能少于6个字符"
},
confirm_password: {
required: "请输入确认密码",
minlength: "确认密码不能少于6个字符",
equalTo: "密码输入不一致"
},
tel:{
required:"请输入手机号码",
number:"请输入数字"
},
email:"请输入一个邮件地址",
url:"请输入一个网址"
},
//自定义一个提交方法
submitHandler: function(form) {
alert("已经提交!");
// form.submit();
$(form).ajaxSubmit();//和上面一行的结果一样，页面会被刷新一遍，不想刷新就用$.ajax()或者插件自带的remote方法
},
//想要不提交表单，只进行验证
debug:true,
//忽略某些元素不验证
ignore:".ignore",
//指明错误放置的位置，默认是把错误信息放在验证的元素后面
errorPlacement:function(error,element){
element.siblings(".success").remove();//为了解决错误信息与正确信息同时出现的问题
if (element.is(":radio")){
error.appendTo(element.parent().next().next());
}else if (element.is(":checkbox")){
error.appendTo (element.next());
}else{
error.appendTo(element.parent());
}
},
//自定义验证提示信息的统一标签、样式和内容
errorElement:"em",
//使用什么标签再把上边的errorELement包起来
//wrapper:"div",
//把错误信息统一放在一个容器里面
//errorLabelContainer:"#messageBox",
//label指向上面那个提示信息标签em，注意设置类名为success的样式，如果是提示错误信息，直接改类名为error的样式
success:function(label){
label.siblings("em").remove();//为了解决"可以啦"三个字会在每次验证正确时叠加在后面的问题
label.text("可以啦").removeClass("error").addClass("success");
},
//显示总共有多少个未通过验证的元素，用的时候会出现把这些元素的错误信息给隐藏掉的问题
// showErrors:function(errorMap,errorList){
// console.log("有"+this.objectLength(this.invalid)+"个未通过验证的元素");
// },
//修改验证的触发方式，以下均是boolean型
onsubmit:true,//提交是验证，默认为true
//以下参数虽然默认都是true，但其中有一些除非改为false，否则直接写true会报错
// onfocusout:true,//失去焦点是验证(不包括checkboxes/radio buttons)
// onkeyup:true,//在keyup时验证
// onclick:true,//在checkboxes和radio点击时验证
// focusInvalid:true,//提交表单后，未通过验证的表单会获得焦点
focusCleanup:false,//如果是true那么当未通过验证的元素获得焦点时，移除错误提示同，这时要避免和 focusInvalid 一起用
//异步验证，即使用ajax方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项
// remote: {
// url: "check-email.php", //后台处理程序
// type: "post", //数据发送方式
// dataType: "json", //接受数据格式
// data: { //要传递的数据
// username: function() {
// return $("#username").val();
// }
// }
// }
});
//自定义一个验证方法，两个参数，一个是方法名，另一是回调函数，有三个参数，第一个是当前被验证元素的值 ，第二个是当前被验证的元素，第三个是传入的参数
$.validator.addMethod("calculate",function(val,ele,param){
return val==eval(param)
//return this.optional(ele) || val==eval(param)//不要求值为必填,如果将||改成&&会出现问题
},"请正确输入数学公式计算后的结果");
//为一个单独的元素添加验证规则，前提是validate()方法必须首先被调用
$("#url").rules("add",{
required:true
});
$("#tel").rules("add",{
required:".travel:checked"//当旅游这个复选框被选中的时，手机号码就变成必填，还可以接一个function(){}，返回为真时需要验证
})
//检查是否验证通过
$(".btn_submit").on("click",function(){
console.log($(".myform").valid());
})
});
</script>
</body>
</html>
关于radio和checkbox、select的验证，radio的required表示必须选中一个，checkbox的required表示必须选中，checkbox的 minlength 表示必须选中的最小个数，maxlength表示最大的选中个数，rangelength:[2,3]表示选中个数区间，select 的 required 表示选中的 value不能为空，maxlength和rangelength:[2,3] 同上。
表单验证插件之jquery.validate.js的更多相关文章
- jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...
- 表单验证代码实例:jquery.validate.js表单验证插件
jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...
- 简单的表单验证插件（Jquery）
在做web开发的时候经常遇到表单验证问题,表单验证一般有客户端验证和服务器端验证,这个验证插件仅仅能满足我的项目中的基本需求的. Validate_Tools.js function Validate ...
- 前端编程提高之旅（十）----表单验证插件与cookie插件
实际项目开发中与用户交互的常见手法就是採用表单的形式.取得用户注冊.登录等信息.而当用户注冊或登录后又须要记住用户的登录状态.这就涉及到经常使用的两个操作:表单验证与cookie增删查找. ...
- 表单验证插件-validator.js 使用教程
做网站的时候,常常会涉及到各种表单验证.选择一款好用的表单验证插件,会降低表单验证开发的难度.在开发中,我目前使用的表单验证插件是:validator.js. validator.js 是一款轻量的表 ...
- jQuery Validate 表单验证插件----通过name属性来关联字段来验证，改变默认的提示信息，将校验规则写到 js 代码中
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js
原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352 最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...
- jQuery插件 -- 表单验证插件jquery.validate.js
最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...
随机推荐
- asp.net core 1.1 升级后，操作mysql出错的解决办法。
遇到问题 core的版本从1.0升级到1.1,操作mysql数据库,查询数据时遇到MissingMethodException问题,更新.插入操作没有问题. 如果你也遇到这个问题,请参照以下步骤进行升 ...
- asp.net webform 自定义分页控件
做web开发一直用到分页控件,自己也动手实现了个,使用用户自定义控件. 翻页后数据加载使用委托,将具体实现放在在使用分页控件的页面进行注册. 有图有真相,给个直观的认识: 自定义分页控件前台代码: & ...
- java中易遗忘的知识，不定时更新……
如果有人问你: "子类继承父类所有非私有(private)的属性和方法这句话对吗?", 如果你回答对的, 那我只能说too young too simple! 关于代码块和成员变量 ...
- [译]Godot系列教程五 - 制作Godot编辑器插件
制作插件 下文仅针对2.1版本. 关于插件 插件是为编辑器扩展出更多有用工具的重要方式.它可以完全用GDScript和标准场景开发,甚至都不需重新加载编辑器就可生效.不像模块,你无需创建C++代码.也 ...
- PHP 单例模式
一.什么是单例模式? 1.含义 作为对象的创建模式,单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统全局地提供这个实例.它不会创建实例副本,而是会向单例类内部存储的实例返回一个引用. 2. ...
- java web学习总结(二十八) -------------------JSP中的JavaBean
一.什么是JavaBean JavaBean是一个遵循特定写法的Java类,它通常具有如下特点: 这个Java类必须具有一个无参的构造函数 属性必须私有化. 私有化的属性必须通过public类型的方法 ...
- mysql can't create threads in threadpool
最近,我们在券商端的mysql运行一段时间后,发生mysql can't create threads in threadpool,如下所示: 据官网一个报告显示,目测是一个bug,内存紧张导致,那天 ...
- 做linux运维工程师，必须要掌握以下几个工具
linux系统如果是学习可以选用redhat或centos,特别是centos在企业中用得最多,当然还会有其它版本的,但学习者还是以这2个版本学习就行,因为这两个版本都是兄弟,没区别的,有空可以再研究 ...
- Android Studio多渠道打包
本文所讲述的多渠道打包是基于友盟统计实施的. 多渠道打包的步骤: 1.在AndroidManifest.xml里设置动态渠道变量 <meta-data android:name="UM ...
- 整理常用加密 iOS 与 Android 加密 MD5-SHA1
1.MD5算法 不可逆 128位或者64位串,byte数字长度就是16和8,一般表示是使用16进制来表示的话,1个byte转换成2个16bit,分别表示高地位,所以生成的字符串是16位或者是32位的, ...