12、jQuery插件之Validform表单验证插件

最新推荐文章于 2024-08-24 00:47:34 发布
最新推荐文章于 2024-08-24 00:47:34 发布
阅读量1.3k 收藏
点赞数
分类专栏： jQuery 文章标签： jquery 表单 插件
官网:http://validform.rjboy.cn/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Demo - Validform - 一行代码搞定整站的表单验证！</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />
    <link href="demo.css" type="text/css" rel="stylesheet" />
    <style>
    .registerform li{padding-bottom:20px;}
    .Validform_checktip{margin-left:10px;}
    .registerform .label{display:inline-block; width:70px;}
    .action{padding-left:92px;}
    </style>
</head>
<body> 
<div class="main">
    <div class="wraper">       
        <h2 class="green">智能的提示信息</h2>       
        <form class="registerform" action="ajax_post.php">
            <ul>
                <li>
                    <label class="label">
                        <span class="need">*</span> 中文名
                    </label>
                    <input type="text" value="" name="name" class="inputxt" />
                </li>
                <li>
                    <label class="label">
                        <span class="need">*</span> 密码：
                    </label>
                    <input type="password" value="" name="userpassword" class="inputxt" />
                </li>
                <li>
                    <label class="label">
                        <span class="need">*</span> 确认密码：
                    </label>
                    <input type="password" value="" name="userpassword2" class="inputxt" />
                </li>
                <li>
                    <label class="label">
                        <span class="need">*</span> 所在城市：
                    </label>
                    <select name="province" >
                        <option value="">请选择城市</option>
                        <option value="1">瑞金市</option>
                    </select>
                </li>
                <li>
                    <label class="label">
                        <span class="need">*</span> 性别：
                    </label>
                    <input type="radio" value="1" name="gender" id="male" class="pr1" />
                    <label for="male">男</label>
                    <input type="radio" value="2" name="gender" id="female" class="pr1" />
                    <label for="female">女</label>
                </li>
                <li>
                    <label class="label">
                        <span class="need">*</span> 购物网：
                    </label>
                    <input name="shoppingsite2" class="rt2" id="shoppingsite21" type="checkbox"  value="1" />
                    <label for="shoppingsite21">新蛋</label>
                    <input name="shoppingsite2" class="rt2" id="shoppingsite22" type="checkbox"  value="2" />
                    <label for="shoppingsite22">淘宝</label>
                    <input name="shoppingsite2" class="rt2" id="shoppingsite23" type="checkbox"  value="3" />
                    <label for="shoppingsite23">京东</label>
                </li>
            </ul>
            <div class="action">
                <input type="submit" value="提 交" /> <input type="reset" value="重 置" />
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="manuals/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Validform_v5.3.2_min.js"></script>
<script type="text/javascript">
$(function(){
    //$(".registerform").Validform();  //就这一行代码！;
       
    var demo=$(".registerform").Validform({
        tiptype:3,
        label:".label",
        showAllError:true,
        datatype:{
            "zh1-6":/^[\u4E00-\u9FA5\uf900-\ufa2d]{1,6}$/
        },
        ajaxPost:true
    });
   
    //通过$.Tipmsg扩展默认提示信息;
    //$.Tipmsg.w["zh1-6"]="请输入1到6个中文字符！";
    demo.tipmsg.w["zh1-6"]="请输入1到6个中文字符！";
   
    demo.addRule([{
        ele:".inputxt:eq(0)",
        datatype:"zh2-4"
    },
    {
        ele:".inputxt:eq(1)",
        datatype:"*6-20"   
    },
    {
        ele:".inputxt:eq(2)",
        datatype:"*6-20",
        recheck:"userpassword" 
    },
    {
        ele:"select",
        datatype:"*"
    },
    {
        ele:":radio:first",
        datatype:"*"
    },
    {
        ele:":checkbox:first",
        datatype:"*"
    }]);
   
})
</script>
</body>

</html>


给表单元素绑定验证类型和提示汉字
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Demo - Validform - 一行代码搞定整站的表单验证！</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />
    <link href="demo.css" type="text/css" rel="stylesheet" />
    <style>
    .registerform li{padding-bottom:20px;}
    .Validform_checktip{margin-left:10px;}
    .registerform .label{display:inline-block; width:70px;}
    .action{padding-left:92px;}
    </style>
</head>
<body> 
<div class="main">
    <div class="wraper">
        <p class="tr"><a href="../demo.html" class="blue ml10 fz12">返回示例首页&raquo;</a></p>
       
        <h2 class="green">给表单元素绑定验证类型和提示文字</h2>
        <form class="registerform" method="post" action="ajax_post.php">
            <table width="100%" style="table-layout:fixed;">
                <tr>
                    <td class="need" style="width:10px;">*</td>
                    <td style="width:70px;">昵称：</td>
                    <td style="width:205px;"><input type="text" value="" name="name" class="inputxt" datatype="s6-18" errormsg="昵称至少6个字符,最多18个字符！" /></td>
                    <td><div class="Validform_checktip"></div></td>
                </tr>
                <tr>
                    <td class="need">*</td>
                    <td>移动电话：</td>
                    <td><input type="text" value="" name="tel" class="inputxt" datatype="m" errormsg="请输入您的手机号码！"  /></td>
                    <td><div class="Validform_checktip"></div></td>
                </tr>
                <tr>
                    <td class="need">*</td>
                    <td>所在城市：</td>
                    <td><select name="province" datatype="*" nullmsg="请选择所在城市！" errormsg="请选择所在城市！"><option value="">请选择城市</option><option value="1">瑞金市</option></select></td>
                    <td><div class="Validform_checktip"></div></td>
                </tr>
                <tr>
                    <td class="need">*</td>
                    <td>性别：</td>
                    <td><input type="radio" value="1" name="gender" id="male" class="pr1" datatype="*" errormsg="请选择性别！" /><label for="male">男</label> <input type="radio" value="2" name="gender" id="female" class="pr1" /><label for="female">女</label></td>
                    <td><div class="Validform_checktip"></div></td>
                </tr>
                <tr>
                    <td class="need">*</td>
                    <td>购物网：</td>
                    <td>
                        <input name="shoppingsite2" class="rt2" id="shoppingsite21" type="checkbox"  value="1" datatype="*" errormsg="请选择您常去的购物网站！" /><label for="shoppingsite21">新蛋</label>
                        <input name="shoppingsite2" class="rt2" id="shoppingsite22" type="checkbox"  value="2" /><label for="shoppingsite22">淘宝</label>
                        <input name="shoppingsite2" class="rt2" id="shoppingsite23" type="checkbox"  value="3" /><label for="shoppingsite23">京东</label>
                    </td>
                    <td><div class="Validform_checktip"></div></td>
                </tr>
                <tr>
                    <td class="need"></td>
                    <td>备注：</td>
                    <td colspan="2">
                        <textarea tip="请在这里输入您的意见。" altercss="gray" class="gray" name="msg" value="">请在这里输入您的意见。</textarea>
                    </td>
                </tr>
                <tr>
                    <td class="need"></td>
                    <td></td>
                    <td colspan="2" style="padding:10px 0 18px 0;">
                        <input type="submit" value="提 交" /> <input type="reset" value="重 置" />
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>

<script type="text/javascript" src="manuals/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Validform_v5.3.2_min.js"></script>
<script type="text/javascript">
    $(function(){
        //$(".registerform").Validform();  //就这一行代码！;
       
        $(".registerform").Validform({
            tiptype:2
        });
    })
</script>
</body>
</html>

给表单下的任一对象绑定提交表单方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Demo - Validform - 一行代码搞定整站的表单验证！</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />
    <link href="demo.css" type="text/css" rel="stylesheet" />
    <style>
    .registerform li{padding-bottom:20px;}
    .Validform_checktip{margin-left:10px;}
    .registerform .label{display:inline-block; width:70px;}
    .action{padding-left:92px;}
    </style>
</head>
<body> 
<div class="main">
    <div class="wraper">
        <p class="tr"><a href="../demo.html" class="blue ml10 fz12">返回示例首页&raquo;</a></p>
       
        <h2 class="green">给表单下的任一对象绑定提交表单方法</h2>
        <form class="registerform" method="post" action="ajax_post.php">
            <table width="100%" style="table-layout:fixed;">
                <tr>
                    <td class="need" style="width:10px;">*</td>
                    <td style="width:70px;">昵称：</td>
                    <td style="width:205px;"><input type="text" value="" name="name" class="inputxt" datatype="s6-18" errormsg="昵称至少6个字符,最多18个字符！" /></td>
                    <td><div class="Validform_checktip"></div></td>
                </tr>
                <tr>
                    <td class="need">*</td>
                    <td>移动电话：</td>
                    <td><input type="text" value="" name="tel" class="inputxt" datatype="m" errormsg="请输入您的手机号码！"  /></td>
                    <td><div class="Validform_checktip"></div></td>
                </tr>
                <tr>
                    <td class="need"></td>
                    <td>备注：</td>
                    <td colspan="2">
                        <textarea tip="请在这里输入您的意见。" altercss="gray" class="gray" name="msg" value="">请在这里输入您的意见。</textarea>
                    </td>
                </tr>
                <tr>
                    <td class="need"></td>
                    <td></td>
                    <td colspan="2" style="padding:10px 0 18px 0;">
                        <a href="javascript:void(0);" class="btn_sub mr20">提交表单</a>
                        <a href="javascript:void(0);" class="btn_reset">重置表单</a>
                    </td>
                </tr>
            </table>
        </form>      
    </div>
</div>
<script type="text/javascript" src="manuals/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Validform_v5.3.2_min.js"></script>
<script type="text/javascript">
$(function(){
    //$(".registerform").Validform();  //就这一行代码！;
   
    $(".registerform").Validform({
         btnSubmit:".btn_sub",
         btnReset:".btn_reset"
    });
})
</script>

</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Demo - Validform - 一行代码搞定整站的表单验证！</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />
    <link href="demo.css" type="text/css" rel="stylesheet" />
    <style>
    .registerform li{padding-bottom:20px;}
    .Validform_checktip{margin-left:10px;}
    .registerform .label{display:inline-block; width:70px;}
    .action{padding-left:92px;}
    </style>
</head>
<body> 
<div class="main">
    <div class="wraper">
        <p class="tr"><a href="../demo.html" class="blue ml10 fz12">返回示例首页&raquo;</a></p>
       
        <h2 class="green">密码强度提示与验证提示同时显示</h2>
       
        <form class="registerform" action="ajax_post.php" method="post">
            <table width="100%" style="table-layout:fixed;">
                <tr>
                    <td class="need" style="width:10px;">*</td>
                    <td style="width:70px;">密码：</td>
                    <td style="width:210px;">
                        <input type="password" value="" name="password" class="inputxt" plugin="passwordStrength"  datatype="*6-18" errormsg="密码至少6个字符,最多18个字符！" />
                        <div class="passwordStrength">密码强度： <span>弱</span><span>中</span><span class="last">强</span></div>
                    </td>
                    <td>
                        <div class="Validform_checktip"></div>
                    </td>
                </tr>
                <tr>
                    <td class="need">*</td>
                    <td>确认密码：</td>
                    <td><input type="password" value="" name="repassword" class="inputxt" recheck="password"  datatype="*6-18" errormsg="两次输入的密码不一致！" /></td>
                    <td><div class="Validform_checktip"></div></td>
                </tr>
                <tr>
                    <td class="need"></td>
                    <td></td>
                    <td colspan="2" style="padding:10px 0 18px 0;">
                        <input type="submit" value="提 交" /> <input type="reset" value="重 置" />
                    </td>
                </tr>
            </table>
        </form>  
    </div>
</div>

<script type="text/javascript" src="manuals/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Validform_v5.3.2_min.js"></script>
<script type="text/javascript" src="passwordStrength-min.js"></script>
<script type="text/javascript">
$(function(){
    //$(".registerform").Validform();  //就这一行代码！;
       
    $(".registerform").Validform({
        tiptype:2,
        usePlugin:{
            passwordstrength:{
                minLen:6,
                maxLen:18
            }
        }
    });
})
</script>
</body>
</html>

jQuery表单验证插件Validform
03-06
支持验证以下类型：数字及长度、字符、身份证格式及是否正确、手机号、邮箱、网址等，功能齐全，使用方便。
jquery 表单验证插件Validform插件制作一行代码搞定整站的jquery表单验证
08-24
jQuery Validform是一款强大的表单验证插件，它以其简洁的API和高度可定制化的特点，在前端开发中广受欢迎。本文将详细介绍如何使用jQuery Validform插件来实现高效、灵活的表单验证。 **一、Validform简介** ...
【jquery】Validform，一款不错的 jquery 表单验证插件
dengrongshou5105的博客
02-15 207
关于 Validform 这是一款很不错的 jquery 表单验证插件，它几乎能够满足任何验证需求，仅仅一行代码就能搞定整站的表单验证。 $('form').Validform(); 为什么能如此方便？插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素，让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符，这样你可以随便添加或者去掉任一表单元素...
jquery 插件 validform
qq_40414209的博客
09-19 201
官网 引入validform 必须在juqery引入之后 <script src="../plugins/jquery/validform/js/Validform_v5.3.2_min.js"></script> #使用 js $(function(){ var demo=$(".registerform").Validform({ tiptype:3, lab...
validform
weixin_30362801的博客
08-23 200
一、validform是什么？ validform是一款智能的表单验证js插件，它是基于jQuery库与css,我们只需要把表单对象放入， 就可以对整个表单数据进行验证，而不需要每次验证都要写个js脚本。 二、validform优点 1.自定义你想要的信息提示效果 （弹窗...
Jquery表单验证插件–Validform：一行代码搞定整站的
蹲在墙头盼红杏
04-27 1468
你没看错，就一行代码搞定整站的表单验证！1 $(".demoform").Validform();为什么能如此方便？插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素，让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符，这样你可以随便添加或者去掉任一表单元素而不必修改验证代码，从而使仅用一行代码去搞定整站的表单验证的梦想成为现实！在线Demo | 马上下载体验效果图：功能介绍：1、支持一个页面多表单的检测。例如你给页面上的各form绑定同样的class名称“demoform
jquery validate和validform验证插件的对比.pdf
02-28
《jQuery Validate与Validform验证插件的对比分析》 在前端开发中，表单验证是不可或缺的一环，它能够确保用户输入的数据符合预期格式，从而提高用户体验和数据准确性。jQuery Validate 和 Validform 是两个广泛...
jquery validate和validform验证插件的对比.docx
02-28
**jQuery Validate 和 Validform 验证插件对比分析** 在前端开发中，表单验证是不可或缺的一部分，确保用户输入的数据符合预设的规则，提高用户体验并减少服务器端的压力。jQuery Validate 和 Validform 是两个广泛...
Validform.js jQuery验证插件 使用说明
热门推荐
GeneralYY0的专栏
03-04 1万+
官网原文：http://validform.rjboy.cn/demo.html Validform常用功能示例 申请VIP 您可以享受到： 及时的技术支持(1年)一对一的使用培训第一手的版本更新信息和讲解 申请条件： 1年365天，每天1元钱，您只需支付365元就能获得 VIP服务。 无论您是建站公司还是工作室，或者是个人，为了您的效率，请把繁杂的验证交给专业
Jquery表单验证插件–Validform
06-27
一行代码搞定整站的验证，你没看错，就是是一行。效果比较友好，适合注册之类的
jquery表单验证插件Validform框架demo实例代码下载
07-17
jquery表单验证插件Validform框架demo实例代码
Validform_checktip
pingdouble的专栏
08-14 3120
Validform_checktip
JQuery学习—JQuery的Validform学习
阿飞云漫步
02-20 1083
JQuery的Validform学习
jquery Validform 表单验证
wyqjx
06-13 156
Validform常用功能示例 基本功能 给表单元素绑定验证类型和提示文字 给表单下的任一对象绑定提交表单方法 修改默认的提示文字，如默认弹出框的标题，验证成功后的提示文字等 检测重复密码是否与第一次输入的密码一致 逐条验证与一次验证显示所有错误信息 使用ajax的方式提交表单 让表单只能提交一次，提交成功后再提交表单将不会有操作 在表单元素有输入时才验证，没有输入时不验...
Validform jQuery插件详解
最新发布
牛肉胡辣汤
08-24 822
Validform 是一款基于 jQuery 的表单验证插件，它可以帮助开发者快速实现各种表单验证功能，包括必填项、长度限制、正则验证、重复密码验证等。Validform 提供了丰富的配置选项，能够满足各种验证需求，并且支持自定义提示信息和样式，使得表单验证变得简单而灵活。
jquery validform 插件使用
dly120219891208的专栏
10-17 428
博主比较懒http://validform.rjboy.cn/document.html
Validform表单验证框架详解
zgphacker2010的专栏
09-09 2065
Validform是另外一种表单验证框架，也是基于jQuery框架，用法比较灵活。 这里使用该框架的版本号为：Validform_v5.3.2 官网：http://validform.rjboy.cn/目前已经打不开了，本文最后会将官方的的demo打包 。 下面来看看官方给的使用入门：这里直接按官方的来写 Validform使用入门 1、引入css 请查看下载文件中的style.c...
Validform表单验证总结
08-10 356
近期项目里用到了表单的验证，选择了Validform_v5.3.2。 先来了解一下一些基本的参数： 通用表单验证方法：Demo: $(".demoform").Validform({//$(".demoform")指明是哪一表单需要验证,名称需加在form表单上; btnSubmit:"#btn_sub", //#btn_sub是该表单下要绑定点击提交表单事...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值