validate實現表單校驗
阿新 • • 發佈：2018-12-30
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>validate表單校驗</title>
<script type="text/jscript" src="js/jquery-1.11.0.js"></script>
<script type="text/jscript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(function(){
$("#form1").validate({
rules:{
//設定使用者名稱不為空
username:"required",
//設定賬號長度不低於10且只能為數字
number:{
minlength:10,
digits:true
},
//設定密碼不為空且不大於12個字元
password:{
maxlength:10,
required:true
},
//設定兩次密碼相同
password2:{
equalTo:"[name='password']"
},
//設定郵箱為標準格式
adress:{
email:true
},
},
messages:{
adress:"郵箱格式不正確（自定義提示）"
}
});
});
</script>
</head>
<body>
<form id="form1">
賬號<input type="text" name="number" /><br />
使用者名稱<input type="text" name="username" /><br />
密碼<input type="text" name="password"/><br />
重複密碼<input type="text" name="password2"/><br />
性別<input type="radio" name="sex" checked="checked" />男<input type="radio" name="sex"/>女<br />
郵箱<input type="text" name="adress"/><br />
<input type="submit" value="確認並同意註冊" />
</form>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>validate表單校驗</title>
<script type="text/jscript" src="js/jquery-1.11.0.js"></script>
<script type="text/jscript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(function(){
$("#form1").validate({
rules:{
//設定使用者名稱不為空
username:"required",
//設定賬號長度不低於10且只能為數字
number:{
minlength:10,
digits:true
},
//設定密碼不為空且不大於12個字元
password:{
maxlength:10,
required:true
},
//設定兩次密碼相同
password2:{
equalTo:"[name='password']"
},
//設定郵箱為標準格式
adress:{
email:true
},
},
messages:{
adress:"郵箱格式不正確（自定義提示）"
}
});
});
</script>
</head>
<body>
<form id="form1">
賬號<input type="text" name="number" /><br />
使用者名稱<input type="text" name="username" /><br />
密碼<input type="text" name="password"/><br />
重複密碼<input type="text" name="password2"/><br />
性別<input type="radio" name="sex" checked="checked" />男<input type="radio" name="sex"/>女<br />
郵箱<input type="text" name="adress"/><br />
<input type="submit" value="確認並同意註冊" />
</form>
</body>
</html>