怎么使用validate.js实现表单数据提交前的验证方法

  介绍

小编给大家分享一下怎么使用验证。js实现表单数据提交前的验证方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

js的作用是什么

1,能够嵌入动态文本于HTML页面。2,对浏览器事件做出响应。3,读写HTML元素。4、在数据被提交到服务器之前验证数据。5,检测访客的浏览器信息。6,控制饼干,包括创建和修改等7,基于node . js技术进行服务器端编程。

<强> 1。下载和引入验证。js

首先,我们需要下载一份验证。js文件,这个文件可以去JQuery官网或者csdn等网站下载。

怎么使用validate.js实现表单数据提交前的验证方法

下载好之后,新建一个html文件,然后先后将jquery.js文件和validate.js引入html代码,我这里新建一个名为formCheck。html的文件,如下图所示:

怎么使用validate.js实现表单数据提交前的验证方法

,这里为了待会的表单表现的好看一些,我引入了layui.css的样式文件。

<强> 2。建立表单

怎么使用validate.js实现表单数据提交前的验证方法

, 怎么使用validate.js实现表单数据提交前的验证方法

, <强> 3。使用validate.js实现表单数据的验证

,同样,我们直接看代码截图:

怎么使用validate.js实现表单数据提交前的验证方法

,除了这些检验方式,validate.js里还封装了包括邮箱格式验证,电话号码格式验证等验证犯法,使用方法和上图中数量的一致,想进一步了解的同学可以自行查看具体的js内容哦。上图中的代码,规则部分限定了输入数据的规范,消息则设定了错误提示信息。

<强> 4。查看结果

怎么使用验证。js实现表单数据提交前的验证方法

怎么使用验证。js实现表单数据提交前的验证方法

这种验证方法还是非常简单和方便的,借助一个js插件,轻松搞定数据验证,希望这个简单的演示能帮到何我一样的菜鸡哦,先写到这里啦,要睡了,晚安哦!

对了,差点忘了奉上完整代码了,请笑纳:

& lt; ! DOCTYPE  html>   & lt; html>   & lt;才能head>   ,,,& lt; meta  charset=癠TF-8"比;   ,,,& lt; title>前端表单验证& lt;/title>   ,,,& lt; link  rel=皊tylesheet",类型=拔谋?css" https://www.yisu.com/zixun/, href=" layui-v2.3.0/layui/css/layui.css”rel="外部nofollow "/>