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


Posted in Javascript onSeptember 04, 2018

现在是学的ASP.NET,关于表单验证,目前知道的,除了以前那种傻瓜式的每个表单选项都用一个函数去验证之外,有两种方法是比较方便的,今天先介绍一下第一种,在前端实现表单验证的方法——基于validate.js的表单验证方法。

注意哟,以下我都用截图的方式挂出代码,然后最后会把完整代码贴出来,提供复制粘贴,小伙伴不要急着敲哦!

1.下载和引入validate.js

首先,我们需要下载一份validate.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里还封装了包括邮箱格式验证,电话号码格式验证等验证犯法,使用方法和上图中的number一致,想进一步了解的同学可以自行查看具体的js内容哦。上图中的代码,rules部分限定了输入数据的规范,message则设定了错误提示信息。

4.查看结果

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

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

这种验证方法还是非常简单和方便的,借助一个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实现表单数据提交前的验证,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
input 高级限制级用法
Mar 26 Javascript
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
React如何避免重渲染
Apr 10 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
一文读懂ES7中的javascript修饰器
May 06 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 #Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 #Javascript
create-react-app安装出错问题解决方法
Sep 04 #Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 #Javascript
工作中常用到的ES6语法
Sep 04 #Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 #Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 #Javascript
You might like
Yii框架form表单用法实例
2014/12/04 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
原生js实现查询天气小应用
2016/12/09 Javascript
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
python匿名函数用法实例分析
2019/08/03 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
德国帽子专家:Hutshopping
2019/11/03 全球购物
30岁生日感言
2014/01/25 职场文书
《老王》教学反思
2014/02/23 职场文书
道路建设实施方案
2014/03/18 职场文书
2014年人事科工作总结
2014/11/19 职场文书
小学数学国培研修日志
2015/11/13 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技