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

最新推荐文章于 2021-12-04 21:27:23 发布

含笑一过

最新推荐文章于 2021-12-04 21:27:23 发布

阅读量806

点赞数

分类专栏：前端文章标签：验证

本文链接：https://blog.csdn.net/u013630488/article/details/49848383

版权

前端专栏收录该内容

51 篇文章 0 订阅

订阅专栏

            **使用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

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery的validation插件来完成表单的验证

**使用jQuery的validation插件来完成表单的验证**<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>validation 练习</title> <link rel="stylesheet" type="text/css" href="../reset.css">
复制链接

扫一扫