我的学习之路_第二十八章_JQuery 和validator插件
jQuery
利用jQuery进行遍历
js原生:
for(var i=0;i>?;i++){ }
jQuery:
方式一: 想要遍历的jQuery对象.each(function(index,dom){ });
方式二: $.each(想要遍历的jQuery对象,function(index,dom){ });
操作元素的值或者标签体
xxx():获取操作
xxx("值"):设置
获取或设置值: val();
获取或设置标签体: html()
获取或设置标签体: text()
html和text的区别在于前者会解析,后者不会
插入操作:
内部插入:
append() a.append(b) 将后者插入到前者的后面
prepend() a.prepend(b) 将后者者插入到前者的前面
appendTo() a.appendTo(b) 将前者插在后者的后面
prependTo() a.prependTo(b) 将前者插在后者的前面
外部插入:
after() a.after(c) 在a的后面添加c
before() a.before(c) 在a 的前面添加c
内部插入和外部插入的区别: 内部插入可以在元素的内部插入元素
外部插入在同级元素插入元素
清除操作:
empty();清除
remove();移除,自杀
select下拉选择框
属性:
multiple:值multiple规定可以多选
size:控制显示项目的数目
表单对象属性过滤选择器
:enabled 可用的
:disabled 不可用
:checked (针对的是radio checkbox)
:selected 下拉选择框
【validator插件】
这个插件是基于jQuery写的,所以在引入插件的时候也必须引入jQuery
使用:
1.首先引入jQuery库
2.引入validator的库
3.在页面加载成功之后指定你想要验证的表单
$(function(){
$("选择器").validate();
})
4.validator方法的使用
$("选择器").validate({
rules:{ } //规则
messages:{ } //提示
})
5.常见的规则
required: true|false (必须填写)
number: true|false (必须填写数值类型)
min: 5 (最小值:写的数字必须大于五)
max: 5 (最大值:写的数字不能大于五)
range:[min,max] (区间:写的数字只能在这个区间)
maxlength:
minlength:
rangelength:
equalTo:"选择器" (密码和确认密码,所以的元素必须和选择器中的一样)
digits:整数 (只能写整数)
email:email (邮箱验证)
6.规则的书写格式:
$("选择器").validate({
rules:{ //书写格式 }
messages:{ }
})
书写格式:方式一:
想要校验的字段的name属性名:"规则名"
方式二:
想要校验的字段的name属性名:{
"规则1":值,
"规则2":值
}
7.自定义错误提示信息
书写格式:
方式一:
想要校验的字段的name 属性名:"提示信息"
方式二:
想要校验的字段的name属性名:{
"规则1":"提示信息1",
"规则2":"提示信息2"
}
8.validate的自定义规则
$.validator.addMethod(name,fn,message);
name:规则名
fn:
function(value,element,params){
value:用户输入的值
element:元素本身
params:参数
}
//必须有返回值boolean
message:默认的提示信息
扩展内容
筛选:
children():获取子元素
parent():获取父元素
find():获取后代元素
next():大弟弟
nextall():所有弟弟
prev():小哥哥
prevall():所有的哥哥
siblings():所有的兄弟
is():判断是否是指定的元素
我的学习之路_第二十八章_JQuery 和validator插件的更多相关文章
- 我的学习之路_第二十五_javaScript
Javascript 作用:可以对表单数据进行校验,可以对页面实现一些动态效果 定义: JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型. 它的解释器被称为 ...
- 我的学习之路_第二十九章_bootstrap
bootstrap 内置了html,css,js插件为一体的前端框架 响应式布局: 设计一套页面就可以使用于很多现实设备 bootstrap: 1.入门(响应式布局的容器) 1.先进入jQuery的j ...
- 我的学习之路_第二十七章_jQuery
jQueryjs类库 把常用对象或者方法封装起来,让我们写代码效率更高 1.jQuery 2.extjs [jQuery入门] jQuery的引入: 通过script标签的src属性引入 入门: 获取 ...
- 我的学习之路_第二十三章_HTML
Html : 超级文本语言 ( Hyper text Markup Language ) HTML 文件扩展名是 * .html HTML 结构都是有标签组成 通常情况下标签有开始标签和结束标签组成 ...
- 我的学习之路_第二十章_JDBC
JDBC 使用JDBC技术,通过mysql提供的驱动程序,操作数据库 ● 1. 注册驱动 告知jvm 使用的是什么驱动程序(mysql,oracle) 使用API中的类 DriverManager中的 ...
- 我的学习之路_第二十一章_JDBC连接池
JDBC连接池和DButils [DBCP连接池工具类] 使用读取配置文件的方式 DBCP中有一个工厂类 BasicDataSourceFactory 工厂类中有一个静态方法 返回值为: DataSo ...
- Python之路【第二十篇】:待更新中.....
Python之路[第二十篇]:待更新中.....
- FastAPI 学习之路(四十六)WebSockets(二)
上一篇文章,我们分享了WebSockets一些入门的,我们这节课,在原来的基础上,对于讲解的进行一个演示.我们最后分享了依赖token等.首先我们对上次的代码进行调整. 我们之前分享FastAPI 学 ...
- FastAPI 学习之路(五十六)将token存放在redis
在之前的文章中,FastAPI 学习之路(二十九)使用(哈希)密码和 JWT Bearer 令牌的 OAuth2,FastAPI 学习之路(二十八)使用密码和 Bearer 的简单 OAuth2,Fa ...
随机推荐
- 小议 - 来自《XX时代XX公司》的笔试编程题目
经过几天的雾霾,魔都终于放晴了.哥投了几天的简历,希望找到一份.NET开发方面的岗位.也收到了几个面试邀请.这不应Ge老师的要求,选了个良辰吉日,带着身份证,学位证怀揣着2B青年的梦想来这个XX公司面 ...
- TCP三次握手与四次分手
TCP简介 首先来看看OSI的七层模型: 我们需要知道TCP工作在网络OSI的七层模型中的第四层--Transport层,IP在第三层--Network层,ARP在第二层--Data Link层:在第 ...
- 自研框架wap.js实践
示例 使用分为3个步骤: 1, 配置模板渲染中心,方便别人可以看到你的模板渲染,请求是什么关系,复杂度怎样 2, 配置事件分发中心 方便观察事件分发,事件复杂度 3,写对应的请求方法.渲染方法. ...
- 命令查看服务器SN号
今天工作的时候,为了检查一台服务器的序列号,没必要在跑到机房里了,所以在系统下就可以看机器序列号了.如下: 1.linux取序列号: 命令执行:dmidecode |grep "Serial ...
- MyBatis源码分析之环境准备篇
前言 之前一段时间写了[Spring源码分析]系列的文章,感觉对Spring的原理及使用各方面都掌握了不少,趁热打铁,开始下一个系列的文章[MyBatis源码分析],在[MyBatis源码分析]文章的 ...
- 同是办公软件,wps和office有什么区别?
今天完美小编为大家带来的是wps和office有什么区别教程,那么到底有什么区别呢?相信很多朋友都模棱两可,说不出所以然,看看下面的教程,相信你会选择更适合你的那一款软件.一起来看看吧! 1.两者特点 ...
- JAVAEE——struts2_04:自定义拦截器、struts2标签、登陆功能和校验登陆拦截器的实现
一.自定义拦截器 1.架构 2.拦截器创建 //拦截器:第一种创建方式 //拦截器生命周期:随项目的启动而创建,随项目关闭而销毁 public class MyInterceptor implemen ...
- 在项目中利用TX Text Control进行WORD文档的编辑显示处理
在很多文档管理的功能模块里面,我们往往需要对WORD稳定进行展示.编辑等处理,而如果使用微软word控件进行处理,需要安装WORD组件,而且接口使用也不见得简单易用,因此如果有第三方且不用安装Offi ...
- arcgis api for js入门开发系列十叠加SHP图层
上一篇实现了demo的热力图,本篇新增叠加SHP图层,截图如下: 叠加SHP图层效果实现的思路如下:利用封装的js文件,直接读取shp图层,然后转换geojson,最后通过arcgis api来解析转 ...
- memcache基础
一.Memcache是一种缓存技术(内存),你可以把它想像成一张巨大的内存表,形式如下[它就是一个服务] key value key值(字符串) 可以放(字符串[二进制数据[视频.音频.图片]],数值 ...