`

JQuery笔记(表单验证)

阅读更多
JQuery表单验证


jquery.validate.js 是 jquery 旗下的一个验证插件,借助 jquery 的优势,我们可以迅速验证一些常见的输入 , 并且可以自己扩充自己的验证方法。

举个例子,有这么一个表单:

view plaincopy to clipboardprint?
<form id="signupForm" method="get" action=""> 
<fieldset> 
<legend>Validating a complete form</legend> 
<p> 
<label for="firstname">Firstname</label> 
<input id="firstname" name="firstname" class="required"/> 
</p> 
<p> 
<label for="lastname">Lastname</label> 
<input id="lastname" name="lastname" /> 
</p> 
<p> 
<label for="username">Username</label> 
<input id="username" name="username" /> 
</p> 
<p> 
<label for="password">Password</label> 
<input id="password" name="password" type="password" /> 
</p> 
<p> 
<label for="confirm_password">Confirm password</label> 
<input id="confirm_password" name="confirm_password" type="password" /> 
</p> 
<p> 
<label for="email">Email</label> 
<input id="email" name="email" /> 
</p> 
<p> 
<input class="submit" type="submit" value="Submit"/> 
</p> 
</fieldset> 
</form> 
<form id="signupForm" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" class="required"/>
</p>
<p>
<label for="lastname">Lastname</label>
<input id="lastname" name="lastname" />
</p>
<p>
<label for="username">Username</label>
<input id="username" name="username" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">Confirm password</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>


在这个表单中,有名、姓、用户名、密码、确认密码和 email 。他们都为非空,并且电子邮件需要是格式正确的地址、确认密码和密码一致。使用 jQuery 验证最简单的方式是引入 jquery.js 和 jquery validation.js 两个 js 文件。然后分别在 input 中加入 class 即:

view plaincopy to clipboardprint?
<input id="firstname" name="firstname" class="required"/> 
<input id="lastname" name="lastname" class="required"/> 
<input id="username" name="username" class="required"/> 
<input id="password" name="password" type="password" class="required"/> 
<input id="confirm_password" name="confirm_password" type="password" class="required" equalTo="#password"/> 
<input id="email" name="email" class="required email"/> 
<input id="firstname" name="firstname" class="required"/>
<input id="lastname" name="lastname" class="required"/>
<input id="username" name="username" class="required"/>
<input id="password" name="password" type="password" class="required"/>
<input id="confirm_password" name="confirm_password" type="password" class="required" equalTo="#password"/>
<input id="email" name="email" class="required email"/>


以下列出 validate 自带的默认验证

required: " 必选字段 ",

remote: " 请修正该字段 ",

email: " 请输入正确格式的电子邮件 ",

url: " 请输入合法的网址 ",

date: " 请输入合法的日期 ",

dateISO: " 请输入合法的日期 (ISO).",

number: " 请输入合法的数字 ",

digits: " 只能输入整数 ",

creditcard: " 请输入合法的信用卡号 ",

equalTo: " 请再次输入相同的值 ",

accept: " 请输入拥有合法后缀名的字符串 ",

maxlength: jQuery.format(" 请输入一个长度最多是 {0} 的字符串 "),

minlength: jQuery.format(" 请输入一个长度最少是 {0} 的字符串 "),

rangelength: jQuery.format(" 请输入一个长度介于 {0} 和 {1} 之间的字符串 "),

range: jQuery.format(" 请输入一个介于 {0} 和 {1} 之间的值 "),

max: jQuery.format(" 请输入一个最大为 {0} 的值 "),

min: jQuery.format(" 请输入一个最小为 {0} 的值 ")

  然后,在 document 的 read 事件中,加入如下方法:
     <script>
        $(document).ready(function(){
                $("#signupForm").validate();
        }
     </script>

这样,当 form 被提交的时候,就会根据 input 指定的 class 来进行验证了。如果失败, form 的提交就会被阻止。并且,将提示信息显示在 input 的后面。

不过,这样感觉不好,因为验证规则侵入了我们的 html 代码。还有一个方式,便是使用“ rules” 。我们将 input 的那些验证用 class 删除掉。然后修改 document 的 ready 事件响应代码:

$(document).ready(function(){

$("#signupForm").validate({

rules:{

firstname:"required",

lastname:"required",

username:"required",

password:"required",

confirm_password:{

required:true,

equalTo:"#password"

},

email:{

required:true,

email:true

}

}

});

})

这样以来,也能达到相同的效果。
    那么,接下的问题,就是显示的错误提示是默认的。我们需要使用自定义的提示:

$(document).ready(function(){

$("#signupForm").validate({

rules:{

firstname:"required",

lastname:"required",

username:"required",

password:"required",

confirm_password:{

required:true,

equalTo:"#password"

},

email:{

required:true,

email:true

}

},

messages:{

firstname:" 必填项",

lastname:" 必填项",

username:" 必填项",

password:" 必填项",

confirm_password:{

required:" 必填项",

equalTo:" 密码不一致"

},

email:{

required:" 必填项",

email:" 格式有误"

}

}

});

})

如果你还想在错误信息上显示特别的样式 ( 比如字体为红色 ) 即可通过添加:

<style type="text/css">

#signupForm label.error {

padding-left: 16px;

margin-left: 2px;

color:red;

background: url(img/unchecked.gif) no-repeat 0px 0px;

}

</style>

继续添加对输入密码长度的验证规则:

$(document).ready(function(){

$("#signupForm").validate({

rules:{

firstname:"required",

lastname:"required",

username:"required",

password:{

required:true,

minlength:4,

maxlength:15

},

confirm_password:{

required:true,

equalTo:"#password"

},

email:{

required:true,

email:true

}

},

messages:{

firstname:" 必填项",

lastname:" 必填项",

username:" 必填项",

password:{

required:" 必填项",

minlength:jQuery.format(" 密码长度不少于 {0} 位 "),

maxlength:jQuery.format(" 密码长度不超过 {0} 位 ")

},

confirm_password:{

required:" 必填项",

equalTo:" 密码不一致"

},

email:{

required:" 必填项",

email:" 格式有误"

}

}

});

})

使用remote

可以通过 event 指定触发效验方式( 可选值有 keyup( 每次按键时 ) , blur( 当控件失去焦点时 ) ,不指定时就只在按提交按钮时触发 )

$(document).ready(function(){

$("#signupForm").validate({

event:"keyup" || "blur"

})

})

如果通过指定 debug 为 true 则表单不会提交只能用来验证 ( 默认为提交 ) ,可用来调试

$(document).ready(function(){

$("#signupForm").validate({

debug:true

})

})

如果在提交前还需要进行一些自定义处理使用 submitHandler 参数

$(document).ready(function(){

$("#signupForm").validate({

SubmitHandler:function(){

alert( "success");

}

})

})



  JQuery笔记(表单验证) 二 收藏


验证:






 

<! DOCTYPE  HTML  PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN"

                    "http://www.w3.org/TR/html4/loose.dtd" >

<html>

    <head>
      <!--<style>label.valid {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
        height:16px;
        width:16px;
        display: block;
        position: absolute;
        top: 4px;
        left: 152px;
    }</style>-->


        <script src="http://code.jquery.com/jquery-latest.js"></script>

        <script type="text/javascript"
            src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script>

        <script type="text/javascript"
            src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

        <script type="text/javascript">
           jQuery.validator.setDefaults( {
              debug : true  ,
              success : "valid"
           });;
        </script>
        <script>
       $(document).ready( function () {
                // 1
             $( "#myform" ).validate({
                                             rules : {
                                                        fruit : "required"
                                                     },
                                    errorPlacement : function (error, element) {
                                                            //if ( element.is(":radio") )
                                                            error.appendTo(element.parent());
                                                      }    
                                    });
           
            // 2                       
            $( "#myinput" ).rules(
                                    "add" ,
                                    {
                                          required : true ,
                                         minlength : 2,
                                          messages : {
                                                          required : "Required input" ,
                                                          minlength : jQuery.format( "Please, at least {0} characters are necessary" )
                                                      }
                                    }
                                );
                              
            // 3
            $( ":radio" ).each( function () {
                                          $( this ).rules( "add" , {
                                                                          required    : true ,
                                                                        minlength    : 2,
                                                                           messages    : {
                                                                                           required    : "Required input 必填 " ,
                                                                                        minlength    : jQuery.format( "Please, at least {0} characters are necessary" )
                                                                                       }
                                                                     }
                                                            )
                                              });
      });

</script>



    </head>

    <body>
        <form id="myform">
            <table border="1">
                <tr>
                    <td>
                        <label for="fruit">
                            Please select a fruit
                        </label>
                    </td>
                    <td>
                        <select id="fruit" name="fruit" title="Please select something!">
                            <option value=""></option>
                            <option value="1">
                                Banana
                            </option>
                            <option value="2">
                                Apple
                            </option>
                            <option value="3">
                                Peach
                            </option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" id="myinput" />
                    </td>
                    <td>
                        <input type="submit" value="submit!" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="radio" name="radio3">
                        radio3
                        <input type="radio" name="radio3">
                        radio3
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="radio" name="radio2">
                        radio2
                        <input type="radio" name="radio2">
                        radio2
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="radio" name="radio1">
                        radio1
                        <input type="radio" name="radio1">
                        radio1
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>


参考:http://docs.jquery.com/Plugins/Validation

rules( )  Returns: Options 
Return the validations rules for the first selected element.
rules( "add", rules )  Returns: Options 


  JQuery笔记(表单验证) 三 收藏
Test for jQuery validate() plugin

< type="text/javascript">

jQuery Validation Plugin Demo
Login Form
Username 

Password 



回到主页query-plugin-validation: |下载 |Changelog |Demos |Documentation




点击[Login]后 如下图:










代码 errorcontainer-demo_1.html

view plaincopy to clipboardprint?
<?xml version="1.0" encoding="ISO-8859-1" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Test for jQuery validate() plugin</title> 
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" mce_href="css/screen.css" /> 
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script> 
<mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></mce:script> 
<mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script> 
<mce:script type="text/javascript"src="http://jquery.bassistance.de/validate/lib/jquery.metadata.js"></mce:script> 
<mce:style type="text/css"><!--  
/*  
.cmxform fieldset p.error label { color: red; }  
div.container {  
    background-color: #eee;  
    border: 1px solid red;  
    margin: 5px;  
    padding: 5px;  
}  
div.container ol li {  
    list-style-type: disc;  
    margin-left: 20px;  
}  
div.container { display: none }  
.container label.error {  
    display: inline;  
}*/  
form.cmxform { width: 30em; }  
form.cmxform label.error {  
    display: block;  
    margin-left: 1em;  
    width: auto;  
}  
--></mce:style><style type="text/css" mce_bogus="1">/*  
.cmxform fieldset p.error label { color: red; }  
div.container {  
    background-color: #eee;  
    border: 1px solid red;  
    margin: 5px;  
    padding: 5px;  
}  
div.container ol li {  
    list-style-type: disc;  
    margin-left: 20px;  
}  
div.container { display: none }  
.container label.error {  
    display: inline;  
}*/  
form.cmxform { width: 30em; }  
form.cmxform label.error {  
    display: block;  
    margin-left: 1em;  
    width: auto;  
}</style> 
<mce:script type="text/javascript"><!--  
// only for demo purposes  
$.validator.setDefaults({  
    submitHandler: function() {  
        alert("submitted! (skipping validation for cancel button)");  
    }  
});  
$().ready(function() {  
    $("#form1").validate({  
        errorLabelContainer: $("#form1 div.error")  
    });  
      
    /*  
    var container = $('div.container');  
    // validate the form when it is submitted  
    var validator = $("#form2").validate({  
        errorContainer: container,  
        errorLabelContainer: $("ol", container),  
        wrapper: 'li',  
        meta: "validate"  
    });  
    */  
      
    $(".cancel").click(function() {  
        validator.resetForm();  
    });  
});  
// --></mce:script> 
</head> 
<body> 
<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" mce_href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1> 
<div id="main"> 
<form method="get" class="cmxform" id="form1" action=""> 
    <fieldset> 
        <legend>Login Form</legend> 
        <p> 
            <label>Username</label> 
            <input name="user" title="Please enter your username (at least 3 characters)" class="{required:true,minlength:3}" /> 
        </p> 
        <p> 
            <label>Password</label> 
            <input type="password" maxlength="12" name="password" title="Please enter your password, between 5 and 12 characters" class="{required:true,minlength:5}" /> 
        </p> 
        <div class="error"> 
        </div> 
        <p> 
            <input class="submit" type="submit" value="Login"/> 
        </p> 
    </fieldset> 
</form> 
<!-- our error container --> 
<!--<div class="container"> 
    <h4>There are serious errors in your form submission, please see below for details.</h4> 
    <ol> 
        <li><label for="email" class="error">Please enter your email address</label></li> 
        <li><label for="phone" class="error">Please enter your phone <b>number</b> (between 2 and 8 characters)</label></li> 
        <li><label for="address" class="error">Please enter your address (at least 3 characters)</label></li> 
        <li><label for="avatar" class="error">Please select an image (png, jpg, jpeg, gif)</label></li> 
        <li><label for="cv" class="error">Please select a document (doc, docx, txt, pdf)</label></li> 
    </ol> 
</div>--> 
<!--<form class="cmxform" id="form2" method="get" action=""> 
    <fieldset> 
        <legend>Validating a complete form</legend> 
        <p> 
            <label for="email">Email</label> 
            <input id="email" name="email" class="{validate:{required:true,email:true}}" /> 
        </p> 
        <p> 
            <label for="agree">Favorite Color</label> 
            <select id="color" name="color" title="Please select your favorite color!" class="{validate:{required:true}}"> 
                <option></option> 
                <option>Red</option> 
                <option>Blue</option> 
                <option>Yellow</option> 
            </select> 
        </p> 
        <p> 
            <label for="phone">Phone</label> 
            <input id="phone" name="phone" class="some styles {validate:{required:true,number:true, rangelength:[2,8]}}" /> 
        </p> 
        <p> 
            <label for="address">Address</label> 
            <input id="address" name="address" class="some other styles {validate:{required:true,minlength:3}}" /> 
        </p> 
        <p> 
            <label for="avatar">Avatar</label> 
            <input type="file" id="avatar" name="avatar" class="{validate:{required:true,accept:true}}" /> 
        </p> 
        <p> 
            <label for="agree">Please agree to our policy</label> 
            <input type="checkbox" class="checkbox" id="agree" title="Please agree to our policy!" name="agree" class="{validate:{required:true}}" /> 
        </p> 
        <p> 
            <label for="cv">CV</label> 
            <input type="file" id="cv" name="cv" class="{validate:{required:true,accept:'docx?|txt|pdf'}}" /> 
        </p> 
        <p> 
            <input class="submit" type="submit" value="Submit"/> 
            <input class="cancel" type="submit" value="Cancel"/> 
        </p> 
    </fieldset> 
</form>--> 
<!--<div class="container"> 
    <h4>There are serious errors in your form submission, please see details above the form!</h4> 
</div>--> 
<a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" mce_href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">回到主页query-plugin-validation:</a> 
|<a href="http://jquery.bassistance.de/validate/jquery.validate.zip" mce_href="http://jquery.bassistance.de/validate/jquery.validate.zip" title="zip-Archive with source code, minified and packed version, demos and examples">下载</a> 
|<a href="http://jquery.bassistance.de/validate/changelog.txt" mce_href="http://jquery.bassistance.de/validate/changelog.txt">Changelog</a> 
|<a href="http://jquery.bassistance.de/validate/demo/" mce_href="http://jquery.bassistance.de/validate/demo/">Demos</a> 
|<a href="http://docs.jquery.com/Plugins/Validation" mce_href="http://docs.jquery.com/Plugins/Validation">Documentation</a> 
</div> 
<mce:script src="http://www.google-analytics.com/urchin.js" mce_src="http://www.google-analytics.com/urchin.js" type="text/javascript"></mce:script> 
<mce:script type="text/javascript"><!--  
_uacct = "UA-2623402-1";  
urchinTracker();  
// --></mce:script> 
</body> 
</html> 


  JQuery笔记(表单验证)四 errorcontainer-demo_2.html 收藏
Test for jQuery validate() plugin

< type="text/javascript">

jQuery Validation Plugin Demo
There are serious errors in your form submission, please see below for details.
Please enter your email address
Please enter your phone number (between 2 and 8 characters)
Please enter your address (at least 3 characters)
Please select an image (png, jpg, jpeg, gif)
Please select a document (doc, docx, txt, pdf)
Validating a complete form
Email 

Favorite Color   Red Blue Yellow

Phone 

Address 

Avatar 

Please agree to our policy 

CV 

 

There are serious errors in your form submission, please see details above the form!
回到主页query-plugin-validation: |下载 |Changelog |Demos |Documentation




代码 errorcontainer-demo_2.html



view plaincopy to clipboardprint?
<?xml version="1.0" encoding="ISO-8859-1" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Test for jQuery validate() plugin</title> 
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" mce_href="css/screen.css" /> 
<mce:script src="../lib/jquery.js" mce_src="lib/jquery.js" type="text/javascript"></mce:script> 
<mce:script src="../lib/jquery.metadata.js" mce_src="lib/jquery.metadata.js" type="text/javascript"></mce:script> 
<mce:script src="../jquery.validate.js" mce_src="jquery.validate.js" type="text/javascript"></mce:script> 
<!--  
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script> 
<mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></mce:script> 
<mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script> 
<mce:script type="text/javascript"src="http://jquery.bassistance.de/validate/lib/jquery.metadata.js"></mce:script> 
--><mce:style type="text/css"><!--  
/*  
.cmxform fieldset p.error label { color: red; }*/  
div.container {  
    background-color: #eee;  
    border: 1px solid red;  
    margin: 5px;  
    padding: 5px;  
}  
div.container ol li {  
    list-style-type: disc;  
    margin-left: 20px;  
}  
div.container { display: none }  
/*  
.container label.error {  
    display: inline;  
}  
*/  
/*  
form.cmxform { width: 30em; }  
form.cmxform label.error {  
    display: block;  
    margin-left: 1em;  
    width: auto;  
}  
*/  
--></mce:style><style type="text/css" mce_bogus="1">/*  
.cmxform fieldset p.error label { color: red; }*/  
div.container {  
    background-color: #eee;  
    border: 1px solid red;  
    margin: 5px;  
    padding: 5px;  
}  
div.container ol li {  
    list-style-type: disc;  
    margin-left: 20px;  
}  
div.container { display: none }  
/*  
.container label.error {  
    display: inline;  
}  
*/  
/*  
form.cmxform { width: 30em; }  
form.cmxform label.error {  
    display: block;  
    margin-left: 1em;  
    width: auto;  
}  
*/</style> 
<mce:script type="text/javascript"><!--  
// only for demo purposes  
$.validator.setDefaults({  
    submitHandler: function() {  
        alert("submitted! (skipping validation for cancel button)");  
    }  
});  
$().ready(function() {  
      
    /*$("#form1").validate({  
        errorLabelContainer: $("#form1 div.error")  
    });*/  
      
    var container = $('div.container');  
    // validate the form when it is submitted  
    var validator = $("#form2").validate({  
        errorContainer: container,  
        errorLabelContainer: $("ol", container),  
        wrapper: 'li',  
        meta: "validate"  
    });  
      
    $(".cancel").click(function() {  
        validator.resetForm();  
    });  
});  
// --></mce:script> 
</head> 
<body> 
<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" mce_href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1> 
<div id="main"> 
<!--<form method="get" class="cmxform" id="form1" action=""> 
    <fieldset> 
        <legend>Login Form</legend> 
        <p> 
            <label>Username</label> 
            <input name="user" title="Please enter your username (at least 3 characters)" class="{required:true,minlength:3}" /> 
        </p> 
        <p> 
            <label>Password</label> 
            <input type="password" maxlength="12" name="password" title="Please enter your password, between 5 and 12 characters" class="{required:true,minlength:5}" /> 
        </p> 
        <div class="error"> 
        </div> 
        <p> 
            <input class="submit" type="submit" value="Login"/> 
        </p> 
    </fieldset> 
</form>--> 
<!-- our error container --> 
<div class="container"> 
    <h4>There are serious errors in your form submission, please see below for details.</h4> 
    <ol> 
        <li><label for="email" class="error">Please enter your email address</label></li> 
        <li><label for="phone" class="error">Please enter your phone <b>number</b> (between 2 and 8 characters)</label></li> 
        <li><label for="address" class="error">Please enter your address (at least 3 characters)</label></li> 
        <li><label for="avatar" class="error">Please select an image (png, jpg, jpeg, gif)</label></li> 
        <li><label for="cv" class="error">Please select a document (doc, docx, txt, pdf)</label></li> 
    </ol> 
</div> 
<form class="cmxform" id="form2" method="get" action=""> 
    <fieldset> 
        <legend>Validating a complete form</legend> 
        <p> 
            <label for="email">Email</label> 
            <input id="email" name="email" class="{validate:{required:true,email:true}}" /> 
        </p> 
        <p> 
            <label for="agree">Favorite Color</label> 
            <select id="color" name="color" title="Please select your favorite color!" class="{validate:{required:true}}"> 
                <option></option> 
                <option>Red</option> 
                <option>Blue</option> 
                <option>Yellow</option> 
            </select> 
        </p> 
        <p> 
            <label for="phone">Phone</label> 
            <input id="phone" name="phone" class="some styles {validate:{required:true,number:true, rangelength:[2,8]}}" /> 
        </p> 
        <p> 
            <label for="address">Address</label> 
            <input id="address" name="address" class="some other styles {validate:{required:true,minlength:3}}" /> 
        </p> 
        <p> 
            <label for="avatar">Avatar</label> 
            <input type="file" id="avatar" name="avatar" class="{validate:{required:true,accept:true}}" /> 
        </p> 
        <p> 
            <label for="agree">Please agree to our policy</label> 
            <input type="checkbox" class="checkbox" id="agree" title="Please agree to our policy!" name="agree" class="{validate:{required:true}}" /> 
        </p> 
        <p> 
            <label for="cv">CV</label> 
            <input type="file" id="cv" name="cv" class="{validate:{required:true,accept:'docx?|txt|pdf'}}" /> 
        </p> 
        <p> 
            <input class="submit" type="submit" value="Submit"/> 
            <input class="cancel" type="submit" value="Cancel"/> 
        </p> 
    </fieldset> 
</form> 
<div class="container"> 
    <h4>There are serious errors in your form submission, please see details above the form!</h4> 
</div> 
<a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" mce_href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">回到主页query-plugin-validation:</a> 
|<a href="http://jquery.bassistance.de/validate/jquery.validate.zip" mce_href="http://jquery.bassistance.de/validate/jquery.validate.zip" title="zip-Archive with source code, minified and packed version, demos and examples">下载</a> 
|<a href="http://jquery.bassistance.de/validate/changelog.txt" mce_href="http://jquery.bassistance.de/validate/changelog.txt">Changelog</a> 
|<a href="http://jquery.bassistance.de/validate/demo/" mce_href="http://jquery.bassistance.de/validate/demo/">Demos</a> 
|<a href="http://docs.jquery.com/Plugins/Validation" mce_href="http://docs.jquery.com/Plugins/Validation">Documentation</a> 
</div> 
<mce:script src="http://www.google-analytics.com/urchin.js" mce_src="http://www.google-analytics.com/urchin.js" type="text/javascript"></mce:script> 
<mce:script type="text/javascript"><!--  
_uacct = "UA-2623402-1";  
urchinTracker();  
// --></mce:script> 
</body> 
</html> 
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test for jQuery validate() plugin</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" mce_href="css/screen.css" />
<mce:script src="../lib/jquery.js" mce_src="lib/jquery.js" type="text/javascript"></mce:script>
<mce:script src="../lib/jquery.metadata.js" mce_src="lib/jquery.metadata.js" type="text/javascript"></mce:script>
<mce:script src="../jquery.validate.js" mce_src="jquery.validate.js" type="text/javascript"></mce:script>
<!--
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>
<mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></mce:script>
<mce:script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>
<mce:script type="text/javascript"src="http://jquery.bassistance.de/validate/lib/jquery.metadata.js"></mce:script>
--><mce:style type="text/css"><!--
/*
.cmxform fieldset p.error label { color: red; }*/
div.container {
background-color: #eee;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
div.container ol li {
list-style-type: disc;
margin-left: 20px;
}
div.container { display: none }
/*
.container label.error {
display: inline;
}
*/
/*
form.cmxform { width: 30em; }
form.cmxform label.error {
display: block;
margin-left: 1em;
width: auto;
}
*/
--></mce:style><style type="text/css" mce_bogus="1">/*
.cmxform fieldset p.error label { color: red; }*/
div.container {
background-color: #eee;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
div.container ol li {
list-style-type: disc;
margin-left: 20px;
}
div.container { display: none }
/*
.container label.error {
display: inline;
}
*/
/*
form.cmxform { width: 30em; }
form.cmxform label.error {
display: block;
margin-left: 1em;
width: auto;
}
*/</style>
<mce:script type="text/javascript"><!--
// only for demo purposes
$.validator.setDefaults({
submitHandler: function() {
alert("submitted! (skipping validation for cancel button)");
}
});
$().ready(function() {

/*$("#form1").validate({
errorLabelContainer: $("#form1 div.error")
});*/

var container = $('div.container');
// validate the form when it is submitted
var validator = $("#form2").validate({
errorContainer: container,
errorLabelContainer: $("ol", container),
wrapper: 'li',
meta: "validate"
});

$(".cancel").click(function() {
validator.resetForm();
});
});
// --></mce:script>
</head>
<body>
<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" mce_href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1>
<div id="main">
<!--<form method="get" class="cmxform" id="form1" action="">
<fieldset>
<legend>Login Form</legend>
<p>
<label>Username</label>
<input name="user" title="Please enter your username (at least 3 characters)" class="{required:true,minlength:3}" />
</p>
<p>
<label>Password</label>
<input type="password" maxlength="12" name="password" title="Please enter your password, between 5 and 12 characters" class="{required:true,minlength:5}" />
</p>
<div class="error">
</div>
<p>
<input class="submit" type="submit" value="Login"/>
</p>
</fieldset>
</form>-->
<!-- our error container -->
<div class="container">
<h4>There are serious errors in your form submission, please see below for details.</h4>
<ol>
<li><label for="email" class="error">Please enter your email address</label></li>
<li><label for="phone" class="error">Please enter your phone <b>number</b> (between 2 and 8 characters)</label></li>
<li><label for="address" class="error">Please enter your address (at least 3 characters)</label></li>
<li><label for="avatar" class="error">Please select an image (png, jpg, jpeg, gif)</label></li>
<li><label for="cv" class="error">Please select a document (doc, docx, txt, pdf)</label></li>
</ol>
</div>
<form class="cmxform" id="form2" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="email">Email</label>
<input id="email" name="email" class="{validate:{required:true,email:true}}" />
</p>
<p>
<label for="agree">Favorite Color</label>
<select id="color" name="color" title="Please select your favorite color!" class="{validate:{required:true}}">
<option></option>
<option>Red</option>
<option>Blue</option>
<option>Yellow</option>
</select>
</p>
<p>
<label for="phone">Phone</label>
<input id="phone" name="phone" class="some styles {validate:{required:true,number:true, rangelength:[2,8]}}" />
</p>
<p>
<label for="address">Address</label>
<input id="address" name="address" class="some other styles {validate:{required:true,minlength:3}}" />
</p>
<p>
<label for="avatar">Avatar</label>
<input type="file" id="avatar" name="avatar" class="{validate:{required:true,accept:true}}" />
</p>
<p>
<label for="agree">Please agree to our policy</label>
<input type="checkbox" class="checkbox" id="agree" title="Please agree to our policy!" name="agree" class="{validate:{required:true}}" />
</p>
<p>
<label for="cv">CV</label>
<input type="file" id="cv" name="cv" class="{validate:{required:true,accept:'docx?|txt|pdf'}}" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
<input class="cancel" type="submit" value="Cancel"/>
</p>
</fieldset>
</form>
<div class="container">
<h4>There are serious errors in your form submission, please see details above the form!</h4>
</div>
<a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" mce_href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">回到主页query-plugin-validation:</a>
|<a href="http://jquery.bassistance.de/validate/jquery.validate.zip" mce_href="http://jquery.bassistance.de/validate/jquery.validate.zip" title="zip-Archive with source code, minified and packed version, demos and examples">下载</a>
|<a href="http://jquery.bassistance.de/validate/changelog.txt" mce_href="http://jquery.bassistance.de/validate/changelog.txt">Changelog</a>
|<a href="http://jquery.bassistance.de/validate/demo/" mce_href="http://jquery.bassistance.de/validate/demo/">Demos</a>
|<a href="http://docs.jquery.com/Plugins/Validation" mce_href="http://docs.jquery.com/Plugins/Validation">Documentation</a>
</div>
<mce:script src="http://www.google-analytics.com/urchin.js" mce_src="http://www.google-analytics.com/urchin.js" type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
_uacct = "UA-2623402-1";
urchinTracker();
// --></mce:script>
</body>
</html>

< type="text/javascript">


  JQuery笔记(表单验证)五 errorcontainer-demo_3.html meta:string 收藏
< type="text/javascript">

jquery.validate.js简介(续1){meta:string} Demo


代码 errorcontainer-demo_3.html

view plaincopy to clipboardprint?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   
                    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
        <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script> 
        <mce:script type="text/javascript"><!--  
    $(document).ready(function() {  
        $("#myform").validate  
        ( {  
            meta : "validate",  //Tell the validation plugin to look inside a validate-property in metadata for validation rules.  
            submitHandler : function() {  
                alert("Submitted!")  
            }  
        })  
    });  
// --></mce:script> 
    </head> 
    <body> 
        <h1>jquery.validate.js简介(续1){meta:string} Demo</h1> 
        <mce:script type="text/javascript" 
            src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.metadata.js"></mce:script> 
        <mce:script type="text/javascript" 
            src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script> 
        <form id="myform"> 
            <input type="text" name="email" 
                class="{validate:{ required: true, email:true }}" /> 
            <br /> 
            <input type="submit" value="Submit" /> 
        </form> 
    </body> 
</html> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script>
<mce:script type="text/javascript"><!--
$(document).ready(function() {
$("#myform").validate
( {
meta : "validate",  //Tell the validation plugin to look inside a validate-property in metadata for validation rules.
submitHandler : function() {
alert("Submitted!")
}
})
});
// --></mce:script>
</head>
<body>
<h1>jquery.validate.js简介(续1){meta:string} Demo</h1>
<mce:script type="text/javascript"
src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.metadata.js"></mce:script>
<mce:script type="text/javascript"
src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script>
<form id="myform">
<input type="text" name="email"
class="{validate:{ required: true, email:true }}" />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>




  JQuery笔记(表单验证)六 errorcontainer-demo_4.html errorClass 收藏
< type="text/javascript">

jquery.validate.js简介(续1){errorClass:string} Demo


代码 errorcontainer-demo_4.html

view plaincopy to clipboardprint?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   
                    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <mce:style type="text/css"><!-- 
    .myerror { font-weight: bold; color: #b31b1b; font-family: arial, verdana, sans-seriff; } 
     
--></mce:style><style type="text/css" mce_bogus="1"> .myerror { font-weight: bold; color: #b31b1b; font-family: arial, verdana, sans-seriff; }  
    </style> 
        <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script> 
      
    <mce:script type="text/javascript"><!--  
    $(document).ready(function() {  
        $("#myform").validate  
        ( {  
            errorClass:"myerror", // errorClass      类型:String    默认:"error" 说明:用此设定的样式来定义错误消息的样式。   
            submitHandler : function() {  
                alert("Submitted!")  
            }  
        })  
    });  
// --></mce:script> 
    </head> 
    <body> 
        <h1>jquery.validate.js简介(续1){errorClass:string} Demo</h1> 
        <mce:script type="text/javascript" 
            src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.metadata.js"></mce:script> 
        <mce:script type="text/javascript" 
            src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script> 
        <form id="myform"> 
            <input type="text" name="email" 
                class="required" /> 
            <br /> 
            <input type="submit" value="Submit" /> 
        </form> 
    </body> 
</html> 



  JQuery笔记(表单验证)七 errorcontainer-demo_5.html errorElement 收藏
< type="text/javascript">

jquery.validate.js简介(续1){errorElement:String } Demo


代码  errorcontainer-demo_5.html

view plaincopy to clipboardprint?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   
                    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <mce:style type="text/css"><!-- 
    .myerror { font-weight: bold; color: #b31b1b; font-family: arial, verdana, sans-seriff; } 
     
--></mce:style><style type="text/css" mce_bogus="1"> .myerror { font-weight: bold; color: #b31b1b; font-family: arial, verdana, sans-seriff; }  
    </style> 
        <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script> 
      
    <mce:script type="text/javascript"><!--  
    $(document).ready(function() {  
        $("#myform").validate  
        ( {  
            /*  
            errorElement      类型:String    默认:"label"   
            说明:用html元素类型创建错误消息的容器。  
            默认的"label"有个优点就是能在错误消息与无效表单之间用for属性建立有意义的联系(一个常常使用的,而不管表单元素是什么的)。   
            */  
            errorElement:"em",          submitHandler : function() {  
                alert("Submitted!")  
            }  
        })  
    });  
// --></mce:script> 
    </head> 
    <body> 
        <h1>jquery.validate.js简介(续1){errorElement:String  } Demo</h1> 
        <mce:script type="text/javascript" 
            src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.metadata.js"></mce:script> 
        <mce:script type="text/javascript" 
            src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></mce:script> 
        <form id="myform"> 
            <input type="text" name="email" 
                class="required" /> 
            <br /> 
            <input type="submit" value="Submit" /> 
        </form> 
    </body> 
</html> 



  JQuery笔记(表单验证)八 metadata-demo.html jquery.metadata.js 收藏
< type="text/javascript">

...
Item 1
Item 2
{item_id: 1, item_label: 'Label'} Item 3
< type="metadata"> Item 4
代码 metadata-demo.html

view plaincopy to clipboardprint?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<title></title> 
    <!--    
        <mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script> 
        <mce:script type="text/javascript" src="../jquery.metadata.js" mce_src="jquery.metadata.js"></mce:script> 
     --> 
     <mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"></mce:script> 
     <mce:script type="text/javascript"src="http://jquery.bassistance.de/validate/lib/jquery.metadata.js"></mce:script> 
    <mce:script language="javascript"><!--  
    
          $(function() {  
            alert( $("#liangO").metadata().some    ); // data  
            /*  
            alert( $("#item1" ).metadata().item_id ); // 1  
              
            alert( $("#item1" ).metadata({type: "class"})  
                               .item_id            ); // 1               
            */  
            alert( $("#item2" ).metadata({"type": "attr"})  
                               .item_label           
                                                  ); // "Label"  
            alert( $("#item2" ).metadata({"type": "attr",  
                                          "name": "metadata"})  
                               .item_label         ); // "Label"   
              
           /*  
            alert( $("#item3" ).metadata({"type": "elem"})  
                               .item_label          ); // FF下为"Label",IE下为undefined  
                                
            alert( $("#item3" ).metadata({"type": "elem",  
                                          "name": "metadata"})  
                               .item_label          ); // FF下为"Label",IE下为undefined  
      
            alert( $("#item4" ).metadata({"type": "elem",  
                                          "name": "script"})  
                               .item_label          ); // "Label"  
            */  
        });  
      
// --></mce:script>    
</head>    
    
<body>    
    <ol> 
    <li id="liangO" class="someclass {some: 'data'} anotherclass">...</li> 
    <li id="item1" class="someclass {'item_id': 1, item_label: 'Label'}">Item 1</li> 
    <li id="item2" metadata='{"item_id": 1, "item_label": "Label"}'>Item 2</li> 
    <li id="item3"> 
        <metadata style="display: none;" mce_style="display: none;">{item_id: 1, item_label: 'Label'}</metadata> 
        Item 3 </li> 
    <li id="item4"> 
        <mce:script type="metadata"><!--  
{"item_id": 1, "item_label": "Label"}  
// --></mce:script> 
        Item 4 </li>   
    </ol> 
</body>    
</html> 
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics