第九章 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>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。