使用jQuery的validation插件來完成表單的驗證

原創

2020-02-20 15:36

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