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验证规则用于检测输入内容是否为偶数，实际上是通过对输入内容进行求模运算判断是否为偶数。

本文链接：http://task.lmcjl.com/news/10114.html

展开阅读全文

上一篇：如何在EditPlus中对JSON进行美化和格式化？下一篇：使用Grafana监控MySQL数据库的性能和状态

热门文章排行

推荐文章

关键词