使用validate做表單驗證，實現效果如圖：
當然，也可以換成中文的（如果你覺得預設的提示資訊不是你想要的，你也可以自訂提示資訊）
validate使用步驟:
1.匯入jquery.js
2.匯入validate.js
3.在頁面載入成功之後 對錶單進行校正 $("選取器").validate()
4.在validate中編寫校正規則
$("選取器").validate({
rules:{},
messages:{}
});
4.1 這裡rules的{} 裡寫的就是具體的規範，要做什麼約束
4.2messages的{}裡寫的就是違背給出的提示資訊
####rules{}內的格式:
格式1:
欄位的name屬性:"校正器"
格式2:
欄位的name屬性:{校正器:值,校正器:值}
其中：格式1是一個輸入框只有一個校正器的時候使用
而格式2是一個輸入框需要有多個校正器的時候使用
####messages{}內的格式跟rules類似
messages的格式:
格式1:
欄位的name屬性:"提示資訊"
格式2:
欄位的name屬性:{校正器:"提示資訊",校正器:提示資訊"}
-----------------------------------------------------------------------------------------------------------------------------------------------
具體案例如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><script type="text/javascript" src="js/jquery-1.11.0.js" ></script><script type="text/javascript" src="js/jquery.validate.js" ></script><script type="text/javascript" src="js/messages_zh.js" ></script><script type="text/javascript">$(function(){$("#formId").validate({rules:{//欄位的name屬性:"校正器"userName:"required",//required在此含義是必填//欄位的name屬性:{校正器:值,校正器:值}passWord:{required:true,digits:true //digits是整數校正器,後面寫true表示啟動此校正器}}});})</script><body><form id="formId">使用者名稱(必填)：<input name="userName" /><br />密碼：(必填數字):<input name="passWord" /><br /><input type="submit" value="提交" /></form></body></html>校正器查詢表：
| 校正類型 |
取值 |
描述 |
| required |
true|false |
必要欄位 |
| |
“@”或者”email” |
郵件地址 |
| url |
|
路徑 |
| date |
數字 |
日期 |
| dateISO |
字串 |
日期（YYYY-MM-dd） |
| number |
|
數字（負數，小數） |
| digits |
|
整數 |
| minlength |
數字 |
最小長度 |
| maxlength |
數字 |
最大長度 |
| rangelength |
[minL,maxL] |
長度範圍 |
| min |
|
最小值 |
| max |
|
最大值 |
| range |
[min,max] |
值範圍 |
| equalTo |
jQuery運算式 |
兩個值相同 |
| remote |
url路徑 |
ajax校正 |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
