1. 表单验证插件-----Validation

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

<html>

<head>

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

    <title></title>

    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

    <script src="lib/jquery.validate.js" type="text/javascript"></script>

    <style type="text/css">

        *

        {

            font-family: Verdana;

            font-size: 96%;

        }

        label

        {

            width: 10em;

            float: left;

        }

        label.error

        {

            float: none;

            color: red;

            padding-left: .5em;

            vertical-align: top;

        }

        p

        {

            clear: both;

        }

        .submit

        {

            margin-left: 12em;

        }

        em

        {

            font-weight: bold;

            padding-right: 1em;

            vertical-align: top;

        }

        em.error

        {

            background: url("images/unchecked.gif") no-repeat 0px 0px;

            padding-left: 16px;

        }

        em.success

        {

            background: url("images/checked.gif") no-repeat 0px 0px;

            padding-left: 16px;

        }

    </style>

    <script type="text/javascript">

        $(document).ready(function () {

            //自定义一个验证方法

            $.validator.addMethod(

            "formula", //验证方法名称

            function (value, element, param) {//验证规则

                return value == eval(param);

            },

            '请正确输入数学公式计算后的结果'//验证提示信息

            );

            $("#commentForm").validate({

                rules: {

                    username: {

                        required: true,

                        minlength: 2

                    },

                    email: {

                        required: true,

                        email: true

                    },

                    url: "url",

                    comment: "required",

                    valcode: {

                        formula: "7+9"

                    }

                },

                messages: {

                    username: {

                        required: '请输入姓名',

                        minlength: '请至少输入两个字符'

                    },

                    email: {

                        required: '请输入电子邮件',

                        email: '请检查电子邮件的格式'

                    },

                    url: '请检查网址的格式',

                    comment: '请输入您的评论'

                },

                errorElement: "em",             //用来创建错误提示信息标签

                success: function (label) {            //验证成功后的执行的回调函数

                    //label指向上面那个错误提示信息标签em

                    label.text(" ")                //清空错误提示消息

                .addClass("success"); //加上自定义的success类

                }

            });

        });

    </script>

</head>

<body>

    <form class="cmxform" id="commentForm" method="get" action="">

    <fieldset>

        <legend>一个简单的验证带验证提示的评论例子</legend>

        <p>

            <label for="cusername">姓名</label>

            <em>*</em><input id="cusername" name="username" size="25" />

        </p>

        <p>

            <label for="cemail">电子邮件</label>

            <em>*</em><input id="cemail" name="email" size="25" />

        </p>

        <p>

            <label for="curl">网址</label>

            <em></em>

            <input id="curl" name="url" size="25" value="" />

        </p>

        <p>

            <label for="ccomment">你的评论</label>

            <em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea>

        </p>

        <p>

            <label for="cvalcode">验证码</label>

            <input id="cvalcode" name="valcode" size="25" value="" />=7+9

        </p>

        <p>

            <input class="submit" type="submit" value="提交" />

        </p>

    </fieldset>

    </form>

</body>

</html>

　　2.表单验证插件-----Validation Engine

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>jQuery Validation Engine 表单验证中文版 &raquo; 在线演示 - 前端开发仓库</title>

<link rel="stylesheet" href="/css/demo.css">

<link rel="stylesheet" href="css/validationEngine.jquery.css">

<link rel="stylesheet" href="css/layout.css">

</head>

<body>

<div class="wrap">

    <div class="side">

        <div class="logo">

            <a href="http://code.ciaoca.com/" target="_blank">前端开发仓库</a>

            <em>在线演示</em>

        </div>

    </div>

    <div class="main">

        <div class="inwrap">

            <h1>jQuery Validation Engine 表单验证中文版</h1>

            <h2>较好体验的中文表单</h2>

            <div class="detail">

                <p>示例中经过样式调整，以及使用部分参数来提高用户体验。</p>

            </div>

            <div class="example">

                <form id="user_form" class="user_form formular" method="post">

                    <fieldset>

                        <legend>账号资料</legend>

                        <dl class="form_add">

                            <dt>用户名</dt>

                            <dd><input class="text-input validate[required]" type="text"></dd>

                            <dt>密码</dt>

                            <dd><input class="text-input validate[required,minSize[6],maxSize[20]]" type="password" id="pwd"></dd>

                            <dt>确认密码</dt>

                            <dd><input class="text-input validate[condRequired[pwd],equals[pwd]]" type="password"></dd>

                        </dl>

                    </fieldset>

                    <fieldset>

                        <legend>个人信息</legend>

                        <dl class="form_add">

                            <dt>姓名</dt>

                            <dd><input class="text-input validate[required,custom[chinese],minSize[2]]" type="text" id="name"></dd>

                            <dt>出生日期</dt>

                            <dd><input class="text-input validate[required,custom[date]]" type="text"></dd>

                            <dt>手机号码</dt>

                            <dd><input class="text-input validate[required,custom[phone]]" type="text"></dd>

                            <dt>身份证号码</dt>

                            <dd><input class="text-input validate[required,custom[chinaId]]" type="text"></dd>

                            <dt>QQ</dt>

                            <dd><input class="text-input validate[required,custom[qq]]" type="text"></dd>

                            <dt>E-mail</dt>

                            <dd><input class="text-input validate[required,custom[email]]" type="text"></dd>

                            <dt>网站/博客</dt>

                            <dd><input class="text-input validate[required,custom[url]]" type="text"></dd>

                        </dl>

                    </fieldset>

                    <fieldset>

                        <legend>收件人信息</legend>

                        <dl class="form_add">

                            <dt>所在地</dt>

                            <dd>

                                <select class="validate[required]">

                                    <option value="">请选择</option>

                                    <option value="option1">国内</option>

                                    <option value="option2">国外</option>

                                </select>

                            </dd>

                            <dt>街道地址</dt>

                            <dd><input class="text-input validate[required,minSize[10]]" type="text"></dd>

                            <dt>邮编</dt>

                            <dd><input class="text-input validate[required,custom[chinaZip]]" type="text"></dd>

                        </dl>

                    </fieldset>

                    <fieldset>

                        <legend>其他</legend>

                        <dl class="form_add">

                            <dt>验证码</dt>

                            <dd><input class="text-input validate[required,ajax[ajaxVerify]]" type="text" style="width:100px;" data-prompt-position="centerRight:100,0"> <img src="img/verify.jpg" width="90" height="26"></dd>

                            <dt></dt>

                            <dd><input class="radio validate[required]" type="checkbox" id="agree" name="agree" data-prompt-position="centerRight:80,0"> <label for="agree">同意用户协议</label></dd>

                        </dl>

                    </fieldset>

                    <input class="submit" type="submit" value="验证 & 提交表单">

                </form>

            </div>

        </div>

    </div>

</div>

<script src="/js/jquery-1.7.2.min.js"></script>

<script src="js/languages/jquery.validationEngine-zh-CN-ciaoca.js"></script>

<script src="js/jquery.validationEngine.min.js"></script>

<script>

$.validationEngineLanguage.allRules.ajaxVerify={

    url: 'phpajax/ajaxValidateVerify.php',

    extraData: 'name=eric',

    alertTextOk: '<strong style="color:#090;">√<strong>',

    alertText: '<strong>×</strong>',

    alertTextLoad: ''

};

jQuery(document).ready(function(){

    // binds form submission and fields to the validation engine

    jQuery('#user_form').validationEngine({

        scroll: false,

        //binded: false,

        //showArrow: false,

        promptPosition: 'centerRight',

        maxErrorsPerField: 1,

        showOneMessage: true,

        addPromptClass: 'formError-noArrow formError-text',

        custom_error_messages: {

            '#pwd': {

                'minSize': {

                    'message': '* 密码不得少于 6 位，建议使用英文与数字组合'

                }

            }

        }

    });

});

</script>

</body>

</html>

第九章 jQuery验证插件简介的更多相关文章

  1. jQuery验证插件

    原文:jQuery验证插件 学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件(validate. ...

  2. 三、jQuery--jQuery基础--jQuery基础课程--第9章 jQuery 常用插件

    1.表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:$(form).validate({option ...

  3. jQuery验证插件使用初步

    validate是一款优秀的表单验证插件,其初步使用方法如下: (1)前台页面代码: <form id="form1" runat="server"> ...

  4. jQuery验证插件 Validate详解

    1.引入必要的文件,以及语言中文提示包 2.使用规则如下: 序号 规则 描述 1 required:true 必须输入的字段. 2 remote:"check.php" 使用 aj ...

  5. Jquery验证插件 JqueryValidation 动态验证用户名等

    可以参考:http://www.w3cschool.cc/jquery/jquery-plugin-validate.html //form1 验证用户名 $("#form1"). ...

  6. form 表单jquery验证插件使用

    第一部分:表单样式 <form action="#" method="post" id="regist">   <tabl ...

  7. jquery 验证插件 validate

    1)required:true 必输字段(2)remote:"check.php" 使用ajax方法调用check.php验证输入值(3)email:true 必须输入正确格式的电 ...

  8. jquery验证插件validate自定义扩展

    <script src="${pageContext.request.contextPath}/resources/js/jquery-1.12.0.min.js" type ...

  9. SPRING IN ACTION 第4版笔记-第九章Securing web applications-001-SpringSecurity简介(DelegatingFilterProxy、AbstractSecurityWebApplicationInitializer、WebSecurityConfigurerAdapter、@EnableWebSecurity、@EnableWebMvcS)

    一.SpringSecurity的模块 At the least, you’ll want to include the Core and Configuration modules in your ...

随机推荐

  1. Javascript高级篇-面向对象的特性

    一.创建对象 1.1初始化器 var any={ name:"some", age:10, action:function(){ alert(this.name+":&q ...

  2. 十六进制转十进制 - C

    我们经常碰到16进制数转10进制的情况,使用下面的C程序即可完成上述工作. 那么他是怎样的工作原理呢? 6.2.5 十六进制数转换成十进制数 16进制就是逢16进1,但我们只有0~9这十个数字,所以我 ...

  3. WinForm中的DataGridView控件显示数据字典方案2

    winform代码分析object数据库 做这部分功能的时候,上网搜索了很多资料,发现很少涉及到这方面的解决方案,找了相关的问题帖子,很多人都叫使用视图去处理,当然,用视图是可以解决这个问题,但是,这 ...

  4. Squid 日志详解

    原文地址: http://www.php-oa.com/2008/01/17/squid-log-access-store.html access.log 日志 在squid中access访问日志最为 ...

  5. 使用Filter防止浏览器缓存页面或请求结果

    仅仅须要两步: 1.定义一个Filter: /** * 防止浏览器缓存页面或请求结果 * @author XuJijun * */ public class NoCacheFilter impleme ...

  6. C#的图片拼接

    貌似很长时间没有写博客了,感觉再不写都要废了. 这段时间确实迷茫得不行,整天混混顿顿的,逃避这个逃避那个,话说已经辞职一个月了…… 这几天在学用libgdx做安卓上的游戏,感觉缺少一个图片拼接的工具, ...

  7. Codeforces Testing Round #12 B. Restaurant 贪心

    B. Restaurant Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/597/problem ...

  8. 三分钟掌握 JUnit3.0

    曾经公司做过一个.net的项目,在项目开发的过程中.我们採用的是分层的开发方式,大家先在一起讨论接口, 然后讨论完以后,形成文档,然后依照文档进行开发!这样就有一个问题,你必需要保证你的接口是正确的. ...

  9. Android通过http协议POST传输方式

    Android通过http协议POST传输方式如下: 方式一:HttpPost(import org.apache.http.client.methods.HttpPost) 代码如下: privat ...

  10. javaio学习笔记-字符流类(1)

    1.java.io包中的字符流类-BufferedReader和BufferedWriter: BufferedReader:缓存的输入字符流; BufferedWriter:缓存的输出字符流; In ...