jquery.validate基礎

2024-04-27 15:02:06

字體：大中小

來源：轉載

供稿：網友

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>    <script type="text/Javascript" src="js/jquery.validate-1.14.0.js"></script>    <script type="text/javascript">    $().ready(function() {        var validate= $("#signupForm").validate({                rules: {                   firstname: "required",                   email: {                    required: true,                    email: true                   },                   passWord: {                    required: true,                    minlength: 5                   },                   confirm_password: {                    required: true,                    minlength: 5,                    equalTo: "#password"                   }                },                messages: {                   firstname: "請輸入姓名",                   email: {                    required: "請輸入Email地址",                    email: "請輸入正確的email地址"                   },                   password: {                    required: "請輸入密碼",                    minlength: "密碼不能小于{0}個字 符"                   },                       confirm_password: {                    required: "確認密碼",                    minlength: "確認密碼不能小于5個字符",                    equalTo: "兩次輸入密碼不一致不一致"                }            },            //把錯誤信息放到一處處理與 errorPlacement 函數連用            groups:{                login:"firstname email password confirm_password"            },            errorPlacement:function(error,element){                error.insertBefore("#error_info");                },            //提交表單后焦點在第一個錯誤表單內            focusInvalid:true,            //指定錯誤提示的CSS類名            errorClass:"error_info",            //指定驗證通過的css類名            validClass:"success_info",            //驗證通過提交表單            submitHandler:function(form){                console.info("提交表單"+$(form).serialize());            },            invalidHandler:function(event,validator){                console.info("表單錯誤"+validate.numberOfInvalids());            },            // 取消某個元素的校驗            ignore:"#firstname",            onfocusout:function(){                return false;            }        });        $("#check").click(function(){            var flag1=$("#signupForm").valid();//檢查表單是否有效            var flag2=$("#firstname").rules();//查詢元素的校驗規則            var flag3=$("#firstname").rules("add",{minlength:2,maxlength:10});//添加元素的校驗規則            var flag4=$("#firstname").rules("remove","minlength");//刪除元素的校驗規則            var flag5=validate.form();//驗證表單是否有效            var flag6=validate.element("#firstname");//驗證表單某個元素是否有效            validate.resetForm();//恢復表單原來的狀態            var flag7=validate.numberOfInvalids();//獲得錯誤元素個數            console.info(flag7);        });        //針對某個元素顯示特定的提示信息        validate.showErrors({            firstname:"ERROR"        });        });    </script></head><body>    <form id="signupForm" method="get" action="">        <p id="error_info">            <label for="firstname">Firstname</label>            <input id="firstname" name="firstname" />        </p>        <p>            <label for="email">E-Mail</label>            <input id="email" name="email" />        </p>        <p>            <label for="password">Password</label>            <input id="password" name="password" type="password" />        </p>        <p>            <label for="confirm_password">確認密碼</label>            <input id="confirm_password" name="confirm_password" type="password" />        </p>        <p>            <input class="submit" type="submit" value="Submit"/>        </p>        <p>            <input class="c" type="button" value="檢查表單是否有效" id="check"/>        </p></form></body></html>