jquery validate 使用示範

時間 2019-11-11

原文原文鏈接

最近應公司要求作了一個jquery的示例文件，包括：模態窗口怎麼實現；jquery validate下的校驗；怎麼作圖片特效；怎麼實現異步操做；實現圖片上傳剪切效果等不少特效；
這裏把jquery校驗的部分傳上來與你們分享，直接複製出來就能夠正常使用（沒有後臺異步校驗沒有意義，因此未上傳，若有須要qq聯繫）
文中須要用到的jquery validate的文件作校驗
有什麼不明白的地方能夠參考個人博文 jquery校驗詳解

代碼以下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
javascript

<head>
    <title>validateDemo.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">


    
    <link rel="stylesheet" type="text/css" href="../js/jQuery/validate/validation.css">
    <script type="text/javascript" src="../js/jQuery/jquery.js"></script>
    <script type="text/javascript" src="../js/jQuery/validate/jquery.validate.pack.js"></script>
    
    <script type="text/javascript" src="../js/jQuery/validate/additional-methods.js"></script>
    
    <script type="text/javascript" src="../js/jQuery/validate/messages_cn.js"></script>
    <script type="text/javascript" >
        $(document).ready(function(){
            //經過id查找要進行校驗的表單
            $("#signupForm").validate({
                //設置校驗觸發的時機,默認全是true。不要嘗試去設置它爲true，可能會有js錯誤。
                //onsubmit:false,
                //onfocusout:false,
                //onkeyup:false,
                //onclick:false,

                //驗證經過後執行的動做
                //success:function(label){
                //    label.text("ok!").addClass("success");
                //},
                //手動設置錯誤信息的顯示方式
                errorPlacement: function(error, element) {
                    error.appendTo(element.parent().next());
                   //    if ( element.is(":radio") )
                //        error.appendTo( element.siblings("span") );
                //    else if ( element.is(":checkbox") ){
                //        error.appendTo ( element.siblings("span") );
                //    }
                //        else
                //        error.appendTo( element.parent() );
                }
                ,
                rules:{
                username:{
                    required: true,
                    rangelength: [ 5, 7 ]
                },
                password: {
                    required: true,
                    minlength: 5
                },
                confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                },
                sex: {
                    required: true
                },

                email: {
                    required: true,
                    email: true
                },
                language: {
                    required: true,
                    rangelength:[2,3]
                },
                book: {
                    required: true,
                    rangelength:[2,3]
                },
                agree: "required",
                upload: {
                    required: true,
                    accept: "flv|jpg"
                }
            },
            //校驗提示信息
            messages: {
                username: {
                required: "請輸入用戶名",
                rangelength: "用戶名長度必須爲{0}到{1}個字符或漢字"
            },
            password: {
                required: "請輸入密碼",
                minlength: "密碼的最小長度是{0}個字符"
            },
            confirm_password: {
                required: "請輸入確認密碼",
                minlength: "確認密碼的最小長度是{0}個字符",
                equalTo: "確認密碼與密碼不相等"
            },
            email: "請輸入正確的郵箱",
            language: {
                required: "該項必須填寫",
                rangelength: "請您選擇{0}到{1}項語言"
            },
            book: {
                required: "該項必須選擇",
                rangelength:"請您選擇{0}到{1}本書"
            },
            agree: "您沒有贊成使用協議",
            upload: {
                    required: "請輸入上傳文件的路徑",
                    accept: "上傳文件的格式只能是 flv或jpg"
                }
        }
    });
        })
    </script>
    


</head>
<body style="font-family:'宋體','Arial Narrow';
        font-size:12px;
        ">



    

    <form class="cmxform" id="signupForm" method="get" action="">

    <fieldset >
        <legend>字段校驗、日曆控件完整示例</legend>
        <table>
        <tr>
            <td><label for="username">Username</label></td>
            <td><input id="username" name="username" /></td>
            
            <td></td>
        </tr>
        <tr>
            <td><label for="password">Password</label></td>
            <td><input id="password" name="password" type="password" /></td>
            <td></td>
        </tr>
        <tr>
            <td><label for="confirm_password">Confirm password</label></td>
            <td><input id="confirm_password" name="confirm_password" type="password" /></td>
            <td></td>
        </tr>
        <tr>
            <td><label for="sex">sex</label></td>
            <td><pre><input id="sex1" name="sex" type="radio" />男               <input id="sex2" name="sex" type="radio" />女</pre></td>
            <td></td>
        </tr>

        <tr>
            <td><label for="email">Email</label></td>
            <td><input id="email" name="email" /></td>
            <td></td>
        </tr>
        <tr>
            <td><label for="upload">Upload</label></td>
            <td><input type="file" name="upload" /></td>
            <td></td>
        </tr>
        <tr>
            <td><label for="language">language</label></td>
            <td><input type="checkbox" name="language" value="cn" />漢語
            <input type="checkbox" name="language" value="en" />英語
            <input type="checkbox" name="language" value="jp" />日語
            <input type="checkbox" name="language" value="ge" />德語
            </td>
            <td></td>
        </tr>
        <tr>
            <td><label for="book">book</label></td>
            <td><select name="book" multiple="multiple" >
            <option value="en">英語書</option>
            <option value="cn">漢語書</option>
            <option value="jp">日語書</option>
            <option value="ge">德語書</option>
            </select></td>
            <td></td>
        </tr>
        <tr>
            <td><label for="agree">贊成該協議</label></td>
            <td><input type="checkbox" class="checkbox" id="agree" name="agree" />
            </td>
            <td></td>
        </tr>
        <tr>
            <td><input class="submit" type="submit" value="Submit" /></td>
        </tr>
        </table>
    </fieldset>
    </form>

    







</body>
</html>

原文地址：http://blog.sina.com.cn/s/blog_608475eb0100oq0n.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。