この記事の例では、参考のために js フォーム検証の実装方法を共有します。具体的な内容は次のとおりです
1 つ目: js フォーム検証
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册-个人用户</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
<style>
body {
font-family: Arial, "宋体", Lucida, Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #333;
line-height: 150%;
background: #f2f2f2;
}
.hide{display:none;}
.focus,.error {
color: #e4393c;
line-height: 36px;
height: 36px;
position: absolute;
top: 0px;
width: 260px;
padding: 0 5px;
background: #FFEBEB;
border: 1px solid #ffbdbe;
}
.error span,.focus span {
padding: 5px 0;
line-height: 13px;
display: block;
}
.focus {
color: #666;
width: 260px;;
line-height: 36px;
background: #f7f7f7;
border: 1px solid #dddddd;
}
.regist {
width: 990px;
padding: 0;
margin: 0 auto;
zoom: 1;
}
.mc {
padding: 30px 0 20px;
border: solid #dddddd; border-width : 0px 1px 1px;
background: #FFF;
overflow: hidden;
zoom: 1;
border-width: 0px 1px 1px;
}
.form {
float: left;
width: 750px;
font-size: 12px;
}
.form label,.form input,.form select,.form textarea,.form button,.form .label {
float: left;
font-size: 12px;
}
.item {
padding-top: 9px;
height: 60px;
line-height: 34px;
position: relative;
z-index: 1;
}
.label {
float: left;
width: 190px;
text-align: right;
font-size: 14px;
color: #999;
padding-right: 10px;
}
.input {
float: left;
position: relative;
width: 270px;
overflow: visible;
}
.text {
float: none;
width: 275px;
height: 37px;
line-height: 32px;
border: 1px solid #cccccc;
font-size: 14px;
font-family: arial, "宋体";
overflow: hidden;
}
</style>
</head>
<body>
<p class="regist">
<p class="mc">
<form id="personRegForm" class="form" action="login.html" method="POST" onsubmit="return validateForm();">
<p class="item">
<span class="label">用户名：</span>
<p class="input">
<input type="text" id="username" name="username" class="text">
<label id="username_msg" class="hide"></label>
</p>
</p>
<p class="item">
<span class="label">请设置密码：</span>
<p class="input">
<input type="password" id="password" name="password" class="text">
<label id="pwd_msg" class="hide"></label>
</p>
</p>
<p class="item">
<span class="label">请确认密码：</span>
<p class="input">
<input type="password" id="pwdRepeat" name="pwdRepeat" class="text">
<label id="pwdRepeat_msg" class="hide"></label>
</p>
</p>
<p class="item">
<span class="label">验证邮箱：</span>
<p class="input">
<input type="text" id="mail" name="mail" class="text">
<label id="mail_msg" class="hide"></label>
</p>
</p>
<p class="item">
<span class="label"> </span>
<input type="submit" class="btn-img" id="registsubmit" value="立即注册" />
</p>
</form>
</p>
</p>
<script>
window.onload = function(){
// 1. 用户名
$("#username").focus(function(){
/* 获取焦点
var username_msg = $("#username_msg");
username_msg.text("4-20位字符，支持英文、数字及'-'、'_'组合");
username_msg.attr("class","focus");
*/
elemFocus("username_msg","4-20位字符，支持英文、数字及'-'、'_'组合");
}).blur(userValidator);
// 2. 密码
$("#password").focus(function(){
elemFocus("pwd_msg","6-20位字符，可使用字母、数字的组合");
}).blur(pwdValidator);
// 3. 确认密码
$("#pwdRepeat").focus(function(){
elemFocus("pwdRepeat_msg","6-20位字符，可使用字母、数字的组合");
}).blur(pwdRepeatValidator);
// 4. Email
$("#mail").focus(function(){
elemFocus("mail_msg","完成验证后，可以使用该邮箱登录和找回密码");
}).blur(emailValidator);
}
// 定义函数 - 通用的信息提示
function elemFocus(eleId,text){
var ele_msg = $("#"+eleId);
ele_msg.text(text);
ele_msg.attr("class","focus");
}
// 定义验证用户名的函数
function userValidator(){
// 获取用户名输入的值
var value = $("#username").val();
// 获取用于显示提示信息的元素
var username_msg = $("#username_msg");
// 验证逻辑
if(value==""||value==null){
username_msg.text("用户名不能为空");
username_msg.attr("class","error");
return false;
}else if(value.length<4||value.length>20){
username_msg.text("用户名的长度不正确");
username_msg.attr("class","error");
return false;
}else if(!/^[a-zA-Z0-9-_]{4,20}$/.test(value)){
username_msg.text("用户名输入不正确");
username_msg.attr("class","error");
return false;
}
// 验证通过修改正确样式
if(!username_msg.hasClass("hide")){
username_msg.text("");
username_msg.attr("class","hide");
}
return true;
}
// 定义验证密码的函数
function pwdValidator(){
var value = $("#password").val();
var pwd_msg = $("#pwd_msg");
if(value==""||value==null){
pwd_msg.text("密码不能为空");
pwd_msg.attr("class","error");
return false;
}else if(value.length<6||value.length>20){
pwd_msg.text("密码的长度不正确");
pwd_msg.attr("class","error");
return false;
}else if(!/^[a-zA-Z0-9]{6,20}$/.test(value)){
pwd_msg.text("密码输入不正确");
pwd_msg.attr("class","error");
return false;
}
if(!pwd_msg.hasClass("hide")){
pwd_msg.text("");
pwd_msg.attr("class","hide");
}
return true;
}
// 定义确认密码验证的函数
function pwdRepeatValidator(){
var value = $("#pwdRepeat").val();
var pwdRepeat_msg = $("#pwdRepeat_msg");
var pwd = $("#password").val();
if(value==""||value==null){
pwdRepeat_msg.text("密码不能为空");
pwdRepeat_msg.attr("class","error");
return false;
}else if(value.length<6||value.length>20){
pwdRepeat_msg.text("密码的长度不正确");
pwdRepeat_msg.attr("class","error");
return false;
}else if(!/^[a-zA-Z0-9]{6,20}$/.test(value)){
pwdRepeat_msg.text("密码输入不正确");
pwdRepeat_msg.attr("class","error");
return false;
}else if(value != pwd){
pwdRepeat_msg.text("两次密码输入不一致");
pwdRepeat_msg.attr("class","error");
return false;
}
if(!pwdRepeat_msg.hasClass("hide")){
pwdRepeat_msg.text("");
pwdRepeat_msg.attr("class","hide");
}
return true;
}
// 定义Email验证的函数
function emailValidator(){
var value = $("#mail").val();
var email_msg = $("#mail_msg");
if(value==""||value==null){
email_msg.text("Email不能为空");
email_msg.attr("class","error");
return false;
}else if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)){
email_msg.text("Email格式不正确");
email_msg.attr("class","error");
return false;
}
if(!email_msg.hasClass("hide")){
email_msg.text("");
email_msg.attr("class","hide");
}
return true;
}
function validateForm(){
if(!userValidator()||!pwdValidator()||!pwdRepeatValidator()||!emailValidator()){
return false;
}
return true;
}
</script>
</body>
</html>
2 つ目のタイプ:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
form {
width: 570px;
height: 300px;
margin: 100px auto;
}
label {
width: 64px;
float: left;
clear: left;
height: 36px;
line-height: 36px;
margin-top: 10px;
}
input {
width: 300px;
height: 36px;
line-height: 36px;
margin-top: 10px;
text-indent: 8px;
font-size: 16px;
font-family: "微软雅黑";
border: 1px solid #ccc;
float: left;
}
#sub {
width: 302px;
height: 40px;
border: 1px solid #ccc;
background: #888;
color: #fff;
font-size: 18px;
text-indent: 0;
}
.spa {
height: 36px;
line-height: 36px;
width: 204px;
display: inline-block;
float: left;
font-size: 12px;
color: #BD362F;
text-indent: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<form action="" method="post">
<label id="name">姓 名：</label><input type="text" name="username" id="username" value="" placeholder="请输入姓名" /><span class="spa spa1"></span><br />
<label id="phone">手机号：</label><input type="text" name="userphone" id="userphone" value="" placeholder="请输入手机号" /><span class="spa spa2"></span><br />
<label id="address">地 址：</label><input type="text" name="useraddress" id="useraddress" value="" placeholder="请输入地址" /><span class="spa spa3"></span><br />
<label> </label><input type="submit" value="注册" id="sub" />
</form>
<script src="http://code.jquery.com/jquery-1.4.1.js"></script>
<script type="text/javascript">
window.onload = function() {
$("#username").focus()
}
/************************ 失焦判断 **********************************/
$("input").blur(function() {
$(".spa").css("color", "#BD362F")
if($(this).is("#username")) { //姓名判断
var na = /^[\u4E00-\u9FA5]{2,4}$/
if($("#username").val() != "") {
if(!(na.test($("#username").val()))) {
$(".spa1").text("请输入2-4个汉字");
$(this).css("border", "1px solid #BD362F")
return false;
} else if(na) {
$(".spa1").text("");
return true;
}
} else {
$(".spa1").text("");
}
}
if($(this).is("#userphone")) { //手机号判断
var ph = /^1[3|5|7|8|][0-9]{9}$/
if($("#userphone").val() != "") {
if(!(ph.test($("#userphone").val()))) {
$(".spa2").text("请输入正确手机号");
$(this).css("border", "1px solid #BD362F")
return false;
} else if(ph) {
$(".spa2").text("");
return true;
}
} else {
$(".spa2").text("");
}
}
if($(this).is("#useraddress")) { //地址判断
var ad = /^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/;
if($("#useraddress").val() != "") {
if(!(ad.test($("#useraddress").val()))) {
$(".spa3").text("请输入正确地址");
$(this).css("border", "1px solid #BD362F")
return false;
} else if(ad) {
$(".spa3").text("");
return true;
}
} else {
$(".spa3").text("");
}
}
})
/********************** 聚焦提示 ************************/
$("input").focus(function() {
if($(this).is("#username")) {
$(".spa1").text("四个汉字").css("color", "#aaa")
$(this).css("border", "1px solid #aaa")
}
if($(this).is("#userphone")) {
$(".spa2").text("11位手机号码").css("color", "#aaa")
$(this).css("border", "1px solid #aaa")
}
if($(this).is("#useraddress")) {
$(".spa3").text("最少8个字符（汉字、字母和数字）").css("color", "#aaa")
$(this).css("border", "1px solid #aaa")
}
})
/*********************** 提交验证 ***************************/
$("#sub").click(function() {
var na = /^[\u4E00-\u9FA5]{2,4}$/; //姓名正则
var ph = /^1[3|5|7|8|][0-9]{9}$/; //手机号正则
var ad = /^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/; //地址正则
if(na.test($("#username").val()) && ph.test($("#userphone").val()) && ad.test($("#useraddress").val())) {
return true;
} else {
if($("#username").val() == "") {
$(".spa1").text('请你填写用户名')
}
if($("#userphone").val() == "") {
$(".spa2").text('请你填写手机号')
}
if($("#useraddress").val() == "") {
$(".spa3").text('请你填写地址')
}
return false;
}
})
</script>
</body>
</html> 以上がこの記事の全内容です。皆様の学習に役立つことを願っております。また、皆様も PHP 中国語 Web サイトをサポートしていただければ幸いです。 JavaScript フォーム検証の 2 つの実装方法に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。 
Python vs. JavaScript：開発者の比較分析May 09, 2025 am 12:22 AMPythonとJavaScriptの主な違いは、タイプシステムとアプリケーションシナリオです。 1。Pythonは、科学的コンピューティングとデータ分析に適した動的タイプを使用します。 2。JavaScriptは弱いタイプを採用し、フロントエンドとフルスタックの開発で広く使用されています。この2つは、非同期プログラミングとパフォーマンスの最適化に独自の利点があり、選択する際にプロジェクトの要件に従って決定する必要があります。
Python vs. JavaScript：ジョブに適したツールを選択するMay 08, 2025 am 12:10 AMPythonまたはJavaScriptを選択するかどうかは、プロジェクトの種類によって異なります。1）データサイエンスおよび自動化タスクのPythonを選択します。 2）フロントエンドとフルスタック開発のためにJavaScriptを選択します。 Pythonは、データ処理と自動化における強力なライブラリに好まれていますが、JavaScriptはWebインタラクションとフルスタック開発の利点に不可欠です。
PythonとJavaScript：それぞれの強みを理解するMay 06, 2025 am 12:15 AMPythonとJavaScriptにはそれぞれ独自の利点があり、選択はプロジェクトのニーズと個人的な好みに依存します。 1. Pythonは、データサイエンスやバックエンド開発に適した簡潔な構文を備えた学習が簡単ですが、実行速度が遅くなっています。 2。JavaScriptはフロントエンド開発のいたるところにあり、強力な非同期プログラミング機能を備えています。 node.jsはフルスタックの開発に適していますが、構文は複雑でエラーが発生しやすい場合があります。
JavaScriptのコア：CまたはCの上に構築されていますか？May 05, 2025 am 12:07 AMjavascriptisnotbuiltoncorc;それは、解釈されていることを解釈しました。
JavaScriptアプリケーション：フロントエンドからバックエンドまでMay 04, 2025 am 12:12 AMJavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例：Webページテキストのコンテンツを変更します。 2。バックエンドの例：node.jsサーバーを作成します。
Python vs. Javascript：どの言語を学ぶべきですか？May 03, 2025 am 12:10 AMPythonまたはJavaScriptの選択は、キャリア開発、学習曲線、エコシステムに基づいている必要があります。1）キャリア開発：Pythonはデータサイエンスとバックエンド開発に適していますが、JavaScriptはフロントエンドおよびフルスタック開発に適しています。 2）学習曲線：Python構文は簡潔で初心者に適しています。 JavaScriptの構文は柔軟です。 3）エコシステム：Pythonには豊富な科学コンピューティングライブラリがあり、JavaScriptには強力なフロントエンドフレームワークがあります。
JavaScriptフレームワーク：最新のWeb開発のパワーMay 02, 2025 am 12:04 AMJavaScriptフレームワークのパワーは、開発を簡素化し、ユーザーエクスペリエンスとアプリケーションのパフォーマンスを向上させることにあります。フレームワークを選択するときは、次のことを検討してください。1。プロジェクトのサイズと複雑さ、2。チームエクスペリエンス、3。エコシステムとコミュニティサポート。
JavaScript、C、およびブラウザの関係May 01, 2025 am 12:06 AMはじめに私はあなたがそれを奇妙に思うかもしれないことを知っています、JavaScript、C、およびブラウザは正確に何をしなければなりませんか？彼らは無関係であるように見えますが、実際、彼らは現代のウェブ開発において非常に重要な役割を果たしています。今日は、これら3つの間の密接なつながりについて説明します。この記事を通して、JavaScriptがブラウザでどのように実行されるか、ブラウザエンジンでのCの役割、およびそれらが協力してWebページのレンダリングと相互作用を駆動する方法を学びます。私たちは皆、JavaScriptとブラウザの関係を知っています。 JavaScriptは、フロントエンド開発のコア言語です。ブラウザで直接実行され、Webページが鮮明で興味深いものになります。なぜJavascrを疑問に思ったことがありますか
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
