使用validate.js实现表单数据提交前的验证方法
现在是学的ASP.NET，关于表单验证，目前知道的，除了以前那种傻瓜式的每个表单选项都用一个函数去验证之外，有两种方法是比较方便的，今天先介绍一下第一种，在前端实现表单验证的方法——基于validate.js的表单验证方法。
注意哟，以下我都用截图的方式挂出代码，然后最后会把完整代码贴出来，提供复制粘贴，小伙伴不要急着敲哦！
1.下载和引入validate.js
首先，我们需要下载一份validate.js文件，这个文件可以去JQuery官网或者csdn等网站下载。
下载好之后，新建一个html文件，然后先后将jquery.js文件和validate.js引入html代码，我这里新建一个名为formCheck.html的文件，如下图所示：
这里为了待会的表单表现的好看一些，我引入了layui.css的样式文件。
2.建立表单
3.使用validate.js实现表单数据的验证
同样，我们直接看代码截图：
除了这些检验方式，validate.js里还封装了包括邮箱格式验证，电话号码格式验证等验证犯法，使用方法和上图中的number一致，想进一步了解的同学可以自行查看具体的js内容哦。上图中的代码，rules部分限定了输入数据的规范，message则设定了错误提示信息。
4.查看结果
这种验证方法还是非常简单和方便的，借助一个js插件，轻松搞定数据验证，希望这个简单的demo能帮到何我一样的菜鸡哦，先写到这里啦，要睡了，晚安哦！
对了，差点忘了奉上完整代码了，请笑纳：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>前端表单验证</title>
<link rel="stylesheet" type="text/css" href="layui-v2.3.0/layui/css/layui.css" rel="external nofollow" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="layui-v2.3.0/layui/layui.js"></script>
<style type="text/css">
#form-box{
width: 700px;
height: 300px;
margin: auto;
position: relative;
top: 100px;
}
</style>
</head>
<body>
<form action="formCheck.html" method="post">
<div id="form-box" class="layui-form layui-form-pane">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="userName" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input type="text" name="passWord" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<input type="submit" name="" id="frmSubmit" value="提交" class="layui-btn layui-btn-primary layui-btn-normal" />
</div>
</div>
</form>
</body>
<script type="text/javascript">
$(function(){
$("form").validate({
rules: {
userName: {
required: true, //该项表示该字段为必填项
maxlength: 5 //表示该字段的最大长度为5
},
passWord: {
required: true,
number: true //表示该字段必须为数字
}
},
messages: {
userName: {
required: "*必填",
maxlength: "*最多5个字符"
},
passWord: {
required: "*必填",
number: "*必须是合法的数字"
}
}
})
});
</script>
</html>
总结
以上所述是小编给大家介绍的使用validate.js实现表单数据提交前的验证，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证
-
jquery validate.js表单验证入门实例（附源码）
小编上网查阅了许多关于jquery.validate的文章,大部门只是介绍它的api和用法,没有一个详细的的入门案例介绍,研究了半天还是无从下手.为此,小编自己做了一个jquery validate.js表单验证入门实例,写的不是特别好,但应该适用于初学者,分享给大家. 以下是validate.js表单验证入门实例参考源码,文章下面有源码下载地址: <html> <head> <meta http-equiv="Content-Type" content=
-
jquery validate.js表单验证的基本用法入门
这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript"> function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密码
-
jquery表单验证插件（jquery.validate.js）的3种使用方式
jquery 验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery 插件和 jquery 验证插件: 第一步:引入插件 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jq
-
使用validate.js实现表单数据提交前的验证方法
现在是学的ASP.NET,关于表单验证,目前知道的,除了以前那种傻瓜式的每个表单选项都用一个函数去验证之外,有两种方法是比较方便的,今天先介绍一下第一种,在前端实现表单验证的方法--基于validate.js的表单验证方法. 注意哟,以下我都用截图的方式挂出代码,然后最后会把完整代码贴出来,提供复制粘贴,小伙伴不要急着敲哦! 1.下载和引入validate.js 首先,我们需要下载一份validate.js文件,这个文件可以去JQuery官网或者csdn等网站下载. 下载好之后,新建一个html
-
js防止表单重复提交的两种方法
第一种:用flag标识,下面的代码设置checkSubmitFlg标志: 复制代码 代码如下: <script language=""javascript""> var checkSubmitFlg = false; function checkSubmit(){ if(checkSubmitFlg ==true){ return false; //当表单被提交过一次后checkSubmitFlg将变为true,根据判断将无法进行提交. } checkS
-
JS多个表单数据提交下的serialize()应用实例分析
本文实例讲述了JS多个表单数据提交下的serialize()应用.分享给大家供大家参考,具体如下: 在实际开发场景中,难免遇到需要多个表单的数据传递问题. 之所以要进行多表单的数据传递是因为可以进行数据分组,便于数据的维护. 这个时候,出于不依赖jquery的考虑,有一个原生js函数来解决这个问题无疑是最好的.而源自于<JavaScript高级程序设计>一书的serialize()函数就是解决这个问题的最好办法,该函数如下: function serialize(form){ var part
-
yii form 表单提交之前JS在提交按钮的验证方法
很多时候,需要对Yii表单model中的对象设置的rules进行判断,但是有的时候可能需要在提交之前就在客户端进行验证,我这边设置的方法是在提交按钮上设置监听器,如果部分内容为空(比如多选按钮没有选择),那么提示出错信息.主要目的是页面不用提交后刷新,进入controller的对应函数之后再判断出错.显示rules()验证规则函数的错误信息. 这里为了验证是否选择某个单选按钮,对提交的按钮onclick设置监听,具体如下 <Button onclick = "return fun()&qu
-
在表单提交前进行验证的几种方式整理
在表单提交前进行验证的几种方式 . 在Django中,为了减轻后台压力,可以利用JavaScript在表单提交前对表单数据进行验证.下面提供了有效的几种方式(每个.html文件为一种方式). formpage1.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional
-
php 防止表单重复提交两种实现方法
php 防止表单重复提交 由于网络原因,经常出来点了提交按钮,网页没有反应,而进行再次点击.这样就导致后台收到两次提交,从而进行两次处理,本文章向大家介绍php 防止表单重复提交的几种方法 1.前端解决 方法一: 可以通过前端来解决.当用户点了提交按钮之后,先使用js进行有效性判断,没问题后,将提交按钮"禁用"掉.然后再提交! 方法二: 使用ajax提交表单.点了提交按钮后,禁用提将按钮,或者设置一个状态值,将其设为1,表示正在提交.再提交时判断如果正在提交,则不作处理.等ajax返回
-
php解决和避免form表单重复提交的几种方法
前言 为什么要避免form表单被重复提交呢?因为我们不想让我们的服务器重复处理没必要的数据,同时我们也是避免我们的数据库产生重复的数据,避免表单重复提交也是让我们的网站更安全的一种表现. 先看一下有哪些情况下回导致表单重复提交呢,知道哪些情况下可能会出现表单重复提交就可以从根源处理表单重复提交的情况了. 下面的情况就会导致表单重复提交: 点击提交按钮两次. 点击刷新按钮. 使用浏览器后退按钮重复之前的操作,导致重复提交表单. 使用浏览器历史记录重复提交表单. 浏览器重复的HTTP请求. 网页被恶
-
Js为表单动态添加节点内容的方法
本文实例讲述了Js为表单动态添加节点内容的方法.分享给大家供大家参考.具体如下: 1. 代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm
-
springmvc 防止表单重复提交的两种方法
目录 1.通过session中的token验证 步骤1:创建自定义注解 步骤2:创建自定义拦截器(@slf4j是lombok的注解) 步骤3:将自定义拦截器添加到配置文件 2.通过当前用户上一次请求的url和参数验证重复提交 步骤1:创建自定义注解 步骤2:创建自定义拦截器 步骤3:将自定义拦截器添加到配置文件 最近在本地开发测试的时候,遇到一个表单重复提交的现象. 因为网络延迟的问题,我点击了两次提交按钮,数据库里生成了两条记录.其实这种现象以前也有遇到过,一般都是提交后把按钮置灰,无法再次提
-
js清空表单数据的两种方式(遍历+reset)
方法1:遍历页面元素 /* 清空FORM表单内容 id:表单ID*/ function ClearForm(id) { var objId = document.getElementById(id); if (objId == undefined) { return; } for (var i = 0; i < objId.elements.length; i++) { if (objId.elements[i].type == "text") { objId.elements[