html 5 表单校验插件,前端校验插件——Validator简单使用

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>欢迎转载,转载请注明出处-VirgoArt,www.cnblogs.com

1.引用jquery-1.9.1.min.js与jquery.validate.min.js

2.在JS加载初始化时,进行事件绑定。

3.BindEvent(); 初始化插件,应用。

4.BindEvent(); 实现自定义校验方法:

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

if(){

return true;

}else{

return false;

}

}, "");

5.绑定表单校验

_validate = $("#formId").validate({

rules : {

'inputName' : {

required : true,

methodName :true

}

},

messages : {

'inputName' : {

required : "该项为必填项",

methodName:"输入不满足规则"

}

}

});

6.为当前表单输入框追加校验

var rules = {};

rules[inputName1] = {

methodName: true

};

rules[inputName2] = {

methodName: true

};

$.extend(_validate.settings.rules, rules);

var messages = {};

messages[inputName1] = {

methodName:" 输入不满足规则"

};

messages[inputName2] = {

methodName: "输入不满足规则"

};

$.extend(_validate.settings.messages, messages);

7.提交时,验证是否可以提交

if (!$("#formId ").valid()) {

return;

}

nice-validator表单验证插件的简单使用

前言 前端表单校验是过滤无效数据.假数据.有毒数据的第一步,是数据安全的第一道关卡,虽然我们不能100%相信客户端提交的数据(真正的校验还得在服务端进行),但设置前端表单校验也是至关重要的,自己写逻辑 ...

【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件

Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(J ...

程序猿必备的8款web前端开发插件三

1.HTML5 Canvas 3D波浪翻滚动画 之前我们分享过好几款基于HTML5 Canvas的波浪和水波纹动画,比如这款HTML5 3D波浪起伏动画特效和这款超酷无比的HTML5 WebGL水面水 ...

validate表单校验插件笔记

1validation知识点 1 validation基础 validation插件下载http://bassistance.de/jquery-plugins/jquery-plugin-valid ...

第一百八十三节,jQuery-UI,知问前端--验证插件

jQuery-UI,知问前端--验证插件 学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件(va ...

表单校验插件(bootstrap-validator)

表单校验插件(bootstrap-validator) 参考文档 http://blog.csdn.net/nazhidao/article/details/51542508 http://blog. ...

Jquery前端分页插件pagination同步加载和异步加载

上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...

Jquery前端分页插件pagination使用

插件描述:JqueryPagination是一个轻量级的jquery分页插件.只需几个简单的配置就可以生成分页控件.并且支持ajax获取数据,自定义请求参数,提供多种方法,事件和回调函数,功能全面的分 ...

Sublime Text3的react代码校验插件

之前写前端一直用的是jshint做语法检查,但jshint不支持JSX语法,为了在React使用,需要用eslint代替它.六月份的时候为了写React Native,编辑器换过Webstorm和VS ...

随机推荐

python的继承

继承是面向对象的重要特征之一,继承是两个类或者多个类之间的父子关系,子进程继承了父进程的所有公有实例变量和方法.继承实现了代码的重用.重用已经存在的数据和行为,减少代码的重新编写,python在类名后 ...

2014 UESTC暑前集训图论专题解题报告

A.方老师和缘分 http://www.cnblogs.com/whatbeg/p/3765621.html B.方老师和农场 http://www.cnblogs.com/whatbeg/p/376 ...

通信原理实践(六)——基带传输

一.基带传输引入 1.从数字带通传输说起 以上系统可以等价为: 这里"等价"的假设条件是 •信号通过滤波器不失真 •不存在码间串扰 意义:可以通过评估基带传输系统来获得数字带通传输 ...

第一个UI脚本--python+selenium

之前一直是用java+selenium做自动化测试的,最近因为工作需要,需要用pyhton+selenium去实现,于是就赶驴上架,熟悉了一下python的语法和脚本的编写过程,下面是一个简单的脚本, ...

Spring整合Shiro做权限控制模块详细案例分析

1.引入Shiro的Maven依赖 org.apache.sh ...

设计模式之观察者模式(Java)

设计模式(Design pattern)是什么?它是一套由四人组(The Gang of Four, [1]的作者)总结出来的软件设计框架.其目的是为了提高代码的可重用性,增强系统的可维护性和代码的易 ...

【设计经验】3、ISE中烧录QSPI Flash以及配置mcs文件的加载速度与传输位宽

一.软件与硬件平台 软件平台: 操作系统:Windows 7 64-bit 开发套件:ISE14.7 硬件平台: FPGA型号:XC6SLX45-CSG324 QSPI Flash型号:W25Q128 ...

with as 加上 materialize hint 生成实质临时表

WITH AS: 就是将一个子查询部分独立出来,有时候是为了提高SQL语句的可读性,有时候是为了提高SQL语句性能. 如果一个SQL语句中,某个表会被访问多次,而且每次访问的限制条件一样的话,就可以使 ...

python自动化系列

1.pytnon环境及IDE 文件还是txt的,是如何查找到python 的呢? 是通过path查找的,且还按以下打印出的内容逐步查找的 mac版

file命令详解

Linux file命令 Linux file命令用于辨识文件类型. 通过file指令,我们得以辨识该文件的类型 用法: file [-bchikLNnprsvz0] [--apple] [--mim ...

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
表单校验中的validator(验证器)是一种用于验证用户输入数据的机制。它可以确保用户提交的数据符合预期的格式、长度、范围或其他约束条件。 在前端开发中,通常会使用一些验证器来对表单数据进行校验,以确保数据的有效性和完整性。这些验证器可以在用户提交表单之前或之后进行验证。 常见的表单校验包括以下几种类型的验证器: 1. 必填验证器:确保某个字段的值不能为空。 2. 长度验证器:验证字段值的长度是否符合指定的范围。 3. 格式验证器:验证字段值是否符合特定的格式要求,如邮箱、电话号码、URL等。 4. 数值验证器:验证数字字段值是否符合指定的范围或条件。 5. 正则表达式验证器:使用正则表达式来验证字段值是否符合指定的模式。 6. 自定义验证器:根据特定的业务需求编写自定义的验证规则。 通过使用这些验证器,开发者可以在前端界面上实时地对用户输入进行校验,并及时提供错误提示信息。这样可以帮助用户更好地填写表单,并减少无效或错误数据的提交。同时,后端服务器也需要对数据进行进一步的验证和处理,以确保数据的安全和正确性。 总之,表单校验中的validator是一种用于验证用户输入数据的机制,可以确保数据的有效性和完整性。它在前端和后端开发中都起到重要的作用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值