首页 > 代码库 > 第九章 jQuery验证插件简介

第九章 jQuery验证插件简介

  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验证插件简介