ホームページ > 記事 > ウェブフロントエンド > jQuery_jqueryに基づいたフォーム送信検証の実装
jQuery_jqueryに基づいたフォーム送信検証の実装
- WBOYオリジナル
- 2016-05-16 16:30:341338ブラウズ
HTML フォーム コード:
コードをコピー コードは次のとおりです:
<フォームメソッド="ポスト"アクション="">
jQuery コード:
コードをコピー
コードは次のとおりです:
$(function(){
$("form :input.required").each(function(){
var $required = $("*"); //$(this).parent().append($required) //ドキュメントに追加します
$(this).parent().prepend($required); }); $('form :input').blur(function(){
var $parent = $(this).parent(); If($(this).is('#ユーザー名')){
If(this.value==""||this.value.length var errorMsg = 'ユーザー名を 6 文字以上入力してください' ;
$parent.append('' errorMsg ''); }else{
var okmsg = '正しい入力'; $parent.append('' okMsg ''); If($(this).is('#email')){
if(this.value==""||(this.value!=""
&&!/. @. .[a-zA-Z]{2,4}$/.test(this.value
))){
var errorMsg = '正しいメールアドレスを入力してください'; $parent.append('' errorMsg ''); var okmsg = '正しい入力'; $parent.append('' okMsg ''); }); $("form :input").focus(function(){
var $parent = $(this).parent(); $parent.find(".formtips").remove(); }); $("#send").click(function(){
var $parent = $(this).parent().parent(); $parent.find(".formtips").remove();$("form .required:input").trigger('blur'); var numError = $('form .onError').length; If(numError){
を返します。 }); $("#res").click(function(){
var $parent = $(this).parent().parent(); $parent.find(".formtips").remove(); }); });
コードは非常にシンプルで理解しやすいので、ここでは詳しく説明しません。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。