ホームページ ウェブフロントエンド jsチュートリアル 単純な JS フォーム検証 function_form 効果

単純な JS フォーム検証 function_form 効果

May 16, 2016 pm 05:18 PM
正規表現

Webサイト制作ではフォーム検証機能がよく使われます。
場合によっては、事前に作成された JS コントロールを使用する方が便利ですが、大きすぎて保守が困難です (私の JS レベルは高くありません)
そこで、単純に自分で作成しました。それが良いかどうか、柔軟かどうかについて、いくつかアドバイスをください(写真が最初に表示されていますが、醜いですが、気にしないでください):
単純な JS フォーム検証 function_form 効果

コード:

コードをコピー コードは次のとおりです:

表单验证js代码

var fv =
{
    lang: "zh-cn",  //错误提示语言
    inValidedStr: "=",  //初始随意复制,使其长度不为0
    mail: function(elementID)   //验证邮件地址合法,elementID为input文本输入框的ID
    {
        if (elementID == null) { return true; }
        else
        {
            var reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
            if (reg.test(document.getElementById(elementID).value))
            {
                fv.inValidedStr = fv.inValidedStr.replace(/mail/g, "");
                fv.inValidedStr = fv.inValidedStr.replace("=", "");
                validMsg(fv.lang, "mail", "mailInfo");
            }
            else
            {
                fv.inValidedStr = fv.inValidedStr + "mail";
                errorMsg(fv.lang, "mail", "mailInfo");
            }
        }
    },
    username: function(elementID)   //验证用户名合法 字母数字下划线,长度为6-20
    {
        if (elementID == null) { return true; }
        else
        {
            var reg = /^[a-zA-Z0-9_]{5,19}$/;
            if (reg.test(document.getElementById(elementID).value))
            {
                fv.inValidedStr = fv.inValidedStr.replace(/username/g, "");
                fv.inValidedStr = fv.inValidedStr.replace("=", "");
                validMsg(fv.lang, "username", "usernameInfo");
            }
            else
            {
                fv.inValidedStr = fv.inValidedStr + "username";
                errorMsg(fv.lang, "username", "usernameInfo");
            }
        }
    },

    //....可以加其他验证
    isValid: function() { return (fv.inValidedStr.length == 0); }
};

//验证成功时的信息 elementID 为信息提示的html单元的id
function validMsg(lang, valueType, elementID)
{
    var msgInfo = "";
    var isCn = lang == "zh-cn";

switch (valueType)
{
case "mail":
msgInfo = isCn ? " √ アドレスは有効です" : " √ メール アドレスは有効です";
Break;
case "ユーザー名":
msgInfo = isCn ? " √ 成功" : " √ アカウントが検証されました ";
Break;
case "パスワード":
msgInfo = isCn ? " √ 成功" : √ 検証された形式!";
Break;
//....同様に他の状況を追加します
default:
Break;
}
document.getElementById(elementID).innerHTML = msgInfo;
document.getElementById(elementID).style.color = "緑";
}

//検証失敗時の情報
function errorMsg(lang, valueType, elementID)
{
var msgInfo = "";
var isCn = lang == "zh-cn"; 🎜>
switch (valueType)
{
case "mail":
msgInfo = isCn ? " × 正しいメールアドレスを入力してください" : " × メールの形式がエラーです、入力してください適切な形式 .例: abc@def.com.";
ブレーク; アンダースコア形式 ": " ;
d(elementID ).style.color = "red";
}


フロントエンド コード (aspx ページ):




コードをコピー


コードは次のとおりです:

フロントエンドの aspx ページ コード

< ;form id="form1" runat="server">

< br /&gt;
&lt; input type = "submit" onclick = "return fv.isvalid()" value = "submit" /&gt;

その他の認証が必要な場合は、参加してください。関連する正規表現



コードをコピー


コードは次のとおりです:


匹配中文字符的正则表达式: [u4e00-u9fa5]
评注:匹配中文还真是个头疼的事,有了这个表达式就好办了
匹配双字节字符(包括汉字在内):[^x00-xff]
评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)
匹配空白行的正则表达式:ns*r
评注:可以用来删除空白行
匹配HTML标记的正则表达式:< (S*?)[^>]*>.*?|< .*? />
评注:网上流传的版本太糟糕,上面这个也仅仅能匹配部分,对于复杂的嵌套标记依旧无能为力
匹配首尾空白字符的正则表达式:^s*|s*$
评注:可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等),非常有用的表达式
匹配Email地址的正则表达式:w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
评注:表单验证时很实用
匹配网址URL的正则表达式:[a-zA-z]+://[^s]*
评注:网上流传的版本功能很有限,上面这个基本可以满足需求
匹配帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线):^[a-zA-Z][a-zA-Z0-9_]{4,15}$
评注:表单验证时很实用
匹配国内电话号码:d{3}-d{8}|d{4}-d{7}
评注:匹配形式如 0511-4405222 或 021-87888822
匹配腾讯QQ号:[1-9][0-9]{4,}
评注:腾讯QQ号从10000开始
匹配中国邮政编码:[1-9]d{5}(?!d)
评注:中国邮政编码为6位数字
匹配身份证:d{15}|d{18}
评注:中国的身份证为15位或18位
匹配ip地址:d+.d+.d+.d+
评注:提取ip地址时有用

匹配特定数字:
^[1-9]d*$    //匹配正整数
^-[1-9]d*$   //匹配负整数
^-?[1-9]d*$   //匹配整数
^[1-9]d*|0$  //匹配非负整数(正整数 + 0)
^-[1-9]d*|0$   //匹配非正整数(负整数 + 0)
^[1-9]d*.d*|0.d*[1-9]d*$   //匹配正浮点数
^-([1-9]d*.d*|0.d*[1-9]d*)$  //匹配负浮点数
^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$  //匹配浮点数
^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$   //匹配非负浮点数(正浮点数 + 0)
^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$  //匹配非正浮点数(负浮点数 + 0)
评注:处理大量数据时有用,具体应用时注意修正
匹配特定字符串:
^[A-Za-z]+$  //匹配由26个英文字母组成的字符串
^[A-Z]+$  //匹配由26个英文字母的大写组成的字符串
^[a-z]+$  //匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$  //匹配由数字和26个英文字母组成的字符串
^w+$  //匹配由数字、26个英文字母或者下划线组成的字符串
在使用RegularExpressionValidator验证控件时的验证功能及其验证表达式介绍如下:
只能输入数字:“^[0-9]*$”
只能输入n位的数字:“^d{n}$”
只能输入至少n位数字:“^d{n,}$”
只能输入m-n位的数字:“^d{m,n}$”
只能输入零和非零开头的数字:“^(0|[1-9][0-9]*)$”
只能输入有两位小数的正实数:“^[0-9]+(.[0-9]{2})?$”
只能输入有1-3位小数的正实数:“^[0-9]+(.[0-9]{1,3})?$”
只能输入非零的正整数:“^+?[1-9][0-9]*$”
只能输入非零的负整数:“^-[1-9][0-9]*$”
只能输入长度为3的字符:“^.{3}$”
只能输入由26个英文字母组成的字符串:“^[A-Za-z]+$”
只能输入由26个大写英文字母组成的字符串:“^[A-Z]+$”
只能输入由26个小写英文字母组成的字符串:“^[a-z]+$”
只能输入由数字和26个英文字母组成的字符串:“^[A-Za-z0-9]+$”
只能输入由数字、26个英文字母或者下划线组成的字符串:“^w+$”
验证用户密码:“^[a-zA-Z]w{5,17}$”正确格式为:以字母开头,长度在6-18之间,

只能包含字符、数字和下划线。
验证是否含有^%&',;=?前台aspx页面代码







< ;form id="form1" runat="server">



span id="mailInfo">









XXquot;等文字:“[^%&',;=?$x22] ”
只能输入汉字:“^[u4e00-u9fa5],{0,}$”
验证電子メール地址:“^w [- .]w )*@w ([-.]w )*.w ([-.]w )*$”
验证インターネットURL:”^http:/ /([w-] .) [w-] (/[w-./?%&=]*)?$”
验证电话号番号:”^((d{3,4})|d{ 3,4}-)?d{7,8}$”

正确格式は:“XXXX-XXXXXXX”、“XXXX-XXXXXXXX”、“XXX-XXXXXXX”、

“XXX-XXXXXXXX”、“XXXXXXX”、“XXXXXXXX”。
認証名(15 桁または 18 桁の数字):“^d{15}|d{}18$”
認証番号一年の 12 月:“^(0?[1-9]|1[0-2])$”正确格式:“01”-“09”および“1”“12”
验证一个月の31天:“^((0?[1-9])|((1|2)[0-9])|30|31)$”

正しい形式は「01」「09」および「1」「31」です。

適合中文字符の正则表达式: [u4e00-u9fa5]
適合双字节字符(汉字在内):[^x00-xff]
適合空行の正则表达式:n[ s| ]*r
適合HTML标记の正则表达式:/< (.*)>.*|< (.*) />/
適合首尾空格の正则表达式:(^s*)|(s*$)
適合Email地址の正则表达式:w ([- .]w )* @w ([-.]w )*.w ([-.]w )*
適合网址URLの正则表达式:http://([w-] .) [w-] (/[w - ./?%&=]*)?
(1)应用:计算字符列の長さ(一双字节字符長さ计2,ASCII字符计1)
String.prototype.len=function(){return this.replace([^x00- xff]/g,"aa").length;}
(2)应用:javascript中没有像vbscript那样的trim関数数,我们就可利用这个表达式来实现
String.prototype.trim = function ()
{
return this.replace(/(^s*)|(s*$)/g, "");
}
(3)使用:正表达式分解と转换IP地址
関数IP2V(ip) //IP地址转换成对应数值
{
re=/(d ) .(d ).(d ).(d )/g //適合IPアドレスの正表式
if(re.test(ip))
{
return RegExp.$1*Math.pow (255,3)) RegExp.$2*Math.pow(255,2)) RegExp.$3*255 RegExp.$4*1
}
else
{
throw new Error("Not有効な IP アドレス!")
}
}
(4)应用:从URL地址中提取文件名的javascript程序
s="http://www.jb51.net/page1 .htm";
s=s.replace(/(.*/){0,}([^.] ).*/ig,"$2") ; //Page1.htm
(5)应用:利用正则表达式制限制网页表单里的文本框输入内容
用正则表达式制限制只能输入中文:onkeyup="value="/blog/value. replace(/["^u4E00-u9FA5]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^u4E00-u9FA5]/g,') '))"
用正则表达式制限制只能输入全角文字: onkeyup="value="/blog/value.replace(/["^uFF00-uFFFF]/g,'') " onbeforepaste="clipboardData .setData('text',clipboardData.getData('text').replace(/[^uFF00-uFFFF]/g,''))"
用正则表达式制限只能输入力数字:onkeyup="value ="/blog/value.replace(/["^d]/g,'') "onbeforepaste= "clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/ g,''))"
用正则表达式制限只能输入力数字和和訳:onkeyup="value="/blog/value.replace(/[W]/g,"'') "onbeforepaste=" ClipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

PHP 正規表現の検証: 数値形式の検出 PHP 正規表現の検証: 数値形式の検出 Mar 21, 2024 am 09:45 AM

PHP 正規表現の検証: 数値形式の検出 PHP プログラムを作成する場合、ユーザーが入力したデータを検証する必要がよくあります。一般的な検証の 1 つは、データが指定された数値形式に準拠しているかどうかを確認することです。 PHP では、正規表現を使用してこの種の検証を行うことができます。この記事では、PHP 正規表現を使用して数値形式を検証する方法を紹介し、具体的なコード例を示します。まず、一般的な数値形式の検証要件を見てみましょう。 整数: 0 ~ 9 の数字のみが含まれ、プラスまたはマイナス記号で始めることができ、小数点は含まれません。浮動小数点

正規表現を使用して Golang でメールアドレスを検証するにはどうすればよいですか? 正規表現を使用して Golang でメールアドレスを検証するにはどうすればよいですか? May 31, 2024 pm 01:04 PM

正規表現を使用して Golang で電子メール アドレスを検証するには、次の手順に従います。 regexp.MustCompile を使用して、有効な電子メール アドレス形式と一致する正規表現パターンを作成します。 MatchString 関数を使用して、文字列がパターンと一致するかどうかを確認します。このパターンは、次のようなほとんどの有効な電子メール アドレス形式をカバーします。 ローカル ユーザー名には文字、数字、および特殊文字を含めることができます: !.#$%&'*+/=?^_{|}~-` ドメイン名には少なくとも次の文字が含まれている必要があります。 1 文字の後に文字、数字、またはハイフンを続けます。トップレベル ドメイン (TLD) は 63 文字を超えることはできません。

PHP 正規表現: 厳密な一致とあいまいな包含の除外 PHP 正規表現: 厳密な一致とあいまいな包含の除外 Feb 28, 2024 pm 01:03 PM

PHP 正規表現: 完全一致と除外 ファジー包含正規表現は、プログラマがテキストを処理する際に効率的な検索、置換、フィルタリングを実行できる強力なテキスト マッチング ツールです。 PHP では、正規表現は文字列処理やデータ マッチングにも広く使用されています。この記事では、PHP で完全一致を実行し、あいまい包含操作を除外する方法に焦点を当て、具体的なコード例を使用して説明します。完全一致 完全一致とは、バリエーションや余分な単語ではなく、正確な条件を満たす文字列のみと一致することを意味します。

Go言語の正規表現と文字列処理をマスターする Go言語の正規表現と文字列処理をマスターする Nov 30, 2023 am 09:54 AM

最新のプログラミング言語として、Go 言語は強力な正規表現と文字列処理関数を提供し、開発者が文字列データをより効率的に処理できるようにします。開発者にとって、Go 言語での正規表現と文字列処理を習得することは非常に重要です。この記事では、Go 言語の正規表現の基本概念と使い方、Go 言語を使用して文字列を処理する方法を詳しく紹介します。 1. 正規表現 正規表現は文字列のパターンを記述するためのツールであり、文字列の照合、検索、置換などの操作を簡単に実装できます。

Go で正規表現を使用してタイムスタンプを照合するにはどうすればよいですか? Go で正規表現を使用してタイムスタンプを照合するにはどうすればよいですか? Jun 02, 2024 am 09:00 AM

Go では、正規表現を使用してタイムスタンプを照合できます。ISO8601 タイムスタンプの照合に使用されるような正規表現文字列をコンパイルします。 ^\d{4}-\d{2}-\d{2}T \d{ 2}:\d{2}:\d{2}(\.\d+)?(Z|[+-][0-9]{2}:[0-9]{2})$ 。 regexp.MatchString 関数を使用して、文字列が正規表現と一致するかどうかを確認します。

Goで正規表現を使用してパスワードを確認するにはどうすればよいですか? Goで正規表現を使用してパスワードを確認するにはどうすればよいですか? Jun 02, 2024 pm 07:31 PM

Go で正規表現を使用してパスワードを検証する方法は次のとおりです。 パスワードの最小要件 (小文字、大文字、数字、特殊文字を含む少なくとも 8 文字) を満たす正規表現パターンを定義します。 regexp パッケージの MustCompile 関数を使用して正規表現パターンをコンパイルします。 MatchString メソッドを使用して、入力文字列が正規表現パターンと一致するかどうかをテストします。

Golangで正規表現を使用してURLを検出するにはどうすればよいですか? Golangで正規表現を使用してURLを検出するにはどうすればよいですか? May 31, 2024 am 10:32 AM

正規表現を使用して Golang で URL を検出する手順は次のとおりです。 regexp.MustCompile(pattern) を使用して正規表現パターンをコンパイルします。パターンは、プロトコル、ホスト名、ポート (オプション)、パス (オプション)、およびクエリ パラメーター (オプション) と一致する必要があります。 regexp.MatchString(pattern,url) を使用して、URL がパターンと一致するかどうかを検出します。

PHP 正規表現関数を使用して強力なデータ マッチング関数を実現する PHP 正規表現関数を使用して強力なデータ マッチング関数を実現する Nov 20, 2023 pm 12:23 PM

PHP の正規表現機能を利用して強力なデータ マッチング機能を実現 正規表現は、文字列のパターン マッチングを効率的に行うことができる強力なデータ マッチング ツールです。 PHP では、正規表現関数によって多くの関数が提供され、データ処理とフィルタリングがより柔軟で便利になります。 1. 正規表現の基本構文 正規表現は一連の文字と特殊記号で構成され、文字列のパターンを記述するために使用されます。 PHP で一般的に使用される正規表現関数には、preg_match()、preg_match などがあります。

See all articles