この記事の例では、フォーム検証コードの jquery 実装について説明します。皆さんの参考に共有してください。詳細は以下の通りです。
実行中のエフェクトのスクリーンショットは次のとおりです:
具体的なコードは次のとおりです:
プラグインに直接アクセスしてコードを実装する方が簡単です。コードを中心に説明するのも簡単です。
/*
描述：基于jquery的表单验证插件。
*/
(function ($) {
$.fn.checkForm = function (options) {
var root = this; //将当前应用对象存入root
var isok = false; //控制表单提交的开关
var pwd1; //密码存储
var defaults = {
//图片路径
img_error: "img/error.gif",
img_success: "img/success.gif",
//提示信息
tips_success: '', //验证成功时的提示信息，默认为空
tips_required: '不能为空',
tips_email: '邮箱地址格式有误',
tips_num: '请填写数字',
tips_chinese: '请填写中文',
tips_mobile: '手机号码格式有误',
tips_idcard: '身份证号码格式有误',
tips_pwdequal: '两次密码不一致',
//正则
reg_email: /^\w+\@[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/i, //验证邮箱
reg_num: /^\d+$/, //验证数字
reg_chinese: /^[\u4E00-\u9FA5]+$/, //验证中文
reg_mobile: /^1[3458]{1}[0-9]{9}$/, //验证手机
reg_idcard: /^\d{14}\d{3}?\w$/ //验证身份证
};
//不为空则合并参数
if(options)
$.extend(defaults, options);
//获取（文本框，密码框，多行文本框），当失去焦点时，对其进行数据验证
$(":text,:password,textarea", root).each(function () {
$(this).blur(function () {
var _validate = $(this).attr("check"); //获取check属性的值
if (_validate) {
var arr = _validate.split(' '); //用空格将其拆分成数组
for (var i = 0; i < arr.length; i++) {
//逐个进行验证，不通过跳出返回false,通过则继续
if (!check($(this), arr[i], $(this).val()))
return false;
else
continue;
}
}
})
})
//表单提交时执行验证,与上面的方法基本相同，只不过是在表单提交时触发
function _onSubmit() {
isok = true;
$(":text,:password,textarea", root).each(function () {
var _validate = $(this).attr("check");
if (_validate) {
var arr = _validate.split(' ');
for (var i = 0; i < arr.length; i++) {
if (!check($(this), arr[i], $(this).val())) {
isok = false; //验证不通过阻止表单提交，开关false
return; //跳出
}
}
}
});
}
//判断当前对象是否为表单，如果是表单，则提交时要进行验证
if (root.is("form")) {
root.submit(function () {
_onSubmit();
return isok;
})
}
//验证方法
var check = function (obj, _match, _val) {
//根据验证情况，显示相应提示信息，返回相应的值
switch (_match) {
case 'required':
return _val ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_required, false);
case 'email':
return chk(_val, defaults.reg_email) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_email, false);
case 'num':
return chk(_val, defaults.reg_num) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_num, false);
case 'chinese':
return chk(_val, defaults.reg_chinese) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_chinese, false);
case 'mobile':
return chk(_val, defaults.reg_mobile) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_mobile, false);
case 'idcard':
return chk(_val, defaults.reg_idcard) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_idcard, false);
case 'pwd1':
pwd1 = _val; //实时获取存储pwd1值
return true;
case 'pwd2':
return pwdEqual(_val, pwd1) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_pwdequal, false);
default:
return true;
}
}
//判断两次密码是否一致(返回bool值)
var pwdEqual = function(val1, val2) {
return val1 == val2 ? true : false;
}
//正则匹配(返回bool值)
var chk = function (str, reg) {
return reg.test(str);
}
//显示信息
var showMsg = function (obj, msg, mark) {
$(obj).next("#errormsg").remove();//先清除
var _html = "<span id='errormsg' style='font-size:13px;color:gray;background:url(" + defaults.img_error + ") no-repeat 0 -1px;padding-left:20px;margin-left:5px;'>" + msg + "</span>";
if (mark)
_html = "<span id='errormsg' style='font-size:13px;color:gray;background:url(" + defaults.img_success + ") no-repeat 0 -1px;padding-left:20px;margin-left:5px;'>" + msg + "</span>";
$(obj).after(_html);//再添加
return mark;
}
}
})(jQuery);
最初に実装原則について話しましょう:
まず、通常のルールと対応するプロンプト情報を定義します。
カスタム チェック属性を追加します。
次に、check 属性の値を取得し、複数の値をスペースで区切ります。 split() を使用して配列に分割し、check() メソッドを 1 つずつ呼び出して確認します。
そして、表示される情報は検証の戻り値によって決まります。
ここには 2 つの特別な検証があります。つまり、
1. 空かどうかを確認します (必須)
2. 2 つのパスワードは一致していますか (pwd2)
これら 2 つは正規表現をまったく使用していないため、どちらも使用しません。 2 つのパスワードが一致しているかどうかに関係なく、別のメソッド pwdEqual();
を作成しました。プラグインにはいくつかの検証ルールしか記述していませんが、十分でない場合は、自分で拡張して追加できます。
拡張には 3 つのステップのみが必要です:
1. 正規表現を追加します。
2. 対応するプロンプト情報を追加します。
3. check() メソッドに対応するケース処理を追加します
プラグインの使用手順:
1. フォーム
で検証する必要があるテキスト ボックス、パスワード ボックス、および複数行のテキスト ボックスにカスタム チェック属性を追加します。2. 複数の形式の検証はスペースで区切られます。たとえば、(必須フィールドと電子メールを同時に検証): check="必須電子メール"
3. 2 つのパスワードが一致しているかどうかを確認する場合は、以下に示すように、pwd1 と pwd2 を一緒に使用します。
pwd1 には最初に入力された値が保存され、pwd2 には 2 回目に入力された値が保存されます。pwd1 のみを使用する場合は問題ありませんが、pwd2 のみを使用すると検証は通過しません。
デモのサンプルコードを以下に示します:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表单验证插件</title>
</head>
<body>
<form id="myform" method="post" action="success.html">
<ul>
<li>
邮箱：<input type="text" name="email" check="required email" />
</li>
<li>
密码：<input type="password" check="required pwd1" />
</li>
<li>
确认密码：<input type="password" check="required pwd2" />
</li>
<li>
手机：<input type="text" name="num" check="required mobile" />
</li>
<li>
数字：<input type="text" name="num" check="required num" />
</li>
<li>
地址：<textarea cols="5" rows="5" check="required"></textarea>
</li>
<li>
不加check验证的文本框：<input type="text" name="num" />
</li>
</ul>
<input type="submit" value="提交" />
</form>
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery.similar.checkForm.js" type="text/javascript"></script>
<script type="text/javascript">
$("#myform").checkForm();
</script>
</body>
</html>効果画像のサンプル:
サンプルコードが正常に送信されると、success.html ページにジャンプします。success.html は自分で作成する必要があります。この中には何も記述しなくても大丈夫です。
ただし、1 つの検証が失敗する限り、ジャンプは成功しません。
さらに、2 枚の写真も必要になる場合があります:
//画像パス
img_error: "img/error.gif",
img_success: "img/success.gif",
ここにアップロードしました。右クリックして名前を付けて保存してください。
上記がこの記事の全内容であり、皆さんが jquery 検証コードの実装を習得するためのより良い方法を見つけるのに役立つことを願っています。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
