大多数人,都低估了编程学习的难度,而高估了自己的学习能力和毅力。
当前系列: Bootstrap和JQuery 修改讲义

事件

事件绑定在JQuery对象上,所以可以一次绑定多个DOM元素,正如前文所述ready():保证所有DOM元素加载完毕。

JQuery推荐的是使用on()和off(),绑定和解除绑定(对标add/removeEventListener):

$('h1').on('click', function(){

JQuery的off()方法,可以只传一个参数:事件类型,就接触元素上所有该类型事件绑定:

$('h1').off('click');

但飞哥更喜欢其简写方法:click()/ change()/keypress()……(没有on的前缀):

$('a').click(function(event){
  1. 使用事件的冒泡机制,不支持事件捕获
  2. event正常使用
    event.preventDefault();
  3. $(this)更好用
    $(this).hide();

事件仍然可以模拟触发:click()/select()……

复习:JQuery起手式#理解#它的含义,当document准备(ready)好了……

PS:其他简写:$().ready() / $()……

$().ready(function () {    //省略document
$(function () {    //省略ready

one()

有时候我们希望事件仅触发一次,传统的做法是在事件触发后diable按钮之类的,

但JQuery为我们提供了一个更优雅的实现:

$('h1').one('click', function(){

链式书写 

比如有时候我们需要对一个JQuery对象进行一系列的操作,设置样式、绑定事件等,可以:
$('p')
    .css('font-weight', '800')
    .width('200px')
    .mouseover(function () { $(this).addClass('red'); })
    .mouseout(function () { $(this).removeClass('red'); }
    );

注意

  • JQuery并没有创建一种“新”的语法
  • 能够链式的原因仅仅是这些JQuery方法返回的依然是一个JQuery对象而已
    let $p = $('p');
    $p === $p.width(500)    //true
  • 如果JQuery方法返回的是其他JQuery对象(比如parent()),后面的JQuery方法将作用于新的JQuery对象。
    $p === $p.parent()    //false


表单

引入form表单

选择器

JQuery为form表单元素提供了一些简写方式:

  • input type='*'的
    $('input[type="text"]') //简写为:
    $(':text')
    以及:
    $(':submit')   //提交按钮
    $(':radio')    //radio button
  • 被选中的:
    $(':radio:checked')
    $('select>option:checked').text()
  • 被禁用的:
    $(':disabled')

常用属性/方法

val()

取值/赋值

  • 文本:text 和 textarea
    $(':text').val()
    $('textarea').eq(0).val()
  • 选择:check 和 radio
    $(':radio').val()    //第一个(不是)选中的radio的value
    $(':checkbox:checked').val()   //被选中的checkbox的value
  • 下拉列表:select,选中项的value
    $('select').val()

is()

传递不同的参数,判断是否被:

  • 是否同一个jquery对象。比如判断两个元素是否为“兄弟”节点,可以比较他们的父节点:
    //但是,不能用==,
    $('#a').parent()==$('#b').parent()
    //而是用is:
    $('#a').parent().is($('#b').parent())
  • 选中:':checked'
    $(':radio').eq(1).is(":checked")
  • 禁用:":disabled"
    $(':submit').is(":disabled")
    

attr()和prop()

复习:DOM的“属性”可以用两种方式读写

  • attr():对应的是setAttribute()和getAttribute()
  • prop():对应的是能“.”出来的对象属性

在浏览器将HTML解析成DOM树的过程中,通常(但又不是全部)都会将其attribute封装成property

JQuery中,对form表单设置选中/禁用/只读等时,建议总是使用prop():

$(':text').attr('disabled', true)     //生效
$(':text').prop('disabled', false)    //生效

$(':radio').eq(1).prop('checked', true)     //生效
$(':radio').eq(0).attr('checked', true)      //不能生效!


表单验证

form表单中JavaScript参与最多的一个功能就像验证,比如:

  • 某个文本框不能为空(必须填写)
  • 填写的内容必须是email格式
  • 甚至两个文本框中输入的内容必须相同,等等

演示:注册页面的验证

注意:前端没有“安全性”可言,服务器端必须再次独立验证!

后端永远不要相信前端。

@想一想@:那为什么还需要前端验证呢?

  • 性能优化:不需要“浪费”一次向服务器端的请求
  • 更快的响应速度:JavaScript直接在页面执行
  • 更好的用户体验:没有页面刷新的闪烁

jquery.validate.js

jquery.validate.js(以下简称validate)是最流行的、基于jquery的客户端验证类库/插件(后文详述)

PS:ASP.NET项目内置,直接引入,其他复制粘贴或npm

注意顺序,validate必须啊jquery.js后面。

演示:一个最简单的验证效果

  • 提交激活
  • 阻止了请求提交
  • 之后随输入自动变化

验证的实现由

三个部分

组成:

  • method:即具体的验证逻辑,validate内置了一些常用的mehtods:

  • message:当验证未能通过时,为用户显示的消息,validate为其methods内置了messages:

  • rule:将method和message作用于某个具体的element(form表单元素),有时候rule name和method name可以混用

validate提供了两种方法设定rule

这其实就是开发人员需要做的:

声明在HTML标签

在表单元素的html标签上添加属性:

  • required指明该input必须有值
    <input type="text" name="username" required />
  • minlength指明该input输入值长度最小为4
    <input type="password" name="password" required minlength="4" />
  • number为true。注意:这里的true不能省略,建议require的true值也不要省略(省略是为了配合HTML5新语法规则)
    <input type="text" name="username" number="true" required max="100" min="0"  />
  • 两个表单值相等,属性值是JQuery选择器:
    密码:<input type="password" name="password" id="password" />
    确认密码:<input type="password" equalTo="#password" />
  • ……

validate生效,需要被激活:(演示效果)

$('form').validate();

声明在validate()方法

validate()方法还可以接受一个options参数(对象),其中就可以设定rule:

$('form').validate({
    rules: {
        username: {
            required: true
        }
    }
});
其中,username是被验证element的name,required是validate内置的method名。上述代码还可以简写为:
rules: {
    username: "required"
}
另外,rules中还可以设定多个rule,每个rule中也可以设定多个method,比如:
rules: {
    username: "required",
    password: {
        required: true,
        minlength: 4    //4被认为是参数param
    }
}

且validate()方法中的设置优先级更高。演示:require:false……

自定义message

validate()中的option还可以包含:

  • messages:验证失败消息
  • errorClass:message的样式
$('form').validate({
    rules: {/*同上*/},
    messages: {
        password: {
            required: "* 不能为空",
            minlength: "* 不能少于4个字符"
        }
    },
    errorClass: "red"
});
另外,可以全局性的将默认的英文message转化成中文。利用JQuery的插件(extend)机制:
$.extend(
    $.validator.messages, { 
        required: "必选字段",
        email: "请输入正确格式的电子邮件",
        minlength: "长度……"
    }
)

推荐做法,将此文件放入messages_cn.js中,在页面中(jquery.validation.js之后)引入:

<script src="../messages_cn.js" ></script>

选择性验证

我们经常会有这样的需求:某个表单元素在某种特定条件下才需要验证。比如,学习计划,在用户选择了“学习课程”之后才必填。

<select name="courses">
    <option value="">-----</option>
    <option value="front">前端</option>

有以下两种方案:

  1. 利用JQuery校验disabled/readonly/hide的元素,只有当用户选择了学习课程”之后才enable“学习计划
    $('select').change(function(){
        $('textarea').prop('disabled', $(this).val() == "");
    })
  2. 利用回调函数:
    rules: {
        'study-plan': {
            required: function(element){
                console.log(element); //element:当前元素
                return $('select').val() != '';
            }

另,要验证隐藏的元素(不ignore):

$('form').data("validator").settings.ignore = "";

rules()

有时候还需要我们动态的添加/删除一些rule,这就需要调用rules()方法:

  • 如果不带参数,返回该元素的所有rules
    console.log($('#userName').rules());
  • 第一个参数'add',第二个参数被添加的rule,可以是字符串,
    $('#userName').rules('add', "required")
    也可以是object
    $('#userName').rules('add', {
        required: true,
        minlength: 4,
        messages:{
            minlength: '* 至少4个字符'
  • 第一参数'remove',第二个参数
    1. 缺省:删除所有的rule
      $('#userName').rules('remove');
    2. 指定某一个或多个(用空格分开的)rule名字,删除该rule
      $('#userName').rules('remove', 'required');
      $('#userName').rules('remove', 'min max');
    注意删除的能是通过属性声明的rule,要禁用这种rule,可以:
    $('#userName').removeAttr('required');

另外,以上操作都要在$('form').validate()之后才能有效。

自定义method

validation类库自带的验证不够用了,比如:输入的值不能比另一个元素中定义的值大(演示:悬赏帮帮币

就可以使用$.validator.addMethod(name,method,message)添加自定义的验证方法:

  • name:method的名字,不能重复
  • message:自定义的错误提示

其中,参数method是一个回调函数,又可以包含三个参数:

  • value:用户输入/选择的值
  • element:被验证的element(JQuery)对象
  • param:比如上文minlength对应的4
<input type="text" lessThan="#threshold"  /></label>(最高<span id="threshold">20000</span>
$.validator.addMethod('lessThan',
    function (value, element, param) {
        return +value < parseInt($(param).text()); 
    },
    '* 不能够大于预定值');


remote验证

PS:可以在学习下一章JQuery Ajax之后再继续学习。

演示:用户名不能重复

背后其实是通过Ajax远程(remote)获取验证结果,这就需要使用remote:

rules: {
    username: {
        required: true,
        remote: {
            url: "/hasName.json",  //Ajax请求发送地址
            type: "get",    //因为演示只能使用GET  
            data: {                     
                username: function () {
                    //要传递的数据
                    return $("#username").val();

演示:/hasName.json应返回true/false,表示验证通过/未通过。

注意:默认每一次我们按键,都会触发Ajax请求,如果我们(因为性能原因)不想这样的话,可以设置:

rules: {
    //......
},
onkeyup: false,

学习笔记
源栈学历
今天学习不努力,明天努力找工作

作业

  1. JQuery Validation: 利用JQuery Validation组件,完成登录注册(含remote用户名已使用)、和求督促(起始时间/至少一个)页面的验证。
  2. JQuery重新实现: 利用JQuery重新实现之前的事件引入事件种类的作业。
觉得很 ,不要忘记分享哟!

任何问题,都可以直接加 QQ群:273534701

在当前系列 Bootstrap和JQuery 中继续学习:

多快好省!前端后端,线上线下,名师精讲

  • 先学习,后付费;
  • 不满意,不要钱。
  • 编程培训班,我就选源栈

更多了解 加:

QQ群:273534701

答疑解惑,远程debug……

B站 源栈-小九 的直播间

写代码要保持微笑 (๑•̀ㅂ•́)و✧

公众号:源栈一起帮

二维码