前端数据校验的使用——nice-validator基本使用

一、前端校验

数据校验分为前端校验和后台校验，前端校验类似于后台校验的子级，在逻辑和安全方面没有后台校验的要求高。为什么使用了后台校验还要在页面上加入前端校验呢？

前端校验虽然和后台校验都是属于数据校验，但是两者的目的和效果是不同的。后台校验考虑的是数据安全，前台校验则考虑的是用户体验。无论是从产品本身出发，还是考虑产品的受众，前端校验都不可或缺。以常用的用户注册表单为例：如果没有前端校验，用户费时费力地填写了大量资料，兴奋地点击提交准备体验产品功能时，后台返回了数据格式错误并要求用户重新填写时，用户的心情该有多么的糟糕。这就相当于给精心打扮了几个小时的女人准备出门约会时，你朝她泼了一盆冷水。

既然前端校验是从用户体验出发的，那么校验的效果、校验的内容也要以用户的感受为第一出发点。一般来说，校验的效果包括校验的时机和校验的提醒，校验的内容主要是必填项的校验。

校验的时机有即时校验和提交时校验，个人推荐即时校验，校验项明确，反馈较快，修改方便，用户体验较好。校验的提醒主要说的是UI显示，不建议采用弹出框的形式，需要用户拿起鼠标点击，不够方便。校验的内容虽然主要指必填项，但是非必填项也需要进行校验，如备注的长度。

二、nice-validator介绍

nice-validator是一款前端校验插件，应用不受框架制约，针对bootstrap等流行前端框架还有专门的优化提高的规则。nice-validator支持的校验对象和规则也非常广泛，支持校验input、contenteditable输入框校验、支持select、checkbox选择校验、支持日期的校验、支持服务端远程校验等，功能十分强大。同时nice-validator还支持自定义主题、自定义校验规则、自定义校验时机和校验提醒方式，在效果上比较贴合受众。

本篇关于nice-validator前端校验的说明主要包括各种数据的校验方法、远程校验、自定义校验规则、自定义校验时机和自定义校验提醒方式，目的是满足基本的开发需求。更多、更高级的校验效果和方法可以参考API说明。

三、使用方法说明

1. 普通表单校验

普通表单校验包含了输入框、选择框、日期等的校验方法，界面如下：

1.1 必填校验

1.1.1 输入框必填校验

以用户名填写项为例：

data-rule:定义校验的选项，这里可以自定义校验规则，如data-rule添加自定义校验规则A，A添加的方法为：data-rule-A=”[校验规则,校验错误信息提示]”；

data-tip:定义校验前的提示信息，功能类似于placeholder,在输入框获得焦点后显示。

对于一些常用的校验项如手机号码、邮箱校验等，我们可以在外部JS里统一定义，统一使用，一般来说我们使用的都是中文版，所有校验信息添加在zh-CN.js里，示例如下：

如果我们没有在页面上自定义提示信息，使用的就是此处定义的提示消息。

1.1.1 选择框必选校验

必选校验使用的关键字为checked而不是required，示例如下：

“此处不能为空”不够具体也不够明确，我们可以修改data-rule:

效果如下：

1.1.1 匹配校验

匹配校验即比较当前输入内容与要求输入的内容格式是否一致，比较典型的应用是确认密码、确认日期。

确认密码：

比较目标：

比较对象：

效果如下：

日期匹配：

密码匹配使用的是match(name)，match还有match(lte/gte, name, datetime),视具体情况，datetime可去掉，表示一个范围匹配。如：

效果如下：

1.1.1 选择性校验

什么是选择性校验？以电商应用场景为例：

当用户下单购买商品后，如果用户选择了送货上门，那么收货地址等信息就需要必填，如果是自主取货，那么关于收货地址等信息就不用填写。概述即：只有A填写了，B才是必填，示例如下：

nice-validator可以与jQuery结合使用：

1.1.1 常用项校验

整数校验

整数校验使用integer,具体定义如下所示：

Integer：整数

Integer（+）：正整数

Integer（+0）：非负整数

Integer（-）：负整数

Integer（-0）：非正整数

示例如下：

效果如下：

数值范围校验

数值范围校验使用range，具体定义如下：

range(m~n, false)——填写范围在m-n，各项没有要求则不填写如填写大于等于m的数为range(m~),false表示是否包含边界值，默认包含。示例如下（注意false前有空格）：

效果如下：

字符长度校验

字符长度校验使用length,与range雷同，需要说明的是length的true表示全角字符计算双字符，即汉字算作两个单位长度。

1.1.1 多选一校验

多选一校验即多个选项只需要填写一项，比如联系方式中邮箱、手机、固话只需填写一个，施加效果的方法是定义共同的class，使用class表名这些选项中必须填写一个。示例如下：

效果如下：

2. 自定义表单校验

自定义表单校验包括自定义校验提醒时机，自定义表单提醒方式（UI）。自定义主题、自定义校验规则如target、display等可以通过API了解。

2.1 自定义校验提醒时机

自定义校验提醒时机使用timely关键字，其值的定义介绍如下：

0---提交后会进行校验

1---默认选项，失去焦点后进行校验

2---输入完成立即校验

3---失去焦点或为空时校验，显示首条要求

8---输入时进行校验，如果输入错误，那么显示错误信息提示和正确信息提示

9---失去焦点或为空时校验，显示所有输入要求

推荐使用默认选项和9选项，不选择8是因为8选项不适合进行远程校验。

timely定义示例如下：

效果如下：

2.2 自定义表单提醒方式

自定义表单提醒样式

自定义表单提醒样式使用theme关键字，其定义如下：

yellow_right----在右侧提示

yellow_right_effect----右侧提示并有动态效果

simple_bottom----在下方显示

yellow_top-----在上方显示

一般来说，不会选择在下方提示，右侧提示居多，上方次之。这里以“右侧提示并有动态效果”为例进行说明：

效果如下：

注：effect的效果是校验提示弹出时会抖动。

1. 远程校验

nice-validator的远程校验支持多种方式的数据通信，包括跨域请求。我在这里使用的是类似于ajax提交的方法，其他的使用方式请参考API说明。

远程校验的元素有请求方式、请求地址以及请求参数，请求方式支持get\post，请求地址支持多种定义方式，nice-validator支持直接使用name属性获取参数值，也支持DOM的方式。示例如下：

jquery代码如下：

说明：

1) 表单需要绑定

2）元素绑定使用name

3) Url与参数之间一定要空格隔开

4) “ok”为默认的成功返回标志，使用此标志可以避免成功后提示信息的样式出现问题。

效果如下：

注：如果这里timely的值为8,会不断请求后台，因为通常输入时即时校验是根据用户输入的间隔时间来判断用户是否输入完成的。

四、附件说明

Js引用示例如下：

这是官方API地址

这是js下载地址和demo

前端数据校验的使用——nice-validator基本使用相关推荐

python数据校验_最近抽空造了一个数据校验的轮子 Python -validator
最近抽空造了一个数据校验的轮子 python-validator. 在开发 web 应用时,经常需要校验前端传入的数据.如果使用 Django,那么可以使用自带的 forms 进行数据校验. pyth ...
前端数据校验（jquery.validte.js）
转载:https://www.cnblogs.com/gbtags/p/4653957.html 1. 默认validate参数的初始化: 这个插件如果要用,肯定很多页面都会用到,毕竟如果有表单,就需 ...
golang中使用validator进行数据校验及自定义翻译器
目录一.概述二.使用官方标记符进行数据效验三.自定义标记符和翻译器进行数据效验一.概述在接口开发经常需要进行数据校验,validator包是一个比较强大的校验工具包.下面是一些学习总结,全文 ...
Go 语言编程 — validator 数据校验工具
目录文章目录目录 Validator Quick start 约束类型特殊约束格式约束数据结构类型约束范围约束字符串约束唯一性约束跨字段约束自定义约束错误处理中文错误信息参考 ...
SpringBoot 2 快速整合 | Hibernate Validator 数据校验
概述在开发RESTFull API 和普通的表单提交都需要对用户提交的数据进行校验,例如:用户姓名不能为空,年龄必须大于0 等等.这里我们主要说的是后台的校验,在 SpringBoot 中我们可以通 ...
如何优雅的做数据校验-Hibernate Validator详细使用说明
文章目录 Hibernate Validator的使用依赖 bean约束声明和验证,Validator 方法约束声明和验证,ExecutableValidator 约束注解空与非空检查 Boole ...
java 后端校验_如何实现Java后端数据校验？看这篇就足够！
前言每次我们在搭建一个开源项目的首要任务包括:项目的统一异常处理.统一结果封装以及做项目的数据校验,在前后端分离的情况下,不仅前端需要做数据校验,同样后端也要实现,前端主要使用一些类似与jQuery ...
@valid 校验_SpringBoot数据校验与优雅处理详解
本篇要点 JDK1.8.SpringBoot2.3.4release 说明后端参数校验的必要性. 介绍如何使用validator进行参数校验. 介绍@Valid和@Validated的区别. 介绍如何 ...
django12:form 组件/渲染标签/数据校验/钩子函数/
基本用法 from django import forms# 自己写一个类 class RegForm(forms.Form):username= forms.CharField(min_length ...

前端数据校验的使用——nice-validator基本使用

前端数据校验的使用——nice-validator基本使用相关推荐

最新文章

热门文章