Web-第四天 jQuery学习

Java帮帮

发布于 2018-07-27 14:44:37

3.5K0

文章被收录于专栏：Java帮帮-微信公众号-技术文章全总结Java帮帮-微信公众号-技术文章全总结

Web-第四天 jQuery学习

jQuery基础入门1

今日内容介绍

重写javascript案例：弹出广告
重写javascript案例：隔行换色
重写javascript案例：全选/全不选

今日内容学习目标

列举常见的五种选择器，并简单描述其作用
通过选择器，获得jQuery对象
学会给标签绑定事件
可以实现显示或隐藏标签。

第1章重写弹出广告

1.1 案例分析

重写javascript案例“弹出广告”

1.2 案例相关的函数

1.2.1 jQuery概述

1.2.1.1 什么是jQuery

jQuery是一个JavaScript框架。它兼容CSS3，还兼容各种浏览器。文档说明很全，应用详细，成熟插件多。

jQuery2.0及后续版本不再支持IE6/7/8浏览器

核心理念是write less,do more(写得更少,做得更多)

1.2.1.2 下载

1.2.1.3 引入和对象获取

学习JavaScript时，我们就学习过自定义JS库的导入，学习jQuery只需要将对应js库下载，并导入到我们项目下，在html页面使用<script>导入即可。

基本语法：jQuery(选择器) 或 $(选择器)
- 及在 jQuery中 "jQuery == $"，区分大小写

//1 获得jQuery对象

// * 命名约定：jQuery对象变量名建议以$开头。

var $demoId = $("#demoId");

注释：

//单行注释

/*块注释*/

男人谈恋爱，谈的是什么

作者：奔放的招财猫

当当广告

购买

1.2.1.4 jQuery对象和DOM转换

jQuery对象和DOM对象可以项目转换，但两个对象的函数不能彼此混搭使用。及jQuery对象只能使用自己的函数

DOM对象转换成jQuery对象，语法：jQuery(dom对象)

jQuery对象转换成DOM对象，语法：$username[index]

//1 原生javascript获得value值

var d1 = document.getElementById("demoId");

//alert(d1.value);

//2 将js dom对象转换成jQuery对象

// * 语法：$(dom对象) 或 jQuery(dom对象)

var $d2 = $(d1);

//alert($d2.val());

//3 将jQuery 转换成 dom对象

// * jQuery对象内部以数组方式存放所有的匹配数据，如果只匹配到一个，索引号为0。

var d3 = $d2[0];

alert(d3.value);

// 总结：jQuery对象和dom对象，函数(api)不能相互调用

1.2.2 基本操作

1.2.2.1 jQuery页面加载

jQuery提供ready()函数，用于页面成功加载后执行。与window.onload函数类型。

//实际开发中，我们习惯将<script>标签编写在<head>标签体内，

//整个页面的解析时从上网下的，此时将不能获得<input>对象

alert($("#demoId").length); //获得匹配对象的个数，0表示没有匹配到任何

//1 javascript页面加载

window.onload = function(){

alert("js页面加载");

}

//2 jQuery页面加载

$(document).ready(function () {

alert("jQuery页面加载");

});

* 注意：

* * js给onload只能赋一个值，如果对此赋值，后面的将覆盖前的。

* * jQuery ready可以使用多次，多个页面加载将依次执行。

</script>

<body>

</body>

1.2.2.2 基本选择器

jQuery后续的学习中，“基本选择器”使用的频率最大，我们先预先学习一下。

$(document).ready(function () {

//1 id选择器，格式：$("#id值")

var $d1 = $("#r01");

alert($d1.length); //1 ,id="r01"只有一个

//2 标签选择器，格式：$("标签名")

var $d2 = $("input");

alert($d2.length); //3，表示3个input

//3 类选择器，格式：$(".class类名")

// * length 和 size() 等效

var $d3 = $(".myClass");

alert($d3.size()); //2，表示两个input class为myClass

});

</script>

本案例中将使用到jQuery的“基本过滤选择器”、样式操作、属性操作等知识，接下来我们下了解这些知识。

1.2.3 效果（了解）

1.2.3.1 基本

通过改变元素高度和宽度显示或隐藏

show(speed ,fn) 显示

参数1 speed，显示速度，单位：毫秒。固定字符串：slow, normal, or fast

参数2fn，显示成功之后回调函数。

hide() 隐藏

toggle() 切换

1.2.3.2 滑动

通过改变元素高度显示或隐藏

slideDown() 显示，高度变大。

slideUp() 隐藏，高度变小。

slideToggle() 切换

1.2.3.3 淡入淡出

通过改变元素透明度显示或隐藏

fadeIn() 显示

fadeOut() 隐藏

fadeToggle() 切换

fadeTo(speed,opacity,[fn]) 指定透明度

参数2 opacity ：一个0至1之间表示透明度的数字

1.3 案例实现

var time;

$(function(){

// 设置定时 5秒后执行一个显示广告的函数

time = setInterval("showAd()",5000);

});

// 显示广告的函数

function showAd(){

// 获得广告的div，显示

// $("#divAd").show(1000);

// $("#divAd").slideDown(3000);

$("#divAd").fadeIn(3000);

// 清空定时：

clearInterval(time);

// 重新设置定时:

time = setInterval("hideAd()",5000);

}

// 隐藏广告的函数:

function hideAd(){

// 获得广告的div，隐藏

// $("#divAd").hide(3000);

// $("#divAd").slideUp(3000);

$("#divAd").fadeOut(3000);

// 清空定时：

clearInterval(time);

}

</script>

1.4 选择器总结

1.4.1 基本选择器

jQuery后续的学习中，“基本选择器”使用的频率最大，我们先预先学习一下。

$(document).ready(function () {

//1 id选择器，格式：$("#id值")

var $d1 = $("#r01");

alert($d1.length); //1 ,id="r01"只有一个

//2 标签选择器，格式：$("标签名")

var $d2 = $("input");

alert($d2.length); //3，表示3个input

//3 类选择器，格式：$(".class类名")

// * length 和 size() 等效

var $d3 = $(".myClass");

alert($d3.size()); //2，表示两个input class为myClass

});

</script>

1.4.2 层级选择器

A B ，获得A元素内部的所有的B元素。（祖孙）--后代

A > B ，获得A元素下面的所有B子元素。（父子）

A + B ，获得A元素同级下一个B元素（兄弟）

A ~ B，获得A元素之后的所有B元素（兄弟）

1.4.3 基本过滤选择器

:first 第一个

:last 最后一个

:not(..) 删除指定内容。例如：1234:not(3) --> 124

:even 偶数，从 0 开始计数 -- 操作索引号，页面显示奇数项

:odd 奇数

:eq(index) 指定第几个 =

:gt(index) 大于n个 >

:lt(index) 小于n个 <

--------------------------------------------------

:header 获得标题（<h1> /<h2> ....）

:animated 获得动画的

:focus 获得焦点

1.4.4 属性选择器

[属性名] 获得有属性名的元素。例如：<xxx name="username"> | <xxx name=" "> | <xxx name>

[属性名=值] 获得属性名等于值元素。

[属性名!=值] 获得属性名不等于值元素。

[...][...][...] 复合属性选择器，多个属性同时过滤。where .. and ... and ...

----------------------------------

[属性名^=值] 获得属性名以值开头元素。

[属性名$=值] 获得属性名以值结尾元素。

[属性名*=值] 获得属性名含有值元素。

1.4.5 表单属性选择器

:enabled 可用

:disabled 不可用。<xxx disabled="disabled"> | <xxx disabled=" "> | <xxx disabled>

:checked 选中（单选radio ，多选checkbox） <input type="..." checked="checked">

:selected 选择（下列列表 <select>） <option selected="selected">

第2章隔行换色：

2.1 案例介绍

重写JavaScript案例“隔行换色”

2.2 案例相关技术

2.2.1 class操作：

<xxx class=””>

addClass() 给指定标签的class属性追加样式

removeClass() 将标签指定的class属性移除

toggleClass() 切换class属性样式。及没有时添加，有的时候删除。

2.3 案例实现

CSS样式：

.even { background:#FFF38F;} /* 偶数行样式*/

.odd { background:#FFFFEE;} /* 奇数行样式*/

JavaScript代码

$(function(){

// 找奇数行：

//$("tr:odd").addClass("odd");

// 偶数行:

//$("tr:even").addClass("even");

//tr索引号大于1的所有tr

$("tr:gt(1):odd").addClass("odd");

$("tr:gt(1):even").addClass("even");

});

</script>

第3章全选和全不选

3.1 案例介绍

重写JavaScript时案例“全选/全不选”

3.2 案例相关的函数

3.2.1 属性操作：prop() 和attr()

prop() 操作的标签的特性。JQ1.6新特性，获得一些第一次分配undefined属性值的标签时，如果抛异常，将忽略浏览器生成的任何错误。
removeProp() 移除标签的特性。
attr() 设置标签属性
removeAttr() 移除标签的属性。
注意：prop() 和 attr() 使用时容易混淆，建议先使用prop() 没有效果，再使用attr()。

3.3 案例实现

// 复选框的全选和全不选:

$(function(){

// 步骤一：为上面的复选框绑定单击事件:

$("#selectAll").click(function(){

/*if(this.checked == true){

// 如果上面的复选框被选中：

$("input[name='ids']").prop("checked",true);

}else{

// 上面的复选框没有被选中

$("input[name='ids']"). prop ("checked",false);

}*/

$("input[name='ids']").prop("checked",this.checked);

});

第4章总结

jQuery基础入门扩展

第5章案例：隔行换色（另一种实现）

5.1 扩展（课外阅读）

5.1.1 相关知识点

5.1.1.1 CSS样式操作：css()

<xxx style="k:v">

css(name) 获得css值

css(name,value) 设置一对值

css(prop) 设置一组值 --> { k:v, k:v , ....}

5.1.1.2 事件绑定

jQuery提供更灵活的方式用于绑定事件，只要获得jQuery对象，就可以直接绑定事件，jQuery使用的事件与javascript使用的事件名称雷同，jQuery将js事件前面的on去掉了。例如：javascript点击称为onclick，jQuery称为click。

$(document).ready(function () {

// 格式：对象.事件名(fn);

// * jQuery事件名将js的之间前面的on去掉，例如：事件onclick，jQuery为click

$("#bId").click(function(){

alert("被点击");

});

</script>

5.1.1.3 鼠标事件：mouseover、mouseout

$("#e02").mouseover(function(){

$("#divMsg").html("鼠标移上：mouseover");

}).mouseout(function(){

$("#divMsg").html("鼠标移出：mouseout");

})

5.1.2 实现

$(document).ready(function () {

//数据展示中，偶数行的颜色设置成#FFFAE8

$("tr:gt(1):odd").css("backgroundColor","#FFFAE8");

//鼠标移上和移除变色 E8DFC4

$("tr:gt(1)").mouseover(function () {

//记录之前的颜色

$(this).attr("bgc" , $(this).css("backgroundColor"));

//设置移上背景色

$(this).css("backgroundColor","#E8DFC4");

}).mouseout(function () {

//获得之前记录的背景色

var bgc = $(this).attr("bgc");

//设置移除后之前的颜色

$(this).css("backgroundColor",bgc);

});

</script>

第6章案例：全选/全不选，反选

6.1 反选：循环checkbox，依次取反

$(function(){

// 全选

$("#selectAllId").click(function(){

$(".itemSelect").prop("checked" , this.checked);

});

// 反选

$("#reverseId").click(function(){

$(".itemSelect").each(function(){

$(this).prop("checked", !this.checked);

});

</script>

6.2 反选：回调函数，自身取反

$(function(){

// 全选

$("#selectAllId").click(function(){

$(".itemSelect").prop("checked" , this.checked);

});

// 反选

$("#reverseId").click(function(){

// 给每一个input设置与自己相反的状态

// 使用函数进行数据返回 function(){ return ...}

// 函数内部this，就是当前操作的对象 ,需要就是与自己相反 !this.checked

$(".itemSelect").prop("checked", function(){

return !this.checked;

});

</script>

6.3 点击列表项后，全选按钮是否选中

$(function(){

// 全选

$("#selectAllId").click(function(){

$(".itemSelect").prop("checked" , this.checked);

});

// 每一个列表项绑定事件，如果不是全部勾选，那么“全选”按钮不勾选

$(".itemSelect").click(function(){

$("#selectAllId").prop("checked",$(".itemSelect").length ==$(".itemSelect:checked").length);

});

</script>

jQuery基础入门2

今日内容介绍

重写javascript案例：省市联动
重写javascript案例：左右选择
重写javascript案例：表单校验

今日内容学习目标

能够使用jQuery为标签添加属性或样式
能够为指定标签添加子标签或兄弟标签
学会给标签绑定事件

第7章省市联动

7.1 案例分析

重写javascript案例“省市联动”

7.2 案例相关的函数

本案例需要对标签的value属性值，标签体内容进行操作，并需要遍历所有的市。

7.2.1 属性操作：val、text、html

val() 获得value属性的值

val(...) 给value属性设置值

html() 获得html代码，如果有标签，一并获得。

html(....) 设置html代码，如果有标签，将进行解析。

text() 获得文本，如果有标签，忽略。

text(....) 设置文本，如果含有标签，不进行解析。原样输出。

7.2.2 遍历函数：each

方式1：$(ele).each( fn );
方式2：$.each( $ele , fn );
回调函数fn：function(index , docEle)
- 参数1：遍历索引号
- 参数2：遍历当前对象 docEle == this （dom对象）

// each(fn) 函数

$("input:hidden").each(function(){

//alert( this.value );

alert( $(this).val() );

});

// $.each(对象,fn) 全局函数

// * each回调函数

// ** 参数1：遍历索引号

// ** 参数2：遍历当前对象 docEle == this

$.each($("input:hidden"), function(index,docEle){

alert( index + " -- " + docEle.value );

});

7.2.3 文档处理：内部插入

A.append(B) , 将B插入到A内部后面。

<A>

....

<B></B>

</A>

A.prepend(B) , 将B插入到A内部前面。

<A>

<B></B>

....

</A>

---------------------------------------------------

A.appendTo(B) ，将A插入到B内部后面

A.prependTo(B) ，将A插入到B内部前面。

7.3 案例实现

// 定义二维数组:

var cities = new Array(4);

cities[0] = new Array("市辖区","县");

cities[1] = new Array("长春市","吉林市","松原市","延边市");

cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");

cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");

cities[4] = new Array("南京市","苏州市","扬州市","无锡市");

$(document).ready(function () {

// 给省绑定change事件

$("#provinceId").change(function () {

//获得省value值,及索引号

var pIndex = $(this).val();

// 获得对应的市

var allCity = cities[pIndex];

// 遍历

$("#cityId").html("<option value=''>----请-选-择-市----</option>");

$(allCity).each(function (i) {

$("#cityId").append( "<option value=’’>"+allCity[i]+"</option>");

});

</script>

第8章左右选择

8.1 案例分析

本案例我们jQuery的“层级选择器”、“表单属性过滤选择器”、“文档处理”。通过“层级选择器”获得需要的操作对象，通过“表单属性过滤选择器”从已有的对象中筛选出需要的，最后通过“文档处理”将筛选后的内容追加到指定的位置。

8.2 案例实现

$(document).ready(function () {

$("#left1").click(function () {

$("#leftSelectId option:selected:first").appendTo($("#rightSelectId"));

});

$("#left2").click(function () {

$("#leftSelectId option:selected").appendTo($("#rightSelectId"));

});

$("#left3").click(function () {

$("#leftSelectId option").appendTo($("#rightSelectId"));

});

</script>

8.3 总结

8.3.1 常见事件

8.3.2 事件切换

hover( over , out ) 简化方法

A.hover( fn1 , fn2) 等效 A.mouseover( fn1 ).mouseout( fn2 )

toggle( fn1 , fn2 , .... ) click事件增强版，轮回。（1.8.3版本可用，其他高版本不可用）

第9章表单校验

9.1 案例介绍

在学习JavaScript时，我们手动的完成过表单数据的校验，此功能在开发中非常常见，属于通用功能范畴，实际开发一般使用都是第三方工具。本案例我们将使用jQuery插件validation进行表单的校验。

9.2 案例相关知识：validation校验

9.2.1 下载

官网地址：http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip
帮助文档位置：http://jqueryvalidation.org/documentation/
目录结构：

9.2.2 导入

validate是jQuery插件，及必须在jQuery的基础上进行运行。我们将导入jQuery库、validate库、和国际化资源库（可选）

9.2.3 使用前提

validate需要手动的声明，对那个表单进行校验，及需要手动调用validate()方法。

$().ready(function () {

$("#formId").validate();

});

</script>

校验类型	取值	描述
required	true\|false	必填字段
email	email	邮件地址
url		路径
date	数字	日期
dateISO	字符串	日期（YYYY-MM-dd）
number		数字（负数，小数）
digits		整数
minlength	数字	最小长度
maxlength	数字	最大长度
rangelength	[minL,maxL]	长度范围
min		最小值
max		最大值
range	[min,max]	值范围
equalTo	jQuery表达式	两个值相同
remote	url路径	ajax校验

9.3 检验方式：js 代码方式

语法：

$(…).validate({

rules:{},

messages:{}

});

rules 规则语法：

rules:{

字段名:校验器,

字段名:校验器

}

校验器语法：

语法：{校验器:值,校验器:值,...}

message 提示语法：

message:{

字段名:{校验器:"提示",校验器:"提示",...}

}

$("#formId").validate({

rules:{

username:{

required：true

password:{

required:true,

rangelength:[2,5]

repassword:{

equalTo:"[name='password']"

}

messages:{

username:{

required:"不能为空"

password:{

rangelength:"长度{0}-{1}之间"

}

});

9.4 案例实现

js代码

$().ready(function () {

$("#formId").validate({

rules:{

loginname:{

required:true,

minlength:2,

maxlength:5

loginpwd:{

required:true,

number:true

reloginpwd:{

equalTo:"[name='loginpwd']"

email:"email",

username:{

required:true,

rangelength:[2,5]

gender:{

required:true

}

messages:{

gender:{

required:"性别必须勾选"

}

});

</script>

html代码

<input type="radio" name="gender" value="男" />男

<input type="radio" name="gender" value="女" />女

<!--在指定位置显示错误信息

* class 必须是error

* for 必须设置错误对象

-->

9.5 高级：自定义校验

9.5.1 概述

jquery.validate.js jQuery插件，对jQuery进行增强，添加了validate()函数，用于对表单进行校验。validate()函数内部，调用的是$.validator定义函数进行处理，如果希望自定义校验规则，需要使用$.validator.addMethod完成。

$.validator.addMethod(name , method , message);

参数1：name，校验规则的名称。例如：required

参数2：method，执行校验时使用的处理函数。返回true表示校验通过，返回false表示校验未通过。

function(value , element , params ){} ,处理函数被调用时，可以获得3个参数。

参数value：表单项的value值。例如：<input value="">

参数element：被校验的表单项对象。

参数params：使用当前校验规则传递的值。例如：rules : { 参数1Method : 参数params }

参数3：message，校验未通过时的提示信息。

9.5.2 提供表单

<table>

<tr>

<font color="#3164af">会员注册</font> USER REGISTER

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

</table>

</form>

9.5.3 编写自定义校验规则

先注册校验规则：长度校验器 cardlength

/* 1）校验规则名称：cardlength

* 2）校验处理函数：fn(value , element , params)

* * value : 当前文本框输入的内容

* * element : 当前文本框

* * params : 校验的具体参数，[15,18]

* 3）校验提示信息：身份证长度必须是{0}或{1}

* * {0} 可以获得 params第一个参数

$.validator.addMethod("cardlength",function(value,element,params){

if(value.length==15 || value.length==18){

return true;//校验通过

}

return false;//未通过

},"身份证长度必须是{0}或{1}");

先注册校验规则：

/* 如果参数为true进行校验，如果参数为false不进行校验。

* * 进行校验时，长度15：都是数字；长度18：都是数字或末尾为X或x

* 1）校验规则名称：cardformat

* 2）校验处理函数：fn(value , element , params)

* * value : 当前文本框输入的内容

* * element : 当前文本框

* * params : 校验的具体参数，true

* 3）校验提示信息：身份证格式不正确

$.validator.addMethod("cardformat",function(value,element,params){

// 参数必须是boolean

if(typeof params != "boolean"){

return false;

}

//参数为true，需要进行校验

if(params){

if(value.length==15){

//15位：都是数字

var reg = /^[0-9]{15}$/;

return reg.test(value);

}else if(value.length==18){

//18位：都是数字或末尾是X

var reg = /^[0-9]{18}|[0-9]{17}[X|x]$/;

return reg.test(value);

}

// 格式不符合

return false;

}

//参数为false，不需要进行校验

return true;

},"身份证格式不正确");

使用校验规则

$("#formId").validate({

rules:{

username:{

required:true,

rangelength:[5,8]

card:{

required:true,

cardlength:[15,18],

cardformat:true

}

});

9.5.4 编写自定义提示

$("#formId").validate({

rules:{

username:{

required:true,

rangelength:[5,8]

card:{

required:true,

cardlength:[15,18],

cardformat:true

}

messages:{

username:{

required:"用户名不能为空",

rangelength:"用户名的长度是5到8"

card:{

required:"身份证必须写",

cardlength:"身份证长度{0}位或{1}位",

cardformat:"身份证的格式不正确"

}

});

第10章总结

jQuery基础入门2案例

第11章模拟用户分组

11.1 案例介绍

使用jQuery模拟用户分组，要求如下：

1.页面加载不显示所有分组的列表项。

2.点击分组名称，显示当前分组列表。

3.点击分组名称，将隐藏其他分组的列表项。

11.2 案例相关知识：

函数名	描述
children()	所有的子元素
prev()	获得上面的兄弟
nextAll()	获得下面的所有兄弟
parent()	获得父元素
siblings()	所有兄弟
find()	查询指定内容

11.3 案例实现

步骤1：html代码内容

div *{

display:block;

width:200px;

}

div span{

background-color : #0f0;

}

</style>

<div>

<span>JavaEE组</span>

</div>

<div>

<span>Android组</span>

</div>

<div>

</div>

步骤2：添加js代码

$(function(){

$("div").children("a").hide().prev("span").click(function(){

$(this).nextAll().show(500).parent().siblings().find("a").hide(500);

});

</script>

jQuery基础入门案例扩展--校验

第12章表单校验加强

12.1 案例介绍

12.2 案例相关知识：validation校验

12.2.1 下载

官网地址：http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip
帮助文档位置：http://jqueryvalidation.org/documentation/
目录结构：

12.2.2 导入

validate是jQuery插件，及必须在jQuery的基础上进行运行。我们将导入jQuery库、validate库、和国际化资源库（可选）

12.2.3 使用前提

validate需要手动的声明，对那个表单进行校验，手动方式可以使用以下4种检验方式。

$().ready(function () {

$("#formId").validate();

});

</script>

12.2.4 检验方式1：类class （了解）

表单元素的class属性中，编写需要检验类型，此种校验方式，校验类型种类有限。

语法：<标签 class=”类型1 类型2 …..”> //多个类型使用空格隔开

用户名：<input type="text" name="username" class="required "/> <br/>

密码：<input type="password" name="password" class="required number"/> <br />

密码：<input type="text" name="repassword"/> <br />

</form>

12.2.5 检验方式2：属性attr（了解）

使用标签的属性，可以完成提供所有校验类型。

语法：<标签类型=”值” 类型=”值”>

校验类型	取值	描述
required	true\|false	必填字段
email	@	邮件地址
url		路径
date	数字	日期
dateISO	字符串	日期（YYYY-MM-dd）
number		数字（负数，小数）
digits		整数
minlength	数字	最小长度
maxlength	数字	最大长度
rangelength	[minL,maxL]	长度范围
min		最小值
max		最大值
range	[min,max]	值范围
equalTo	jQuery表达式	两个值相同
remote	url路径	ajax校验

用户名：<input type="text" name="username"

required="true" minlength="2" maxlength="5"/> <br/>

密码：<input type="password" name="password"

required="true" number="true"/> <br />

密码：<input type="password" name="repassword"

required="true" equalTo="[name='password']"/> <br />

</form>

12.2.6 检验方式3：html5 data（了解）

采用了HTML5 “data-”机制，提供数据，jQuery提供 data()函数可以获得由“data-”设置的值。

语法：<标签 data-rule-类型=”值”>

jQuery获得语法：$(ele).data(rule类型) ，

例如：$(ele).data(“ruleRequired”); //去掉前缀“data-”，每一个横杆后面的单词首字母大写

例如：

<!--

格式：data-rule-校验器名称="值"

* 底层通过 $(ele).data("ruleRequired")获得数据

-->

用户名：<input type="text" name="username"

data-rule-required="true"

data-rule-minlength="2"

data-rule-maxlength="5"/> <br/>

密码：<input type="password" name="password"

data-rule-required="true"

data-rule-number="true"/> <br />

密码：<input type="password" name="repassword"

data-rule-required="true"

data-rule-equalTo="[name='password']"/> <br />

</form>

js代码校验，更佳灵活

12.3 检验方式4：js 代码

语法：

$(…).validate({

rules:{},

messages:{}

});

rules 规则语法：

rules:{

字段名:校验器,

字段名:校验器

}

校验器语法：

语法1："校验器"

语法2：{"校验器":"取值","校验器":"取值",...}

message 提示语法：

message:{

字段名:{"校验器":"提示","校验器":"提示",...}

}

$("#formId").validate({

rules:{

username:"required",

password:{

required:true,

rangelength:[2,5]

repassword:{

equalTo:"[name='password']"

}

messages:{

username:{

required:"不能为空"

password:{

rangelength:"长度{0}-{1}之间"

}

});

12.4 案例实现

js代码

$().ready(function () {

$("#formId").validate({

rules:{

loginname:{

required:true,

minlength:2,

maxlength:5

loginpwd:{

required:true,

number:true

reloginpwd:{

equalTo:"[name='loginpwd']"

email:"email",

username:{

required:true,

rangelength:[2,5]

gender:{

required:true

birthday:"dateISO"

/*,

verifyCode:{

remote:"t.html"

},*/

messages:{

gender:{

required:"性别必须勾选"

}

});

</script>

html代码

<input type="radio" name="gender" value="男" />男

<input type="radio" name="gender" value="女" />女

<!--在指定位置显示错误信息

* class 必须是error

* for 必须设置错误对象

-->

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2018-06-25，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery

java

本文分享自 Java帮帮微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

jquery

java