<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>validate-demo</title>
<style?type="text/css">
body?{
font-size:?36px;
line-height:?1.6;
}
p?{
margin:?10px?0;
}
label?{
display:?inline-block;
min-width:?140px;
}
label?.error?{
margin-left:?10px;
color:?red;
}
input,button?{
line-height:?35px;
border:?1px?solid?#999;
min-width:?180px;
}
input?.error?{
border:?1px?solid?red;
}
input[type=submit],button?{
margin-top:?20px;
font-size:?36px;
padding:?10px?0;
}
</style>
</head>
<body>
<form?id="demoForm">
<fieldset>
<legend>用戶登錄</legend>
<p>
<label?for="username">用戶名</label>
<input?type="text"?id="username"?name="username"?/>
</p>
<p>
<label?for="password">密碼</label>
<input?type="password"?id="password"?name="password"?/>
</p>
<p>
<input?type="submit"?value="登錄"?/>
</p>
</fieldset>
</form>
<script?src="jquery-3.1.0.min.js"></script>
<script?src="jquery.validate.js"></script>
<script>
$(document).ready(function(){
rules:{
username:{
required:true,
minlength:2,
maxlength:10
},
password:{
required:true,
minlength:2,
maxlength:16
}
},
messages:{
username:{
required:"用戶名不能為空",
minlength:"用戶名最少為2位",
maxlength:"用戶名最多為10位"
},
password:{
required:"密碼不能為空",
minlength:"密碼最少為2位",
maxlength:"密碼最多為16位"
}
}
});
</script>
</body>
</html>
2016-11-01
$(function(){
??????? $('#idform').validate({
??????????? rules:{
??????????????? username:{
??????????????????? required:true,
??????????????????? minlength:2,
??????????????????? maxlength:6
??????????????? },
??????????????? password:{
??????????????????? required:true,
??????????????????? minlength:2,
??????????????????? maxlength:6
??????????????? }
??????????? }
??????? })
??? });
要獲取表單ID
2016-11-01
$('#idform').validate最重要的東西，你都沒引用插件