JQuery:客户端验证:validate和unobtrusive

更多
2020年07月20日 10点46分 作者:叶飞 修改

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

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

演示:注册页面的验证

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

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

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


jquery.validate.js

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

ASP.NET项目内置,直接引入,注意顺序,validate必须啊jquery.js后面。

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

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

验证的实现由三个部分组成:

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

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

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

validate提供了两种方法设定rule:

  • validate()方法。validate需要激活:
    $('form').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
        }
    }
  • html标签属性:
    <!--required指明该input必须有值-->
    <input type="text" name="username" required />
    <!--minlength指明该input输入值长度最小为4-->
    <input type="password" name="password" required minlength="4" />
    为了契合和Html5规范,validate的一些内置method可以不用带属性值(默认为true),但我们自定义method时,必须声明属性值(会被作为后文method的参数param),否则验证无法生效(除非再采取其他手段,略)

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

  • messages:验证失败消息
  • ignore:忽略某些element的验证
  • onsubmit:自定义表单提交时事件处理程序
  • errorClass:message的样式
  • ……


自定义method

需要使用$.validator.addMethod(name,method,message)方法:
  • name:method的名字,不能重复
  • message:自定义的错误提示

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

  • value:用户输入/选择的值
  • element:被验证的element(JQuery)对象
  • param:比如上文minlength对应的4


unobtrusive

观察由ASP.NET TagHelper / HtmlHelper生成的表单元素:

<input type="text" data-val="true" data-val-required="* 必须填写" id="Register_UserName" name="Register.UserName" value=""> 

以及他们相应的错误消息元素:

<span class="field-validation-valid" data-valmsg-for="Register.UserName" data-valmsg-replace="true"></span>

为什么会有这些以 data-val 开头的属性呢?


实现机制

为了集成服务器/客户端验证,微软基于validate开发出jquery.validate.unobtrusive.js插件(以下简称unobtrusive)。

生成的form表单元素中data-开头的属性,都是为unobtrusive准备的。unobtrusive利用:

  • data-val="true" :知道要对该元素进行验证(val是validate的简写)
  • data-val-required="* 必须填写":
    • required:对应validate中的method name
    • "* 必须填写":对应validate中的message

还可以有验证参数,比如使用[MinLength(4)]之后,会有属性:

  • data-val-minlength-min="4",minlength对应method name,min="4"对应参数名(min)和值(4)

data-valmsg-for="inputname"等也是类似的作用。

然后,unobtrusive根据以上属性自动设定rule并进行验证,于是开发人员就不用再:

    $("form").validate();

演示:在HTML页面再引入unobtrusive(一样要注意引入顺序,必须在validate之后),不需要任何额外的代码,就能实现验证效果。

而且,因为unobtrusive实际上应用了validate,所以validate中存在的方法,unobtrusive页面一样可以使用,比如:

$('form').valid()    //再验证form表单一次


自定义实现

一些特殊的情况下,我们可能还要利用unobtrusive实现自定义的验证。尤其是验证需要不止一个元素的时候,比如:

  • 一个元素中的值不能大于/小于另一个元素(中的值)
  • 一组元素至少选中其中一个
  • ……
其核心在于:


利用参数

新的验证规则首先还是要使用addMethod()添加新的method,但是,注意其回调函数中可以传入一个param:
            $.validator.addMethod("creditEnough", function (value, element, param) {
                return this.optional(element) ||  //element的值不为空时才触发验证 parseInt(value) <= parseInt($(param).text());
            }, "* 出售的帮帮币大于可出售帮帮币");

添加adapter

$.validator.unobtrusive.adapters.add("enough", ["id"], function (options) {
    //options.rules["enough"] = options.params.id;
    options.rules.enough = options.params.id;
    //options.messages["enough"] = options.message;
    options.messages.enough = options.message;
})

因为缺乏对unobtrusive的全面认识,从逻辑上看有些难以理解,

  • adapter:适配器,将unobtrusive和validate“适配”起来,或者讲unobtrusive转化成validate
  • creditEnough:method name,该rule使用哪一个method(adapter还可以理解成:设立一个规则)
  • ["id"]:必须是一个数组,可选,指定哪些参数被采用
  • 其中,options的
    左边的rules和messages是要建立的rule和message,一开始是空的。是所有的参数值
    右边的params和message是从HTML标签中取出来的,

要生成一个rule:credit=""

options.rules 的效果


其他

禁用某项比如:据实结算即不需要填写帮帮币了

$(form).removeData("validator")

$.validator.unobtrusive.parse();


MVC内置Ajax


JQuery 验证 ASP.NET
赞: 0 踩: 0

打赏
已收到打赏的 帮帮币

你的 打赏 非常重要!
为了保证文章的质量,每一篇文章的发布,都已经消耗了作者 1 枚 帮帮币
没有“帮帮币”,作者无法发布新的文章。

全系列阅读
评论 / 1
2021年02月22日 11点51分 --- 第 1 楼 --- 推荐 阿泰12
HHHHHH

Web前端


HTML和CSS

HTML最常用的标签和属性,含HTML5的语义标签和新属性,但不包含需要JavaScript操作的HTML5 API,以及CSS基础(简述CSS 3动画相关),以及bootstrap.js以外的Bootstrap的内容。

Javascript入门

Javascript的基本语法:为能使用JQuery和Bootstrap.js的使用打下基础

ES进阶

借助于ES6,讲解JavaScript中一些更复杂的语法特性,如作用域、闭包、面向对象、原型链、this变化、module等

JQuery和Bootstrap

JQuery类库(含Ajax),以及Bootstrap的JavaScript组件部分

全部
关键字



帮助

反馈