ホームページ > ウェブフロントエンド > jsチュートリアル > jquery の統一フォームの定期的な実装 validation_jquery

jquery の統一フォームの定期的な実装 validation_jquery

WBOY
リリース: 2016-05-16 15:38:43
オリジナル
1015 人が閲覧しました

フォームの検証は常に非常に面倒で、特に大きなフォームの場合、入力ごとに個別の検証を記述すると致命的になります。最近、フォームの内容が正しいかどうかを均一に検証するための短い js を書きました。 。

このコードを使用すると、入力ごとに形式判定を記述する必要がなく、データ型に正しい形式の正規表現を記述するだけで済みます。checkForm 関数にバインドするだけです。

ご提案がございましたら、コメントしてください

<input type="text" datatype=“正则”/>

//表单验证
//点击下一步事件
function checkForm(form){
var success = true;
$("."+form+" input").each(function(){
var $that = $(this);
var dataType = eval($that.attr("dataType"));
if(dataType!=undefined){
if($that.val().match(dataType)){
$that.removeClass("borderRed");
}else{
$that.focus();
$that.addClass("borderRed");
success = false;
return false;
}
}
})
return success;
}

//给每个带有datatype属性的标签绑定blur focus事件

$(document).on("blur","input",function(){
var $that = $(this);
var dataType = eval($that.attr("dataType"));
if(dataType!=undefined){
if($that.val().match(dataType)){
$that.removeClass("borderRed");
}else{
$that.addClass("borderRed");
}
}
})
$(document).on("focus","input",function(){
$(this).removeClass("borderRed");
});
ログイン後にコピー

上記のコンテンツでは、jquery の規則性を使用して統合フォーム検証を実装する方法を説明しました。気に入っていただければ幸いです。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート