當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery validate 表单验证，涵盖各种类型数据

發布時間：2025/5/22 编程问答 19 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery validate 表单验证，涵盖各种类型数据小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本來覺得用這個會很難，結果試了試，發現卻是簡單了不少東西啊，什么getElementById，if 什么的，只用幾個屬性名什么的就可以解決不同狀態顯示不同提示，很強大很方便。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="/common/common.jsp"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head><base href="${ctx }"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jQuery/jquery-1.2.6.js"></script> <script type="text/javascript" src="jQuery/jquery.validate.min.js"></script> <style type="text/css">body{font-size:12px;}/* form中顯示文字的label */.slabel{width:100px;display: -moz-inline-box;line-height: 1.8;display: inline-block;text-align:right;}/* 出錯樣式 */input.error, textarea.error{border: solid 1px #CD0A0A;}label.error{color:#CD0A0A;margin-left:5px;}/* 深紅色文字 */.textred{color:#CD0A0A;}</style> <script type="text/javascript"></script> </head> <body> <form id="commentForm" method="get" action=""><fieldset style="width:500px;"><legend>表單驗證</legend><div id="messageBox"></div>  <p><label for="cname" class="slabel"><em class="textred">*</em> 姓名:</label><input id="cname" name="name" class="required" minlength="2" maxlength="5" /></p><p><label for="cemail" class="slabel"><em class="textred">*</em> E-Mail:</label><input id="cemail" name="email" /></p><p><label for="curl" class="slabel">年齡:</label> <input id="age" name="age" class="required" value="" /></p><p><label for="curl" class="slabel">密碼:</label> <input type="password" id="pwd1" name="pwd1" minlength="6" maxlength="16" class="required" /></p><p><label for="curl" class="slabel">確認密碼:</label> <input type="password" id="pwd2" name="pwd2" class="required" equalTo="#pwd1" /></p><p style="text-align:center;"><input class="submit" type="submit" value="提交" /></p></fieldset></form> <script type="text/javascript"> $("#commentForm").validate({errorClass: "error",submitHandler: function(form){//如果想提交表單, 需要使用form.submit()而不要使用$(form).submit() alert("submitted!");},rules: {//為控件添加兩個驗證方法 name: { required: true, minlength: 2 },email: { required: true, email: true },age:{required: true, number: true, min:18},pwd1:{required: true, minlength: 6 },pwd2:{required: true, equalTo: "#pwd1" }},messages: {//為驗證方法設置驗證失敗的消息內容 name: {required:"需要輸入姓名", minlength:"字符長度不能小于{0}個字符"},email: {required:"需要輸入電子郵箱", email:"電子郵箱格式不正確"},age:{required:"必須填寫", number:"請輸入數字",min:jQuery.format("必須年滿{0}.")},pwd1:{ required: "請填寫密碼",minlength: "字符長度不能小于{0}個字符" },pwd2:{required: "請再次輸入密碼", equalTo: "密碼不一致" }}, }); </script> </body> </html>

　　不過像時間類型的我沒有寫，因為現在大多數，都用的一些時間空間什么的，我想格式上不會有錯誤，就只用?required 這個屬性，確定下是否為空就好了。而且?numbe 這個屬性也很強大，輸入浮點型的依然可以，當然，有時候要求必須輸入整形，就用?digits 代替?numbe 吧。還有什么樣的值要進行判定，可參考下列校驗規則：

默認校驗規則 (1)required:true 必輸字段 (2)remote:"check.php" 使用ajax方法調用check.php驗證輸入值 (3)email:true 必須輸入正確格式的電子郵件 (4)url:true 必須輸入正確格式的網址 (5)date:true 必須輸入正確格式的日期 (6)dateISO:true 必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗證格式，不驗證有效性 (7)number:true 必須輸入合法的數字(負數，小數) (8)digits:true 必須輸入整數 (9)creditcard: 必須輸入合法的信用卡號 (10)equalTo:"#field" 輸入值必須和#field相同 (11)accept: 輸入擁有合法后綴名的字符串（上傳文件的后綴） (12)maxlength:5 輸入長度最多是5的字符串(漢字算一個字符) (13)minlength:10 輸入長度最小是10的字符串(漢字算一個字符) (14)rangelength:[5,10] 輸入長度必須介于 5 和 10 之間的字符串")(漢字算一個字符) (15)range:[5,10] 輸入值必須介于 5 和 10 之間 (16)max:5 輸入值不能大于5 (17)min:10 輸入值不能小于10 validate.min.js 的下載地址！

?http://files.cnblogs.com/pengain/jquery.validate.min.js

轉載于:https://www.cnblogs.com/pengain/archive/2012/05/11/2496790.html

總結

以上是生活随笔為你收集整理的jQuery validate 表单验证，涵盖各种类型数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。