                        課程
                    
                        /前端開發(fā)
                        
                            /jQuery
                        
                        /jQuery插件——Validation Plugin

無法實現(xiàn)自動校驗

<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title></title>
? ?<style>
*{ margin: 0; ?padding: 0;}
? ? ? fieldset {
? ? ? ? ? ?margin: 100px auto;
height: 200px;
width: 300px;
}
? ?</style>
? ?<script src="jquery-1.11.1.min.js"></script>
? ?<script src="jquery.validate-1.13.1.js"></script>
? ?<script>
$(function(){
? ? ? ? ? ?$("#formDemo").validate({
? ? ? ? ? ? ? rules:{
? ? ? ? ? ? ? ? ? username:{
? ? ? ? ? ? ? ? ? ? ? require:true,
minlength:2,
maxlength:10
},
password:{
? ? ? ? ? ? ? ? ? ? ? require:true,
minlength:2,
maxlength:16
}
? ? ? ? ? ? ? },
message:{
? ? ? ? ? ? ? ? ? ?username:{
? ? ? ? ? ? ? ? ? ? ? ?require:"必須填寫用戶名",
minlength:"用戶名最少為2位",
maxlength:"用戶名最大為10位"
},
password:{
? ? ? ? ? ? ? ? ? ? ? ?require:"必須填寫密碼",
minlength:"密碼最少為2位",
maxlength:"密碼最大為16為"
}
? ? ? ? ? ? ? ?}
? ? ? ? ? ?});
});

</script>
</head>
<body>
<form action="" id="formDemo">
<fieldset>
? ?<legend>用戶登錄</legend>
? ?<p><label for="username">用戶名:</label><input type="text" name="username" id="username"/></p><br>
? ?<p><label for="password">密碼:</label><input type="password" name="password" id="password"/></p><br/>
? ?<input type="submit" value="提交"/>
</fieldset>
</form>
</body>
</html>