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日

相关文章

  • p5.js实现简单货车运动动画

    实现简单货车运动动画可以使用p5.js中的画布和动画函数，下面是一个完整的攻略。 1. 准备工作 在开始编写代码之前，我们需要做一些准备工作。 Step 1: 引入p5.js库 我们需要在HTML文档中引入p5.js库，可以通过以下方式来实现： <!DOCTYPE html> <html lang="en"> &l…

    JavaScript 2023年6月10日
    00

  • 原生js实现倒计时–2018

    原生js实现倒计时–2018 本文将介绍如何使用原生js实现一个倒计时效果来迎接2018年的到来。 前置知识 在学习本文之前，请确保您已经具备以下基本的前端知识：- HTML标记语言- CSS基础样式及布局- JavaScript基础知识- DOM操作基础 HTML代码 首先我们需要在页面上添加一个用于显示倒计时的容器，其结构如下所示： <div i…

    JavaScript 2023年5月27日
    00

  • javascript实现unicode与ASCII相互转换的方法

    JavaScript实现Unicode与ASCII相互转换的方法 在JavaScript中，我们经常需要对字符进行编码和解码以便于传输和存储数据。Unicode和ASCII是两种常见的字符编码方式，其中Unicode支持更多的字符集。本文将介绍如何在JavaScript中实现Unicode和ASCII之间的相互转换。 Unicode转ASCII 将Unico…

    JavaScript 2023年5月19日
    00

  • javascript 模拟坦克大战游戏(html5版)附源码下载

    让我来详细讲解一下“javascript 模拟坦克大战游戏(html5版)附源码下载”的完整攻略。首先，这个游戏是使用html5和javascript开发的，所以我们需要了解一些前端基础知识。 1. 技术要求 HTML5 Javascript CSS 2. 游戏介绍 这个游戏是一款双人对战的坦克大战游戏，支持键盘操作。游戏的地图分为草地、钢铁墙和河流三种地形…

    JavaScript 2023年6月10日
    00

  • JS图片预加载 JS实现图片预加载应用

    JS图片预加载指的是在页面加载时，提前加载所有需要的图片资源，从而缩短用户等待时间，提高用户体验。下面，我将为大家介绍如何使用JavaScript实现图片预加载以及如何应用到实际项目中。 实现图片预加载 以下是实现图片预加载的JavaScript代码： let imgList = new Array( "image1.jpg", &quo…

    JavaScript 2023年6月11日
    00

  • js常用自定义公共函数汇总

    JS常用自定义公共函数是指在JS开发中常用的、可多次使用的函数，初学者建议掌握，提高开发效率。 常用自定义公共函数 1. 获取URL查询参数 在开发中，获取URL中的查询参数是很常见的需求。以下是一个获取URL中查询参数的函数： function getQueryString(name) { var reg = new RegExp("(^|&am…

    JavaScript 2023年5月27日
    00

  • 使用js编写实现拼图游戏

    当你想要使用JS编写实现拼图游戏的时候，你需要遵循如下的步骤： 1. 确定游戏规则和目标 在编写拼图游戏之前，你需要确定游戏的规则和目标。例如，游戏可以是一个15方块的格子，每个方块初始位置随机分布，玩家需要通过移动方块来拼成完整的图案。游戏的目标是以最少的移动步骤完成拼图。 2. 创建HTML模板 使用html创建一个基础游戏界面，在这个游戏界面中，你需要…

    JavaScript 2023年6月10日
    00

  • 在JavaScript中调用php程序

    当需要在JavaScript中调用php程序时，通常可以通过Ajax来实现。Ajax可以实现页面异步加载和更新，从而实现与服务器的后端交互。以下是完整攻略： 1. 发送Ajax请求 使用XMLHttpRequest对象发送Ajax请求，示例代码如下： function ajaxRequest() { var xhr = new XMLHttpRequest(…

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