1. Python技术站首页
  2. 其他
  3. JavaScript

Validform表单验证总结篇

• JavaScript

Validform表单验证总结篇

Validform是一款基于jQuery的表单验证插件。它可以实现多种类型的表单验证，包括必填项验证、数字验证、邮箱验证、手机验证等等。本文将为大家提供Validform的完整攻略，详细讲解使用Validform进行表单验证的步骤和方法。

步骤1：下载Validform

首先，需要下载Validform插件。可以在官网（http://validform.rjboy.cn/）下载最新版本的Validform。下载完毕后，解压文件，将其中的jquery.validform.js和Validform_v5.3.2.css文件引入到HTML文档中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Validform表单验证</title>
    <link rel="stylesheet" type="text/css" href="Validform_v5.3.2.css">
</head>
<body>
    <form action="#" method="post" id="myform">
        <label for="username">用户名：</label>
        <input type="text" name="username" id="username" class="demo"/>
        <br/>
        <label for="password">密码：</label>
        <input type="password" name="password" id="password" class="demo"/>
        <br/>
        <label for="email">邮箱：</label>
        <input type="text" name="email" id="email" class="demo"/>
        <br/>
        <label for="tel">手机号码：</label>
        <input type="text" name="tel" id="tel" class="demo"/>
        <br/>
        <input type="submit" value="提交">
    </form>

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.validform.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#myform").Validform({
                tiptype:2
            });
        });
    </script>
</body>
</html>

步骤2：为表单加上class

接下来，需要在表单中加上class。Validform是通过读取class来实现不同类型验证的。同类验证只需要添加一个相应的class即可，注意不要重复添加。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Validform表单验证</title>
    <link rel="stylesheet" type="text/css" href="Validform_v5.3.2.css">
</head>
<body>
    <form action="#" method="post" id="myform">
        <label for="username">用户名：</label>
        <input type="text" name="username" id="username" class="demo" datatype="*5-10"/>
        <br/>
        <label for="password">密码：</label>
        <input type="password" name="password" id="password" class="demo" datatype="*6-20"/>
        <br/>
        <label for="email">邮箱：</label>
        <input type="text" name="email" id="email" class="demo" datatype="e"/>
        <br/>
        <label for="tel">手机号码：</label>
        <input type="text" name="tel" id="tel" class="demo" datatype="m"/>
        <br/>
        <input type="submit" value="提交">
    </form>

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.validform.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#myform").Validform({
                tiptype:2
            });
        });
    </script>
</body>
</html>

在上面的示例代码中，我们为表单中的每一个input元素添加了一个datatype属性，用于指定验证类型。比如，datatype="*5-10"表示验证长度为5-10个字符；datatype="e"表示验证邮箱格式；datatype="m"表示验证手机号码格式等。

步骤3：初始化Validform

最后，需要调用Validform的初始化函数。在$(function())中添加$(selector).Validform(options)即可。options是一个参数对象，用来指定Validform的一些配置项。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Validform表单验证</title>
    <link rel="stylesheet" type="text/css" href="Validform_v5.3.2.css">
</head>
<body>
    <form action="#" method="post" id="myform">
        <label for="username">用户名：</label>
        <input type="text" name="username" id="username" class="demo" datatype="*5-10"/>
        <br/>
        <label for="password">密码：</label>
        <input type="password" name="password" id="password" class="demo" datatype="*6-20"/>
        <br/>
        <label for="email">邮箱：</label>
        <input type="text" name="email" id="email" class="demo" datatype="e"/>
        <br/>
        <label for="tel">手机号码：</label>
        <input type="text" name="tel" id="tel" class="demo" datatype="m"/>
        <br/>
        <input type="submit" value="提交">
    </form>

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.validform.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#myform").Validform({
                tiptype:2 //提示信息类型，可选值为1、2、3，默认为1
            });
        });
    </script>
</body>
</html>

在上面的示例代码中，我们将tiptype设置为2，表示提示信息以弹出层的形式提醒用户。

示例1：必填项验证

在表单中增加一个必填项验证，当用户未填写该项时，需要提示用户填写。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Validform表单验证</title>
    <link rel="stylesheet" type="text/css" href="Validform_v5.3.2.css">
    <style type="text/css">
        .error{color:red;margin-left:10px;}
    </style>
</head>
<body>
    <form action="#" method="post" id="myform">
        <label for="username">用户名：</label>
        <input type="text" name="username" id="username" class="demo" datatype="*5-10" nullmsg="请输入用户名"/>
        <span class="error">*</span>
        <br/>
        <label for="password">密码：</label>
        <input type="password" name="password" id="password" class="demo" datatype="*6-20" nullmsg="请输入密码"/>
        <span class="error">*</span>
        <br/>
        <label for="email">邮箱：</label>
        <input type="text" name="email" id="email" class="demo" datatype="e"/>
        <br/>
        <label for="tel">手机号码：</label>
        <input type="text" name="tel" id="tel" class="demo" datatype="m"/>
        <br/>
        <input type="submit" value="提交">
    </form>

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.validform.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#myform").Validform({
                tiptype:2, //提示信息类型，可选值为1、2、3，默认为1
                showAllError:true //是否显示全部错误信息，默认为false
            });
        });
    </script>
</body>
</html>

在上面的示例代码中，我们为用户名和密码增加了一个nullmsg属性，用于指定它们的必填提示信息。同时，我们还将showAllError设置为true，表示将会显示所有错误信息。

示例2：自定义验证规则

在表单中增加一个自定义的验证规则，用于验证输入内容必须为偶数。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Validform表单验证</title>
    <link rel="stylesheet" type="text/css" href="Validform_v5.3.2.css">
    <style type="text/css">
        .error{color:red;margin-left:10px;}
    </style>
</head>
<body>
    <form action="#" method="post" id="myform">
        <label for="username">用户名：</label>
        <input type="text" name="username" id="username" class="demo" datatype="*5-10" nullmsg="请输入用户名"/>
        <span class="error">*</span>
        <br/>
        <label for="password">密码：</label>
        <input type="password" name="password" id="password" class="demo" datatype="*6-20" nullmsg="请输入密码"/>
        <span class="error">*</span>
        <br/>
        <label for="email">邮箱：</label>
        <input type="text" name="email" id="email" class="demo" datatype="e"/>
        <br/>
        <label for="tel">手机号码：</label>
        <input type="text" name="tel" id="tel" class="demo" datatype="m"/>
        <br/>
        <label for="evennum">请输入偶数：</label>
        <input type="text" name="evennum" id="evennum" class="demo" datatype="evennum" errormsg="必须输入偶数"/>
        <span class="error">*</span>
        <br/>
        <input type="submit" value="提交">
    </form>

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.validform.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#myform").Validform({
                tiptype:2, //提示信息类型，可选值为1、2、3，默认为1
                showAllError:true, //是否显示全部错误信息，默认为false
                //自定义规则
                regcheck:{
                    evennum:function(gets,obj,curform,regxp){
                        //自定义验证规则，必须返回true或false
                        return parseInt(gets)%2==0; 
                    }
                }
            });
        });
    </script>
</body>
</html>

在上面的示例代码中，我们定义了一个名为evennum的验证规则，并将它添加到regcheck中。evennum验证规则用于检测输入内容是否为偶数，实际上是通过对输入内容进行求模运算判断是否为偶数。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Validform表单验证总结篇 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • Javascript中的async函数详解

    Javascript中的async函数详解 Introduction 在Javascript中，async函数是一个让我们可以使用异步的方法来执行本来以同步方式执行的代码的函数。 它使我们能够避免回调地狱并轻松处理异步代码的结果。在本文中，我们将详细讲解async函数，并说明如何使用它们。 Async函数和Promise ES6中带来了很多新的概念和特性，如…

    JavaScript 2023年5月27日
    00

  • express异步函数异常捕获示例详解

    下面将详细讲解“express异步函数异常捕获示例详解”的完整攻略。 什么是异步函数异常捕获 当我们在使用异步函数的时候，如果出现异常错误，如果不进行捕获错误会导致整个应用程序宕机，这会对我们的应用程序和用户造成不便和不良影响。所以很有必要对异步函数的异常进行捕获，防止代码运行出现异常。 express应用中的异常捕获 在express中，我们可以使用try…

    JavaScript 2023年5月28日
    00

  • Json文件格式化方法详解

    Json文件格式化方法详解 什么是Json？ Json（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于JavaScript语言的子集，采用完全独立于编程语言的文本格式来存储和表示数据。Json由于具有简洁和易读的特点，得到了越来越广泛的应用。 Json文件格式化方法详解 在实际的开发中，有时候我们需要处理包含大量数据…

    JavaScript 2023年6月11日
    00

  • JS的数组迭代方法

    JS中的数组是一种非常常见的数据类型，常常需要对其中的元素进行遍历和处理。JavaScript提供了多种迭代方法来方便我们操作数组。本攻略将介绍JS的数组迭代方法，并提供两个具体的示例来说明。 forEach() forEach()是JS中数组迭代最为常用的方法之一，可以对数组中的每个元素进行遍历。该方法的用法如下： array.forEach(functi…

    JavaScript 2023年5月27日
    00

  • 奉献给JavaScript初学者的编写开发的七个细节

    奉献给JavaScript初学者的编写开发的七个细节攻略 在编写JavaScript代码时，细节是非常重要的。这篇文章将向初学者介绍七个在JavaScript编写过程中需要注意的细节。 1.使用严格模式 使用”use strict”;来启用JavaScript的严格模式。这样做会让代码更加健壮，可以避免一些常见的错误，例如声明未使用的变量等。 示例： &qu…

    JavaScript 2023年5月18日
    00

  • JS简单获取客户端IP地址的方法【调用搜狐接口】

    JS简单获取客户端IP地址的方法【调用搜狐接口】 获取客户端IP地址是一种常见的需求，而JavaScript作为Web开发的主流语言，有时候需要通过JS获取客户端的IP地址。下面介绍一种简单的方式：调用搜狐接口。 1. 搜狐IP地址接口 搜狐提供了一个IP地址查询接口，可以通过该接口获取到访问者的IP地址和地理位置信息。接口地址为：http://pv.soh…

    JavaScript 2023年6月10日
    00

  • js 通过Object.defineProperty() 定义和控制对象属性

    JavaScript的Object.defineProperty()方法可以用来定义和控制对象属性的访问方式。它可以让我们在对象上定义新属性，或修改已有属性的getter和setter方法。本文将全面介绍Object.defineProperty()的使用方法及其示例。 基本用法 Object.defineProperty()方法接受三个参数：要定义属性的对…

    JavaScript 2023年5月27日
    00

  • js 定时器setTimeout无法调用局部变量的解决办法

    当我们在js代码中定义了局部变量，如果要在定时器setTimeout中使用该变量，可能会出现无法调用的情况。这是因为定时器是基于全局变量执行的，而局部变量只能在定义它的函数中使用。 为了解决这个问题，我们可以采用以下两种方法： 方法一：使用闭包 我们可以通过将变量封装在一个函数内部，并返回一个函数的方式创建一个闭包，使得该变量可以被定时器正确调用。以下是一个…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部