これは私の例の一つであり、三つのファイルにペーストをコピー正しく実行することができます。
次index.cssコードです：
====================
* {
パディング：0。
マージン：0;
フォントサイズ：18px;
フォントファミリ：「黑体」。
}
体{
背景：#eee。
}
.container {
幅：960ピクセル幅。
背景：#FFF;
国境半径：10pxの;
マージン：100pxに自動;
}
.container> .header {
テキスト整列：センター。
背景：＃77F;
色：#eee;
高さ：45px;
行の高さ：45px;
境界半径：10pxの10pxの0。
}
.container> .body> .content {
高さ：93px;
}
.container> .body> .content> .row {
マージン左：100ピクセル。
マージントップ：20ピクセル;
位置：相対;
}
.container> .body> .content> .row + P {
マージントップ：9px。
マージン下：20ピクセル;
margin-left：157px;
色：＃090;
}
.container> .body> .content> .row>入力、＃1 sex1 {
位置：絶対。
左：150ピクセル;
トップ：-2px。
幅：500pxなど。
}
.container> .body> .content> .row>＃1 sex1 {
表示：インラインブロック。
高さ：30px;
幅：505px;
テキストインデント：220px;
}
.container> .body> .content> .row>スパン{
位置：絶対。
左：55×;
トップ：0PX。
}
.container> .body> .content> .row：{の前に
コンテンツ： "*";
フォントサイズ：20ピクセル;
位置：相対;
左：43px;
トップ：0PX。
色：＃093;
}
.container> .body> .btnContainer {
テキスト整列：センター。
}
.container> .body> .btnContainer> #btn {
マージン：30px自動。
幅：200pxの。
高さ：は50px;
国境半径：10pxの;
}
====================
次index.jsコードです：
====================
varのuserName = getById（ "userNameに" ）、// ユーザ名
alertText = getById（ '体'） 。getElementsByTagNameの（ "P"）、// メッセージボックスの
パスワード= getById（ "パスワード"） 、// パスワード
checkedPassword = getById （ "checkedPassword"）は、//パスワードを確認
nameone = getById（ "nameone"） 、// 名前
を識別= getById（ "特定"） //、 ID
BTN = getById（ "BTN"） 、// ボタンの取得
入力を= document.getElementsByTagName（ '入力'）、//取得し、すべての入力タグ
alertTexts = document.querySelectorAll、// GETメッセージ（ "alertText。"）の全ての
パターン; //正規表現
//指定されたオブジェクトID取得
機能getById（ID）を{
のdocument.getElementById（ID）を返します;
}
//非表示すべての情報提示
機能hideAlertText（）{
（VAR I = 0;私はalertText.lengthを<; I ++の）のために{
alertText [I] .innerHTML = "";
}
}
//イベント全て集束入力ボックスは、情報プロンプト
機能（ARR1のARR）ojbFocusを{
ため（VARのI = 0; I <arr.length; I ++）{
ARR [I] .onfocus =関数（）{
// （ARR1 [this.getAttribute（ "I"）]の）はconsole.log;
ARR1 [this.getAttribute（ "I"）] = this.getAttribute innerHTMLプロパティ（ "alertText"）の;.
}
}
}
//すべての入力ボックスがフォーカスイベントを失っトリガ、正しい検証
{（ARR1のARR）関数userNameBlurを
{（; Iはarr.lengthを<I ++はVAR I = 0）のための
ARR [I] .onblur =関数（）{
IF（this.value！）{
ARR1の[this.getAttribute（ "I"）] = innerHTMLのは"空でない、入力内容" ;.
。ARR1 [this.getAttribute（ "I"）] style.color =「赤の";
を返す;
}
VAR PARAM = this.getAttribute（" PATT "）;
VAR =新しい新しいパターン正規表現（PARAM）;
IF（this.getAttribute（" I "）===" 2「）{
（this.value IF！ ARR == [1] .Valueの）{
ARR1の[2] = .innerHTML "パスワード回一致していない、再入力してください";
ARR1の[2] .style.color = "赤";
返す;
}
}
（パターンIF。 EXEC（this.value））{
ARR1の[this.getAttribute（ "I"）]。innerHTMLの=「適切なフォーマット」。
ARR1 [this.getAttribute（ "I"）] style.color = "グリーン"。
}他{
ARR1 [this.getAttribute（ "I"）]のinnerHTML = this.placeholder。
ARR1 [this.getAttribute（ "I"）] style.color = "赤"。
}
}
}
}
機能を提出（）{
btn.onclick =機能（）{
のために（VARのI = 0;私はinputs.lengthを<;私は++）{
IF {（入力[I] .Valueの！）
入力[I] .focus（）;
alertTexts [I] = .innertHTML入力[I] .placeholder;
alertTexts [I] .style.color = "赤";
リターン;
}
}
のための（VARのI = 0; I <alertTexts.length; Iは++）{
IF（alertTexts [ I] .style.color === "赤"）{
入力[I] .focus（）;
警告（ "不完全な情報を登録することはできません！"）;
を返す;
}
}
アラート（ "正常に登録"）;
}
}
//すべての情報がプロンプト非表示
）（hideAlertTextを
//すべての入力ボックスは、フォーカスイベントが情報を入力するように要求を受信
ojbFocus（入力、alertTextsを）。
パターン= VAR / ^ \ {W} $ 6.18 /;
userNameBlur（入力、alertTexts）;
//情報を提出するために、不完全さ
（提出）。
====================
以下は、HTMLコードです：
====================
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>ドキュメント</ TITLE>
<リンクのrel = "スタイルシート"のhref = "スタイル/ index.css" >
</ head>
<body>
<DIV CLASS = "コンテナ">
<DIV CLASS = "ヘッダ"> - -用户注册- - </ div>
<HR />
<DIV CLASS = "ボディ" ID = "本体">
<DIV CLASS = "コンテンツ">
<DIV CLASS = "行" ID = "行">
の<span>用户名：</スパン>
<入力されたID = "userNameに" PATT = "^ \ W { 10,18} $」alertText = "请输入10-18位：字母、数字、下划线"タイプ= "テキスト" I = "0"プレースホルダ= "形式が間違っている、名前10-18ユーザー入力：英語、数字、アンダースコアを">
</ div>
<p型クラス= "alertText"上記のIDを述べ= "USERNAME1"> 1111 </ p型>
</ div>
<HR />
<divのクラス= "コンテンツ">
<DIV CLASS = "行">
<スパン>パスワード：</ span>の
<INPUTのID = "パスワード" PATT = "^ \ W {6,16} $" alertTextは= "パスワード6-16を入力してください（含む：文字、数字、下線）"タイプ= "パスワード" I = " 1"プレースホルダ= " 間違ったフォーマット、6-16（含む：文字、数字、下線）パスワードを入力してください">
</ div>
<Pクラスは= "alertText" ID = "パスワード1" > 1111 </ P>
</ div>
<HR />
<DIV CLASS = "コンテンツ">
<DIV CLASS = "行">
<span>をご確認パスワード：</ span>の
<INPUT ID = "checkedPassword" ID = " checkedPsd "PATT =" ^ \ W {6,16} $ "alertText =" パスワード6-16を入力してください（含む：文字、数字、アンダーライン） "タイプ="パスワード"I =" 2 "プレースホルダ=" 間違ったフォーマット「>：（文字、数字、アンダースコアを含む）、6-16桁のパスワードを入力してください
。</ div>
<Pクラス= "alertText" ID = "checkedPassword1"> 1111 </ P>
</ div>
<HR />
<DIV CLASS = "コンテンツ">
<DIV CLASS = "行">
<スパン>姓名</スパン>
<入力ID = "nameone" PATT = "^ [\ u4e00- \ u9fa5] {2,4} $" alertText = "请输入2-4个汉字的姓名"タイプ= "テキスト" I = "3"プレースホルダ= > "输入2-4个汉字的姓名请格式不对、"
</ div>
<Pクラス= "alertText" ID = "nameone1"> 1111 </ P>
</ div>
<HR />
<DIV CLASS =」コンテンツ">
<DIV CLASS ="行">
<span>を性别：</ span>の
<選択のid =" sex1" ID = "セックス"名前= "セックス">
<オプション値= "男">男</オプション>
<オプション値= "女">女</オプション>
</ select>の
</ div>
<！ - <Pクラス= "alertText" ID = ""> 1111 </ P> - >
</ div>
<HR />
<DIV CLASS = "コンテンツ">
<DIV CLASS = "行">
<スパン>身份证</スパン>
<入力されたID = "識別" PATT = "^ [1-9] [0-9] {16} [0-9X] $" alertText = " 識別番号18を入力してください"タイプ= "テキスト" I = "4"プレースホルダ= "形式は、識別番号を入力しない18">
</ div>
<Pクラス= "alertText" ID = "identify1"> 1111 </ P>
</ div>
<HR />
<DIVクラス= "コンテンツ">
<DIV CLASS = "行">
<span>のメールアドレス：</ span>の
<INPUTのID = PATT "電子メールで" =「^ \ * @ \ W * \ [A-ZA-Z. W ] {2,5}「alertText =」などのメールボックスの形式を入力してください[email protected]「タイプ=」テキスト「 I =」5「プレースホルダ=」 間違った形式、電子メールの形式は「[email protected]でなければなりません>
< / DIV>
<Pクラス= "alertText" ID = "EMAIL1"> 1111 </ P>
</ div>
<HR />
<DIV CLASS = "コンテンツ">
<DIV CLASS = "行">
<スパン>電話番号：</ span>の
[1] <INPUT ID = "電話" PATT =「^ [356 789] [0- 9] {9} $「alertText =」 してください再入力電話番号11「タイプ=」テキスト「I = 」6「プレースホルダ=」 間違った形式、11桁の電話番号「を入力>
</ div>
<Pクラス= "alertText" ID = "のphone1"> 1111 </ P>
</ div>
<HR />
<DIV CLASS = "btnContainer">
<ボタンID = "BTN">注册</ボタン>
</ div>
</ div>
</ div>
<スクリプトタイプ= "テキスト/ javascriptの" SRC = "JS / index.js"> </ SCRIPT>
</ BODY>
</ HTML>
====================