                        課程
                    
                        /前端開發
                        
                            /jQuery
                        
                        /jQuery插件——Validation Plugin

為什么我跟著老師寫的網頁，只是把js代碼分開一個文件放之后username獲取的時候報錯？

為什么我跟著老師寫的網頁，只是把js代碼分開一個文件放之后username獲取的時候報錯？ $("#username").rules() jquery.validate-1.13.1.js:961 Uncaught TypeError: Cannot read property 'getAttribute' of undefined(…)

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
<link?rel="stylesheet"?type="text/css"?href="style.css"?/>
<script?type="text/javascript"?src="vendor/jquery-1.10.0.js"></script>
<script?src="vendor/jquery.validate-1.13.1.js"></script>
<script?type="text/javascript"?src="script.js"></script>
</head>
<body>
<form?id="demoForm">
<fieldset>
<legend>用戶登陸</legend>
<p?id="info"></p>
<p?id="info2"?style="display:none">輸入錯誤</p>
<p>
<label?for="username">用戶名</label>
<input?type="text"?id="usename"?name="username"?/>
</p>
<p>
<label?for="password">密碼</label>
<input?type="password"?id="password"?name="password"?/>
</p>
<p>
<label?for="confirm-password">確認密碼</label>
<input?type="password"?id="confirm-password"?name="confirm-password"/>
</p>
<p>
<input?type="submit"?value="登錄"?/>
</p>
</fieldset>
</form>
</body>
</html>

var?validator1;
$(function(){
	validator1?=?$("#demoForm").validate({
		debug:?true,
		rules:?{
			username:?{
				required:?true,
				minlength:2,
				maxlength:10,
			},
			password:{
				required:?true,
				minlength:2,
				maxlength:16,
			},
			"confirm-password":?{
				equalTo:"#password",
			}
		},
		messages:{
			username:{
				required:'請輸入用戶名',
				minlength:'用戶名能小于2個字符',
				maxlength:'用戶名不能大于10個字符',
			},
			password:{
				required:'請輸入密碼',
				minlength:'密碼不能小于2個字符',
				maxlength:'密碼不能超過16個字符',
			},
			"confirm-password":{
				equalTo:'兩次輸入密碼不一致'
			}
		},
	})
})