再次申明，外掛程式問題比較多，後期一個個來解決，請不要惡言相向。希望各位多多提好的建議善言。
一. 分析表單驗證的基本情況
在我們做web開發的過程中，會遇到各種各樣的驗證。歸納一下基本可以分為一下幾類:
(1). 是否必填項 [這個是非常基本的]
(2). 輸入參數中的範圍校正
(3). 輸入參數與另外一個控制項值的比較
(4). 輸入的參數Regex驗證
二. 是否必填項驗證
有如下幾種情況:
（1） 輸入框獲得焦點提示
（2）輸入框失去焦點驗證錯誤提示
（3）輸入框失去焦點驗證正確提示
首先確定輸入框是否是必填項，然後就是提示訊息的現實位置。
根據以上幾種情況確定如下幾個參數：
required : 是否為必填項，true 和 false ，true 表示為必填項 (*)
onFocus : 獲得焦點的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
onBlur : 失去焦點的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)(驗證失敗提示)
onSucces : 驗證成功的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
tipId : 用於顯示提示資訊的控制項id (*)
組合例子 : {required:true,onFocus:"Required",onBlur:"@error",onSucces:"Success",tipId:"tipid"}
注意: 上面定義的一些規則，有些可能沒有實現，在後期過程中逐漸完善。
複製代碼 代碼如下:
/**
* 檢查輸入框是否為必填項
* 輸入參數：
* required : 是否為必填項，true 和 false ，true 表示為必填項 (*)
* onFocus : 獲得焦點的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
* onBlur : 失去焦點的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)(驗證失敗提示)
* onSucces : 驗證成功的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
* tipId : 用於顯示提示資訊的控制項id (*)
* 組合例子 : {required:true,onFocus:"Required",onBlur:"@error",onSucces:"Success",tipId:"tipid"}
*/
$.fn.extend({
checkRequired:function(inputArg){
if(inputArg.required){
if($(this).is("input") || $(this).is("textarea")){
//綁定獲得焦時間點事件
$(this).bind("focus",function(){
if(inputArg.onFocus!=undefined){
$("#" + inputArg.tipId).html(inputArg.onFocus);
}
});
//綁定失去焦時間點事件
$(this).bind("blur",function(){
if($(this).val()!=undefined && $(this).val()!=""){
$("#" + inputArg.tipId).html(inputArg.onSucces);
}else{
$("#" + inputArg.tipId).html(inputArg.onBlur);
}
});
}
}
}
});
使用效果和測試代碼：
當獲得焦點時候後面提示效果
當失去焦點沒有輸入提示效果
當輸入文本資訊之後提示成功效果
測試代碼如下：
複製代碼 代碼如下:
<script language="JavaScript" src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="JavaScript" src="jquery-extend-1.0.0.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$("#txtName").checkRequired({
required:true,
onFocus:"這個為必填項",
onBlur:"必須填寫啊",
onSucces:"恭喜，你輸入了",
tipId:"txtNameTip"
});
});
</script>
三. 輸入參數中的範圍校正
相比上面的驗證來說，這個稍微複雜了一些，因為有輸入值的範圍。校正做了如下區分：輸入的資料類型為 字串， 數字 ，時間
如果是字串則比較字串的長短，數字和時間比較大小。（時間目前沒有完善）
因為比較範圍所以定義一個區間範圍，所以這裡再添加兩個屬性，下限值和上限值。
輸入參數列表:
onFocus : 獲得焦點的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
onEmpty : 輸入項為空白文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
onSucces : 驗證成功的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
onBlur : 失去焦點的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)(驗證失敗提示)
dataType : 資料類型參數(text,number,date)
min : 輸入的最小值
max : 輸入的最大值
tipId : 用於顯示提示資訊的控制項id (*)
複製代碼 代碼如下:
/**
* 檢查輸入項的範圍
* 輸入參數：
* onFocus : 獲得焦點的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
* onEmpty : 輸入項為空白文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
* onSucces : 驗證成功的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
* onBlur : 失去焦點的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)(驗證失敗提示)
* dataType : 資料類型參數(text,number,date)
* min : 輸入的最小值
* max : 輸入的最大值
* tipId : 用於顯示提示資訊的控制項id (*)
*
*/
$.fn.extend({
checkRange:function(inputArg){
if ($(this).is("input") || $(this).is("textarea")) {
//獲得焦點綁定
$(this).bind("focus",function(){
if(inputArg.onFocus!=undefined){
$("#" + inputArg.tipId).html(inputArg.onFocus);
}
});
//失去焦點綁定
$(this).bind("blur",function(){
if($(this).val()==undefined || $(this).val()==""){
$("#" + inputArg.tipId).html(inputArg.onEmpty);
}else{
switch(inputArg.dataType){
case "text":
if($(this).val().length>= parseInt(inputArg.min) && $(this).val().length< parseInt(inputArg.max)){
$("#" + inputArg.tipId).html(inputArg.onSucces);
}else{
$("#" + inputArg.tipId).html(inputArg.onBlur);
}
break;
case "number":
if(!isNaN($(this).val())){
if(parseInt($(this).val())>parseInt(inputArg.min) && parseInt($(this).val())<parseInt(inputArg.max)){
$("#" + inputArg.tipId).html(inputArg.onSucces);
}else{
$("#" + inputArg.tipId).html(inputArg.onBlur);
}
}
break;
case "date":
break;
}
}
});
}
}
});
輸入項範圍效果和測試代碼
如果年齡約定為數字
輸入不在約定範圍之內
驗證成功
複製代碼 代碼如下:
$("#txtAge").checkRange({
onFocus:"年齡為數字",
onEmpty:"不可為空啊",
onSucces:"驗證成功",
onBlur:"驗證失敗，請認真輸入",
dataType:"number",
min:"10",
max:"100",
tipId:"txtAgeTip"
});
<p>
<label>年齡:</label><input type="text" id="txtAge" value=""/><span id="txtAgeTip"></span>
</p>
四. 輸入參數與另外一個控制項值的比較
和上面的驗證比較，不同的地方在於要指定比較控制項的id
下面是輸入參數:
onFocus : 獲得焦點的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
onEmpty : 輸入項為空白文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
onSucces : 驗證成功的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
onBlur : 失去焦點的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)(驗證失敗提示)
dataType : 資料類型參數(text,number,date)
comType : 比較的類型(=,>,>=,<,<=,!=)
tipId : 用於顯示提示資訊的控制項id (*)
targetId : 比較的目標控制項Id
複製代碼 代碼如下:
/**
* 控制項值之間的比較
* 輸入參數:
* onFocus : 獲得焦點的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
* onEmpty : 輸入項為空白文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
* onSucces : 驗證成功的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
* onBlur : 失去焦點的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)(驗證失敗提示)
* dataType : 資料類型參數(text,number,date)
* comType : 比較的類型(=,>,>=,<,<=,!=)
* tipId : 用於顯示提示資訊的控制項id (*)
* targetId : 比較的目標控制項Id
*/
$.fn.extend({
checkCompare:function(inputArg){
if($(this).is("input") || $(this).is("textarea")){
//獲得焦點綁定
$(this).bind("focus",function(){
if(inputArg.onFocus!=undefined){
$("#" + inputArg.tipId).html(inputArg.onFocus);
}
});
//失去焦點綁定
$(this).bind("blur",function(){
var targetValue=$("#"+inputArg.targetId).val();
if(targetValue!=undefined && targetValue!=null){
if($(this).val()!=undefined && $(this).val()!=""){
if(inputArg.dataType=="text"){
switch(inputArg.comType){
case "=":
if(targetValue==$(this).val()){
$("#" + inputArg.tipId).html(inputArg.onSucces);
}else{
$("#" + inputArg.tipId).html(inputArg.onBlur);
}
break;
case "!=":
if(targetValue!=$(this).val()){
$("#" + inputArg.tipId).html(inputArg.onSucces);
}else{
$("#" + inputArg.tipId).html(inputArg.onBlur);
}
break;
}
}else if(inputArg.dataType=="number"){
if (isNaN(targetValue) == false && isNaN($(this).val()) == false) {
switch (inputArg.comType) {
case "=":
if (targetValue == $(this).val()) {
$("#" + inputArg.tipId).html(inputArg.onSucces);
}
else {
$("#" + inputArg.tipId).html(inputArg.onBlur);
}
break;
case "!=":
if (targetValue != $(this).val()) {
$("#" + inputArg.tipId).html(inputArg.onSucces);
}
else {
$("#" + inputArg.tipId).html(inputArg.onBlur);
}
break;
case ">":
if ($(this).val() > targetValue) {
$("#" + inputArg.tipId).html(inputArg.onSucces);
}
else {
$("#" + inputArg.tipId).html(inputArg.onBlur);
}
break;
case ">=":
if ($(this).val() >= targetValue) {
$("#" + inputArg.tipId).html(inputArg.onSucces);
}
else {
$("#" + inputArg.tipId).html(inputArg.onBlur);
}
break;
case "<":
if ($(this).val() < targetValue) {
$("#" + inputArg.tipId).html(inputArg.onSucces);
}
else {
$("#" + inputArg.tipId).html(inputArg.onBlur);
}
break;
case "<=":
if ($(this).val() <= targetValue) {
$("#" + inputArg.tipId).html(inputArg.onSucces);
}
else {
$("#" + inputArg.tipId).html(inputArg.onBlur);
}
break;
}
}else{
$("#" + inputArg.tipId).html(inputArg.onBlur);
}
}else if(inputArg.dataType=="date"){
}
}else{
$("#" + inputArg.tipId).html(inputArg.onEmpty);
}
}
});
}
}
});
控制項值之間的比較效果和測試代碼
效果圖1
效果圖2
效果圖3
複製代碼 代碼如下:
$("#txtPass2").checkCompare({
onFocus:"和前面的比較",
onEmpty:"輸入的不可為空",
onSucces:"驗證成功",
onBlur:"驗證失敗",
dataType:"number",
comType:">=",
tipId:"txtPass2Tip",
targetId:"txtPass1"
});
<p>
<label>密碼1:</label><textarea id="txtPass1"></textarea><span id="txtPass1Tip"></span>
</p>
<p>
<label>密碼2:</label><textarea id="txtPass2"></textarea><span id="txtPass2Tip"></span>
</p>
五. 輸入的參數Regex驗證
這個驗證相對比較簡單，因為使用Regex，無需自己去思考輸入的情況。只需要引入一個Regex就可以了
下面是輸入參數:
onFocus : 獲得焦點的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
onEmpty : 輸入項為空白文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
onSucces : 驗證成功的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
onBlur : 失去焦點的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)(驗證失敗提示)
regExp : Regex
tipId : 用於顯示提示資訊的控制項id (*)
jQueryRegex的驗證
複製代碼 代碼如下:
/**
* Regex的驗證
* 輸入參數:
* onFocus : 獲得焦點的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
* onEmpty : 輸入項為空白文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
* onSucces : 驗證成功的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)
* onBlur : 失去焦點的文字提示(如果指定樣式則在樣式名前加 @ ,因此文字提示首字母不能有@)(驗證失敗提示)
* regExp : Regex
* tipId : 用於顯示提示資訊的控制項id (*)
*/
$.fn.extend({
checkRegExp:function(inputArg){
if ($(this).is("input") || $(this).is("textarea")) {
//獲得焦點綁定
$(this).bind("focus", function(){
if (inputArg.onFocus != undefined) {
$("#" + inputArg.tipId).html(inputArg.onFocus);
}
});
//獲得失去焦時間點事件
$(this).bind("blur",function(){
if($(this).val()!=undefined && $(this).val()!=""){
if ($(this).val().match(inputArg.regExp) == null) {
$("#" + inputArg.tipId).html(inputArg.onSucces);
}else{
$("#" + inputArg.tipId).html(inputArg.onBlur);
}
}else{
$("#" + inputArg.tipId).html(inputArg.onEmpty);
}
});
}
}
});
Regex效果和測試代碼
輸入非數字
輸入數字
複製代碼 代碼如下:
$("#txtAge").checkRegExp({
onFocus:"年齡必須為數字",
onEmpty:"輸入的不可為空",
onSucces:"驗證成功",
onBlur:"驗證失敗",
regExp:/\D/,
tipId:"txtAgeTip"
});
<label>年齡:</label><input type="text" id="txtAge" value=""/><span id="txtAgeTip"></span>
這是驗證外掛程式的一個基本雛形，後期不斷跟新..........
