一次$.getJSON不執行的簡單記錄
719
2024-02-24
Validate驗證插件，內置豐富的驗證規則，還有靈活的自定義規則接口，HTML、CSS與JS之間的低耦合能讓您自由布局和豐富樣式，支持input,select,textarea的驗證。
Description
瀏覽器支持：IE7+ 、Chrome、Firefox、Safari、Mobile Browser
jQuery版本：1.7.0+
Usage
載入jQuery、validate
<script type="text/javascript" src="http://www.gimoo.net/t/1903/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://www.gimoo.net/t/1903/jquery-validate.js"></script>
DOM標簽驗證規則填寫
<div class="form_control"> <input class="required" value="315359131@qq.com" type="text" name="email" data-tip="請輸入您的郵箱" data-valid="isNonEmpty||isEmail" data-error="email不能為空||郵箱格式不正確"> </div> <div class="form_control"> <select class="required" data-valid="isNonEmpty" data-error="省份必填"> <option value="">請選擇省份</option> <option value="001">001</option> <option value="002">002</option> </select> </div>
給需要驗證的表單元素的class填入required（不建議在這個class上做其他樣式）。
建議input用獨立div包裹，因為驗證的message是從當前input的父元素上append生成。
data-tip：在尚未驗證而獲取焦點時出現的提示。
data-valid：驗證規則，若有組合驗證，以||符號分割。
data-error：驗證錯誤提示，對應data-valid，以||符號分割。
單選/復選比較特殊，需要添加元素包裹單選/復選集合，并在包裹元素上加驗證規則。
<div class="form_control"> <span class="required" data-valid="isChecked" data-error="性別必選" data-type="radio"> <label><input type="radio" name="sex">男</label> <label><input type="radio" name="sex">女</label> <label><input type="radio" name="sex">未知</label> </span> </div> <div class="form_control"> <span class="required" data-valid="isChecked" data-error="標簽至少選擇一項" data-type="checkbox"> <label><input type="checkbox" name="label">紅</label> <label><input type="checkbox" name="label">綠</label> <label><input type="checkbox" name="label">藍</label> </span> </div>
JS調用
//**注意：必須以表單元素調用validate**
$('form').validate({
type:{
isChecked: function(value, errorMsg, el) {
var i = 0;
var $collection = $(el).find('input:checked');
if (!$collection.length) {
return errorMsg;
}
}
},
onFocus: function() {
this.parent().addClass('active');
return false;
},
onBlur: function() {
var $parent = this.parent();
var _status = parseInt(this.attr('data-status'));
$parent.removeClass('active');
if (!_status) {
$parent.addClass('error');
}
return false;
}
});
表單提交前的驗證
$('form').on('submit', function(event) {
event.preventDefault();
$(this).validate('submitValidate'); //return true or false;
});
validate內置驗證規則
required:true 必輸字段
remote:"check.php" 使用ajax方法調用check.php驗證輸入值
email:true 必須輸入正確格式的電子郵件
url:true 必須輸入正確格式的網址
date:true 必須輸入正確格式的日期
dateISO:true 必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗證格式，不驗證有效性
number:true 必須輸入合法的數字(負數，小數)
digits:true 必須輸入整數
creditcard: 必須輸入合法的信用卡號
equalTo:"#field" 輸入值必須和#field相同
accept: 輸入擁有合法后綴名的字符串（上傳文件的后綴）
maxlength:5 輸入長度最多是5的字符串(漢字算一個字符)
minlength:10 輸入長度最小是10的字符串(漢字算一個字符)
rangelength:[5,10] 輸入長度必須介于 5 和 10 之間的字符串")(漢字算一個字符)
range:[5,10] 輸入值必須介于 5 和 10 之間
max:5 輸入值不能大于5
min:10 輸入值不能小于10
例子：
驗證用戶名，密碼，確認密碼，主頁，生日，郵箱等
首先引入Jquery、引入jquery.validate.js、引入messages_cn.js并且為表單定義一個id，為需要驗證的控件定義name屬性，并賦值，此插件使用的是控件的name屬性，而非id。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jquery郵箱驗證.aspx.cs" Inherits="練習.jquery郵箱驗證" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#aa{ color:Red;}
</style>
<script src="http://www.gimoo.net/t/1903/Jquery1.7.js" type="text/javascript"></script>
<script src="http://www.gimoo.net/t/1903/jquery.validate.js" type="text/javascript"></script>
<script src="http://www.gimoo.net/t/1903/messages_cn.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#form1').validate({
rules: {
username: { required: true, minlength: 6, maxlength: 12 },
password: { required: true, minlength: 6 },
passwordok:{required: true, equalTo: "#password"},
index: { required: true, url: true },
birthday: { required: true, dateISO: true },
bloodpress:{required: true,digits:true},
email: { required: true, email: true }
},
errorshow: function (error, element) {
error.appendTo(element.siblings('span'));
}
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr><td>用戶名：</td><td>
<input name="username" type="text" /><span id="aa">*</span></td></tr>
<tr><td>密碼：</td><td>
<input id="password" name="password" type="text" /><span id="aa">*</span></td></tr>
<tr><td>確認密碼：</td><td>
<input id="repassword" name="passwordok" type="text" /><span id="aa">*</span></td></tr>
<tr><td>主頁：</td><td>
<input name="index" type="text" /><span id="aa">*</span></td></tr>
<tr><td>生日：</td><td>
<input name="birthday" type="text" /><span id="aa">*</span></td></tr>
<tr><td>血壓：</td><td>
<input name="bloodpress" type="text" /><span id="aa">*</span></td></tr>
<tr><td>郵箱：</td><td><input name="email" type="text" /><span id="aa">*</span></td></tr>
<tr><td></td><td>
<input id="Button1" type="button" value="button" /></td></tr>
</table>
</div>
</form>
</body>
</html>
實現如下效果：
以上就是本文的全部內容，希望對大家的學習有所幫助。
