基于Jquery的FormValidator表单验证插件

来源:互联网 时间:1970-01-01

首先非常感谢网友大白的无私分享,此Jquery插件是他的一款原创FormValidator表单验证插件,默认带了11个验证Demo,如有什么不明白之处可以看使用帮助文档,jQuery.FormValidator.chm也一起打包在作品里面了,里面有详细介绍每个功能的用法。

包含了以下验证功能:

1、控件值不能为空

2、控件值长度限制

3、选中项数量限制

4、控件值范围限制

5、控件值类型限制

6、控件值格式化

7、两个控件值比较

8、自定义验证方法

9、下拉必选

10、表单验证方式

11、控件独自验证

看一个简单的表单用户名验证插件

 代码如下 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>基于Jquery的FormValidator表单验证插件</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link type="text/css" href="Images/css.css" rel="Stylesheet" />

    <script type="text/javascript" src="Scripts/jquery1.2.6.js"></script>

    <script type="text/javascript" src="Scripts/jQuery.FormValidator.js"></script>

</head>

<body>

    <h5>控件值不能为空</h5>

    <h6>示例1:</h6>    <fieldset>
        <legend>验证之前,除去控件值首尾空格。</legend>     
        <form id="FormDemo01_0" action="Demo.01.htm" method="post">
            <dl style="vertical-align:middle;">
                <dt>用户名:</dt>
                <dd><input type="text" id="UserName0" name="UserName0" /> <tt id="TipUserName0"></tt></dd>
                <dd><input type="submit" value="提交" /></dd>
            </dl>                       
        </form>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#FormDemo01_0").SetValidateSettings({});
                $("#UserName0").SetValidateSettings({
                    FormValidate: {
                        Empty: {
                            Value: true,
                            Message: "用户名不能为空"
                        }
                    },
                    Message: {
                        Text: {
                            Show: "请输入用户名!",
                            Success: "输入正确!",
                            Error: "必须输入用户名!",
                            Focus: "正在输入..."
                        },
                        MessageSpaceHolderID: "TipUserName0"
                    }
                });
            });
        </script>
    </fieldset>
    <h6>示例2:</h6>
    <fieldset>
        <legend>验证之前,不除去控件值首尾空格。</legend>
        <form id="FormDemo01_1" action="Demo.01.htm" method="post">
            <dl>
                <dt>用户名</dt>
                <dd><input type="text" id="UserName1" name="UserName1" /> <tt id="TipUserName1"></tt></dd>
                <dd><input type="submit" value="提交" /></dd>
            </dl>                       
        </form>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#FormDemo01_1").SetValidateSettings({});
                $("#UserName1").SetValidateSettings({
                    FormValidate: {
                        Empty: {
                            Value: true,
                            Message: "用户名不能为空"
                        }
                    },
                    Config: {
                        AutoTrim: false //取消默认的自动去除首尾空格设置
                    },
                    Message: {
                        Text: {
                            Show: "请输入用户名!",
                            Success: "输入正确!",
                            Error: "必须输入用户名!",
                            Focus: "正在输入..."
                        },
                        MessageSpaceHolderID: "TipUserName1"
                    }
                });
            });
        </script>
    </fieldset>
  
</body>
</html>




相关阅读:
Top