使用jQuery的validation插件来完成表单的验证

来源：互联网发布：淘宝加盟代理骗局编辑：程序博客网时间：2024/05/14 03:25

            **使用jQuery的validation插件来完成表单的验证**

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>validation 练习</title>    <link rel="stylesheet" type="text/css" href="../reset.css">    <link rel="stylesheet" type="text/css" href="style.css">    <script type="text/javascript" src="../jquery-1.9.1.js"></script>    <script type="text/javascript" src="jquery.validate.js"></script>    <script type="text/javascript" src="jquery.validate.messages_cn.js"></script>    <script type="text/javascript" src="index.js"></script>    <style type="text/css">    #content{width:800px;margin:30px auto;}    #content h1{text-align: center;line-height: 50px;font-size: 20px;}    #customValidation p{height: 50px;overflow: hidden;}    #customValidation p label{text-align: left;width:100px;float: left;line-height: 40px;font-size: 15px;color:#707070;}    #customValidation p input{float: left;width: 300px;height: 18px;line-height: 18px;border: 1px solid #ccc;padding: 10px 0;margin-right: 5px;font-size: 15px;text-indent: 5px;}    #customValidation p span{float: left;line-height: 40px;}    #customValidation p label.error{float: right;width: 280px;text-align: left;}    #customValidation p input.submit{height: 30px;width: 60px;line-height: 30px;padding: 0;text-align: center;color: #777;cursor: pointer;margin-left: 100px;}    #customValidation p em{height: 30px;line-height: 30px;margin-left: 5px;}    #customValidation p em.error{background: url(zhuce2.gif) 0 0 no-repeat;padding-left:18px;padding-bottom: 2px;}    #customValidation p em.success{background: url(zhuce3.gif) 0 0 no-repeat;padding-left:18px;padding-bottom: 2px;}    </style></head><body>    <div id="content">        <h1>表单验证</h1>        <form id="customValidation" action="">            <p>                <label for="cuser">用户名：</label>                <input type="text" id="cuser" name="username"  >                <span>*</span>            </p>            <p>                <label for="cpass">密码：</label>                <input type="password" id="cpass" name="password" >                <span>*</span>            </p>            <p>                <label for="cemail">电子邮件：</label>                <input id="cemail" name="email" >                <span>*</span>            </p>            <p>                <label for="curl">网址：</label>                <input id="curl" name="url" >            </p>            <p>                <label for="cvalcode">验证码：</label>                <input id="cvalcode" name="valcode" >=7+9            </p>            <p>                <input type="submit" class="submit" value="提交">            </p>        </form>    </div>    <script type="text/javascript">        $(function(){            $("#customValidation").validate({                rules:{                    username:{                        required:true,                        minlength:2                    },                    password:{                        required:true,                        minlength:6                    },                    email:{                        required:true,                        email:true                    },                    url:"url",                    valcode:{                        formula:"7+9"                    }                },                messages:{                    username:{                        required:"请输入用户名",                        minlength:"至少输入两个字符",                    },                    password:{                        required:"请输入密码",                        minlength:"至少输入六个字符",                    },                    email:{                        required:"请输入邮箱",                        email:"请输入正确的邮箱地址",                    },                    url:{                        url:"请输入正确的网址",                    }                },                errorElement:"em",                success:function(label){                    label.text(" ").addClass("success");                }            });        })    </script>    <script type="text/javascript">        $(function(){            $.validator.addMethod(                "formula",                function(value,element,param){                    return value == eval(param);                },                "请正确输入数学公式计算后的结果"            )        })    </script></body></html>

源码下载地址：http://pan.baidu.com/s/1eQfQPfs

0 0