JS開発検証フォームチュートリアル - 検証フォーム(1)

まず前のセクションのコードを見てみましょう

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        #div{width:410px;height:400px;background:#46a3ff;padding-left:16px;
            padding-top:20px;}
        input{
            outline:none;
            box-sizing:border-box;padding-left:15px;}
        textarea{
            outline:none;resize : none;
            box-sizing:border-box;padding-left:15px;padding-top:5px;}
        .name{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
        .pwd{width:200px;height:30px;
            margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
        .email{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
        .txt{
            width:280px;height:70px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
        .sub{width:100px;height:30px;padding-left:0px;
            border:none;
            border-radius:5px;background:#ffd0ff;}
        .sub:hover{background:#ffaad5;}
        .div{
            width:200px;height:30px;margin:0 auto;box-sizing:border-box;padding-left:45px;padding-top:5px;color:#8600ff;font-weight:bold;}

    </style>
</head>
<body>
    <div id="div">
        <form>
            <label>用户名:</label>
            <input type="text" class="name" id="name">
            <div id="sp" class="div"></div>                
            <label>密&nbsp;码:</label>
            <input type="password" class="pwd" id="pwd">
            <div id="sp1" class="div"></div>
            <label>邮&nbsp;箱:</label>
            <input type="text" class="email" id="email">
            <div id="sp2" class="div"></div>
            <label>爱&nbsp;好:</label>
            <textarea rows="5" cols="40" class="txt" id="txt"></textarea>
            <div id="sp3" class="div"></div>
            <input type="button" class="sub" value="注册" id="sub">
        </form>
    </div>
</body>
</html>

最初にユーザー名の検証を見てみましょう:

var sub = document.getElementById('sub');
sub.onclick=function(){
/ユーザー名が空かどうかを確認し、空の場合は、プロンプト情報を提供します
var val = document.GetelementByid ('name')
if (val == "") {
document.GetelementByid ("sp; ") .innerhtml = "ユーザー名を入力してください!";;
}}

まずはSUBを使ってボタンを受け取り、クリックイベント

を作ってテキストボックスの値を取得し、判定してみましょう。テキストボックスの値が空の場合は、divタグに格納されるプロンプトメッセージが表示されます

実際、残りのテキストボックスとテキストの検証は、おおよそわかります。フィールドは非常にシンプルです

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

=var sub = document.GetelementByid ('Sub');

sub.Onclick = Function () {
// ユーザー名が空かどうかを確認し、空の場合はプロンプトを表示します
var val = document.GetelementByid ('Name ').value;
プロンプメッセージを表示します
var val1 = document.getElementById('pwd').value;を使用してを使用してを使用してを使用してを使用してを使用‐ ‐ ‐‐ ‐ var val1 = ‐ を使用することでdocument. }
//メールが空かどうかを確認する
var val2 = document.getElementById('email').value;
using var val2 = ' ' ' ' を使用する ' ' を使用する ' ' を使用する ' ' を使用する - - - d document.getElementbyid（innerhtml = "次のセクション

新しいファイル

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{margin:0;padding:0;}
		#div{width:410px;height:400px;background:#46a3ff;padding-left:16px;
			padding-top:20px;}
		input{
			outline:none;
			box-sizing:border-box;padding-left:15px;}
		textarea{
			outline:none;resize : none;
			box-sizing:border-box;padding-left:15px;padding-top:5px;}
		.name{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
		.pwd{width:200px;height:30px;
			margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
		.email{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
		.txt{
			width:280px;height:70px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
		.sub{width:100px;height:30px;padding-left:0px;
			border:none;
			border-radius:5px;background:#ffd0ff;}
		.sub:hover{background:#ffaad5;}
		.div{
			width:200px;height:30px;margin:0 auto;box-sizing:border-box;padding-left:45px;padding-top:5px;color:#8600ff;font-weight:bold;}

	</style>
</head>
<body>
	<div id="div">
		<form>
			<label>用户名:</label>
			<input type="text" class="name" id="name">
			<div id="sp" class="div"></div>				
			<label>密 码:</label>
			<input type="password" class="pwd" id="pwd">
			<div id="sp1" class="div"></div>
			<label>邮 箱:</label>
			<input type="text" class="email" id="email">
			<div id="sp2" class="div"></div>
			<label>爱 好:</label>
			<textarea rows="5" cols="40" class="txt" id="txt"></textarea>
			<div id="sp3" class="div"></div>
			<input type="button" class="sub" value="注册" id="sub">
		</form>
	</div>

	<script type="text/javascript">
		var sub = document.getElementById('sub');
		sub.onclick=function(){
			//验证用户名是否为空,如果为空，给出提示信息
			var val = document.getElementById('name').value;
			if(val == ""){
				document.getElementById("sp").innerHTML = "请输入用户名！";
			}
			//验证密码是否为空，为空则给出提示信息
			var val1 = document.getElementById('pwd').value;
			if(val1 == ""){
				document.getElementById("sp1").innerHTML = "请输入密码！";
			}
			//验证邮箱是否为空
			var val2 = document.getElementById('email').value;
			if(val2 == ""){
				document.getElementById("sp2").innerHTML = "请输入邮箱！";
			}
			//验证内容是否为空
			var val3 = document.getElementById('txt').value;
			if(val3 == ""){
				document.getElementById("sp3").innerHTML = "请输入内容！";
			}			

		}
	</script>
</body>
</html>

提出するリセットコード

自動運転

全画面表示