ホームページ > 記事 > ウェブフロントエンド > jQuery入力フォーム検証機能の詳細な例
jQuery入力フォーム検証機能の詳細な例
- 小云云オリジナル
- 2017-12-27 09:44:461528ブラウズ
この記事では、主にフォーム検証を完了するための jQuery のサンプル コードを紹介します。コードはシンプルで理解しやすいので、jQuery を使用してフォーム検証機能を完了するのに役立つことを願っています。
これ以上ナンセンスではありません。具体的なコードは次のとおりです:
<!doctype html>
<head>
<meta charset=utf-8" />
<title>表单验证</title>
<link href="css/style1.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<!-- 引入jQuery -->
<script src="jquery/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("form :input.required").each(function() {
var $required=$("<strong class=high>*</strong>");
$(this).parent().append($required);
});
$("form :input").blur(function() {
var $parent=$(this).parent();
$parent.find(".formtips").remove();
if($(this).is("#username")){
if(this.value==""||this.value.length<6){
var errorMsg='请输入至少六位的用户名';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg='输入正确';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
return false;
}
}
if($(this).is("#email")){
if(this.value==""||(this.value!==""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
var errorMsg='请输入正确的E—mail地址';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg='输入正确';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}
});
$("#send").click(function() {
$("form .required:input").trigger('blur');
var numError=$("form .onError").length;
if(numError){
return false;
}
alert("注册成功，密码已发到你的邮箱，请查收。");
});
});
</script>
</head>
<body>
<form method="post" action="">
<p class="int">
<label for="username">用户名:</label>
<input type="text" id="username" class="required" />
</p>
<p class="int">
<label for="email">邮箱:</label>
<input type="text" id="email" class="required" />
</p>
<p class="int">
<label for="personinfo">个人资料:</label>
<input type="text" id="personinfo" />
</p>
<p class="sub">
<input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
</p>
</form>
</body>
</html> 関連する推奨事項:
AngularJS はフォーム検証の携帯電話番号機能を実装します
以上がjQuery入力フォーム検証機能の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。