JS 驗證相關 (及時驗證與提交驗證)

2021-09-26 07:24:59 字數 3541 閱讀 3961

文字框輸入內容及時判斷

除了用oninput事件 還可以使用onkeyup事件鍵盤輸入

isnan() 判斷是否為數字 

οnkeyup="if (isnan(value)&&value!='-') execcommand('undo');"

οnkeyup="this.value=this.value.replace(/\d/g,'')"  正整數

execcommand  相當於api裡面封裝了一些操作 undo是撤銷之前操作

onkeyup = "this.value = this.value.replace(' ', '')"   是不許輸入空格 一旦輸入立即清掉

頁面驗證的大致幾類

1:非空  2:輸入內容限制 3:輸入內容比較相同(郵箱)

驗證地方:

1:失去焦點的驗證 2:輸入內容改變驗證 3:提交按鈕時驗證 

(2一般驗證方法return true或false)到時候3可以呼叫方法判斷出來true或false  也就是一次方法2,3都去呼叫使用

比如這個驗證名字 提交的時候直接呼叫namejudge 可以知道是否成功

var testname = namejudge($("#name"));

if (!testname)

驗證效果:

1:不滿足的元素進行紅色邊框顯示 2:如果是提交的話需要定位到不滿足元素

運用的知識點大綱

1:事件  onblur  onkeyup

2:   紅框效果   $(e).css("border-color", "#ee2700");

移除  $(e).removeattr("style");

3:調到錨點 $('body,html').animate(, 500); //或者是$(this)

效果模板

一:驗證名字格式 以及對名字首字元處理

//驗證名字 οnblur="namejudge(this)"

function namejudge(e) , 500);//跳至錨點

return false;

} else if (!bool) , 500);

return false;

}$(e).prev().removeattr("style");

$(e).removeattr("style");

return true;

}//名字正則驗證

function namecheck(name)

//格式化輸入的英文本串:單詞首字母大寫  οnkeyup="nameformatting(this)"

function nameformatting(obj)

$(obj).val($(obj).val().replace(/[^a-za-z\s]/g, ''));

var str = $(obj).val();

if (str != "" && str != undefined)

}function nameformatstr(str)

}returnstr = tempstr != "" ? tempstr.substring(0, tempstr.length - 1) : tempstr;

}else

return returnstr;

}// 首字母大寫 沒有間隔

function withoutinterval(str)

// 首字母大寫 以空格間隔每個單詞

function nameformatstrwithspacecharacter(str)

).join(' ');

}// 首字母大寫 以 '/'間隔每個單詞

function nameformatstrwithdiagonal(str)

).join('/');

}二:**號碼的驗證  限制內容為數字 οnkeyup="validate_numbers(this)"   內容判斷 οnblur="judgephone(this)"

//驗證純數字onkeyup事件不是數字消失撤回

function validate_numbers(e)

//內容驗證

function judgephone(obj) )\)(\d)-(\d)+$/;

var ts = s.test($(obj).val());

if (!ts) , 500);

"phone");

} else

} else , 500);

result = false;

}if (result)

return result;

}三:郵箱的驗證 內容驗證  匹配驗證 οnblur="judgeemail(this,另乙個input的id)"

頁面input元素

email:*

confirm email:*

function judgeemail(e,str) , 500);

result = false;

} else if (!bool) , 500);

result = false;

}if (email !== "") , 500);

result = false;}}

if (result)

}//驗證郵箱規則

function emailcheck(email) $/;

var s = new regexp(/^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/);

return s.test(email.tolowercase());

}四:日期比大小規則

流程:獲取倆個日期的值   進行new date轉化日期模式  通過formatdate方法 轉成想要模式

var t_datefrom = $("#datefrom").val();

var t_dateto = $("#dateto").val();

var date1 = new date(t_datefrom);

var date2 = new date(t_dateto);

var t_date1 = formatdate(date1);

var t_date2 = formatdate(date2);

var formatdate = function (date) ;

五:下拉框驗證資料 繫結資料

驗證資料就是 onchange 的時候如果為空 就加上紅框效果 調至錨點

繫結資料  倆種情況 一種是自動繫結 也就是上一級變動之後繫結  一種是手動繫結 

但是方法用乙個就行傳引數為上級id   手動的就傳$(this).val()

//城市列表手動選擇改變

function changecitys(countryid ) ,

success: function (data)

else

},});

}//繫結城市列表下拉框

function evalaacity(data, e)

$(e).parent().parent().next().children().eq(1).html(htmlstr);

js 驗證表單 js提交驗證類

附加 js驗證radio是否選擇 1.長度限制 2.只能是漢字 3.只能是英文 4.只能是數字 5.只能是英文本元和數字 6.驗證 油箱格式 7.遮蔽關鍵字 這裡遮蔽 和 8.兩次輸入密碼是否相同 夠了吧遮蔽右鍵 很酷 nc ntextmenu return false ndragstart ret...

js表單提交驗證

數字驗證 最好使用正規表示式哈!驗證只能輸入數字.function check validate1 value return false 驗證只能輸入字母.數字和下劃線.function check validate2 value return false function check valida...

DjangoForm 提交驗證

1.建立模版 class loginform forms.form 2.將請求交給模版,建立乙個物件 obj loginform request.post 3.進行驗證 obj.is valid 4.獲取正確的資訊 obj.clean 5.獲取錯誤的資訊 obj.errors 建立乙個 static...