又十個超級有用的PHP代碼片段
704
2023-12-08
為什么要用jquery validate這個表單驗證插件：自己寫一個通用且功能全面強大的jquery表單驗證插件并不容易。jquery validate這個jquery插件幾乎可以輕松應對95%以上的表單驗證，具體內容如下
使用方式
1、在控件中使用默認驗證規則，例子：
電子郵件(必填)
<input id="email" class="required email" value="email@" />
2、可以在控件中自定義驗證規則，例子：
自定義(必填,[3,5])
<input id="complex" value="hi" class="{required:true,minlength:3, maxlength:5,
messages:{required:'為什么不輸入一點文字呢',minlength:'輸入的太少了',maxlength:'輸入那么多干嘛'}}" />
3、通過javascript自定義驗證規則，下面的JS自定義了兩個規則，password和confirm_password
$().ready(function() {
$("#form2").validate({
rules: {
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: {
password: {
required: "沒有填寫密碼",
minlength: jQuery.format("密碼不能小于{0}個字符")
},
confirm_password: {
required: "沒有確認密碼",
minlength: "確認密碼不能小于{0}個字符",
equalTo: "兩次輸入密碼不一致嘛"
}
}
});
});
required除了設置為true/false之外，還可以使用表達式或者函數，比如
$("#form2").validate({
rules: {
funcvalidate: {
required: function() {return $("#password").val()!=""; }
}
},
messages: {
funcvalidate: {
required: "有密碼的情況下必填"
}
}
});
Html
密碼<input id="password" name="password" type="password" />
確認密碼<input id="confirm_password" name="confirm_password" type="password" />
條件驗證<input id="funcvalidate" name="funcvalidate" value="" />
4、使用meta自定義驗證信息
首先用JS設置meta
$("#form3").validate({ meta: "validate" });
Html
email<input class="{validate:{required:true, email:true,
messages:{required:'輸入email地址', email:'你輸入的不是有效的郵件地址'}}}"/>
5、使用meta可以將驗證規則寫在自定義的標簽內，比如validate
JS設置meta
$().ready(function() {
$.metadata.setType("attr", "validate");
$("#form1").validate();
});
Html
Email
<input id="email" name="email" validate="{required:true, email:true, messages:{required:'輸入email地址', email:'你輸入的不是有效的郵件地址'}}" />
6、自定義驗證規則
對于復雜的驗證，可以通過jQuery.validator.addMethod添加自定義的驗證規則
官網提供的additional-methods.js里包含一些常用的驗證方式，比如lettersonly，ziprange，nowhitespace等
例子
// 字符驗證
jQuery.validator.addMethod("userName", function(value, element) {
return this.optional(element) || /^[u0391-uFFE5w]+$/.test(value);
}, "用戶名只能包括中文字、英文字母、數字和下劃線");
//然后就可以使用這個規則了
$("#form1").validate({
// 驗證規則
rules: {
userName: {
required: true,
userName: true,
rangelength: [5,10]
}
},
/* 設置錯誤信息 */
messages: {
userName: {
required: "請填寫用戶名",
rangelength: "用戶名必須在5-10個字符之間"
}
},
});
7、radio、checkbox、select的驗證方式類似
radio的驗證
性別
<span>
男<input type="radio" id="gender_male" value="m" name="gender" class="{required:true}"/><br />
女<input type="radio" id="gender_female" value="f" name="gender" />
</span>
checkbox的驗證
最少選擇兩項
<span>
選項1<input type="checkbox" id="check_1" value="1" name="checkGroup"
class="{required:true,minlength:2, messages:{required:'必須選擇',minlength:'至少選擇2項'}}" /><br />
選項2<input type="checkbox" id="check_2" value="2" name="checkGroup" /><br />
選項3<input type="checkbox" id="check_3" value="3" name="checkGroup" /><br />
</span>
select的驗證
下拉框
<span>
<select id="selectbox" name="selectbox" class="{required:true}">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</span>
8、Ajax驗證
用remote可以進行Ajax驗證
remote: {
url: "url", //url地址
type: "post", //發送方式
dataType: "json", //數據格式 data: { //要傳遞的數據
username: function() {
return $("#username").val();
}}
}
驗證用戶多種信息：
<script type="text/javascript"></script>
// 手機號碼驗證
jQuery.validator.addMethod("mobile", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/
return this.optional(element) || (length == 11 && mobile.test(value));
}, "手機號碼格式錯誤");
// 電話號碼驗證
jQuery.validator.addMethod("phone", function(value, element) {
var tel = /^(0[0-9]{2,3}-)?([2-9][0-9]{6,7})+(-[0-9]{1,4})?$/;
return this.optional(element) || (tel.test(value));
}, "電話號碼格式錯誤");
// 郵政編碼驗證
jQuery.validator.addMethod("zipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "郵政編碼格式錯誤");
// QQ號碼驗證
jQuery.validator.addMethod("qq", function(value, element) {
var tel = /^[1-9]d{4,9}$/;
return this.optional(element) || (tel.test(value));
}, "qq號碼格式錯誤");
// IP地址驗證
jQuery.validator.addMethod("ip", function(value, element) {
var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Ip地址格式錯誤");
// 字母和數字的驗證
jQuery.validator.addMethod("chrnum", function(value, element) {
var chrnum = /^([a-zA-Z0-9]+)$/;
return this.optional(element) || (chrnum.test(value));
}, "只能輸入數字和字母(字符A-Z, a-z, 0-9)");
// 中文的驗證
jQuery.validator.addMethod("chinese", function(value, element) {
var chinese = /^[u4e00-u9fa5]+$/;
return this.optional(element) || (chinese.test(value));
}, "只能輸入中文");
// 下拉框驗證
$.validator.addMethod("selectNone", function(value, element) {
return value == "請選擇";
}, "必須選擇一項");
// 字節長度驗證
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
var length = value.length;
for (var i = 0; i < value.length; i++) {
if (value.charCodeAt(i) > 127) {
length++;
}
}
return this.optional(element) || (length >= param[0] && length <= param[1]);
}, $.validator.format("請確保輸入的值在{0}-{1}個字節之間(一個中文字算2個字節)"));
參考學習：功能強大的jquery.validate表單驗證插件
本文已被整理到了《jquery表單驗證大全》 ，歡迎大家學習閱讀。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持綠夏網。
