全体的なアイデア：
1：使用要素-UIグリッド解像度と小さな適応を達成するために、高解像度
2：それぞれの選択されたオブジェクトを形成するデータのセットのシミュレーション、結合値と目標検証ルールを生成します
3：スクリプトタグでは、データ（）、カスタム検証ルール（すなわち発生認証オブジェクト）を作成フックにこれらのカスタムルールに追加することができるように
ここでは全体の日のためのコードは次のとおりです。
<テンプレート>
<DIV CLASS = "BOX1">
<divのスタイル= "マージントップ：400ピクセル;"> </ div> <EL-行> <EL-COL：XS = "0"：MD = "3"> ＆NBSP; </ EL-COL>
<EL-COL：XS = "24"：MD = "18"> <EL-形ラベル幅= "100pxに" REF = "FORMDATA"：モデル= "FORMDATA"：ルール= "ルール"> <DIV：インデックス= "（インデックス+ ''）" = V-ための"arrListで（項目、インデックス）"：キー= "item.name">
<EL-フォーム項目V-IF = "アイテム.nameの== '選択' item.name ">：： "ラベル=" item.name」=小道具"
"<エル・セレクトV-model.trim =" FORMDATA [item.name]
プレースホルダ= "活動エリアを選択して"
変更@ = "VALCHANGE"
スタイル= "幅：100％;">
<エル・オプションのラベル= "请选择"値= ""> </ EL-オプション>
<EL-オプションラベル= "区域一"値= "上海"> </ EL-オプション>
<EL-オプションラベル=」区域二"値= "北京"> </ EL-オプション>
</ EL-select>の
</ EL-フォーム項目>
<EL-フォーム項目V-ELSE-IF =" item.name == 'テキストエリア' "：プロペラ=" item.name」：LABEL = "item.name">
<EL-入力タイプ= "テキストエリア" V-model.trim = "FORMDATA [item.name]" @変化= "VALCHANGE"> </ EL-入力>
</ EL-フォーム項目>
<EL-フォーム項目のV-ELSE：小道具= "item.name"：ラベル= "item.name">
<EL-入力V-model.trim = "FORMDATA [item.name]" @ぶれ= "VALCHANGE"> </ EL-入力>
</ EL-フォーム項目> </ div>
<EL-フォーム項目のスタイル= "テキスト整列：センター;">
<EL-ボタンタイプ= "主" @ = "submitForm（ 'FORMDATAを'）"をクリック>立即创建</ EL-ボタン>
<EL-ボタン@クリック= "resetForm（ 'FORMDATA'）">重置</ EL-ボタン>
</ EL-フォーム項目> </ EL-FORM> </ EL- COL>
</ EL-行>
</ div>
</テンプレート>
<スクリプト> // '@ / JS / global.js'からグローバルインポート。
// 自定义校验规则（邮箱）のVaRのcheckEmail =（規則、値、コールバック）=>
constのmailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ 。
もし
{（！値）{
返すコールバックを（新しい新しいエラー（ 'Eメールを空にすることはできません' ;））
}
のsetTimeout（（） => {
IF （mailReg.test（値））{
コールバック（）
} 他{
コールバック（新しい新しいエラー（「入力正しいメールボックス形式' ））;
}
}、 100 ）
}
// 電話確認
するvar checkPhone =（規則、値、コールバック）=> {
CONST phoneReg = / ^ 1。[3 | 4 | 5 | 7 | 8。。。。。] [0-9] {}。9 $ /
IF（！値）{
リターンコールバック（新しい新しいエラー（「電話番号がOHで空にすることはできません」））
}
のsetTimeout（（） => {
// Number.isIntegerデジタルES6方法が整数かどうかを確認し、それだけにはいつも、実際の入力を使用する場合文字列を特定する
// 私は+実装する暗黙的な変換が先行
IF（！Number.isInteger（+ 値））{
コールバック（新しい新しいエラー（「してください入力されたデジタル値」））
} 他{
IF phoneReg（ .TEST（値））{
コールバック（）
} 他{
コールバック（
}
}新しい新しいエラー（ '電話番号の形式が正しくありません' ））
}、 100 ）
}
エクスポートデフォルト{
コンポーネント：{
}、
データ（）{
リターン{
FORMDATA：{}、// バインディング各フォーム値のオブジェクト
arrList：[] // 初期化するために、アナログデータを
ルール：{} 、// 検証ルールオブジェクト
}
}、
作成（）{
// アナログダミーデータ
この .arrList = [
{名： "A1"は、必要:. 1 }、
{名： "A2"、必須：0 }、
{名前： }、、 "SELECT" :. 1必須
{：名前、 "メールで送信" :. 1必須}、
{名： "電話"は、:. 1を必要}、
{名前 "のTextArea"は、:. 1必須、}
]
// 結合についてオブジェクトフォーム各値
のために（LET I = 0、LEN = この ; IがLEN <I ++は.arrList.length {）
VAR OBJ = {[ この ""：.arrList [I]は.nameの] }
この .formData =オブジェクト.ASSIGN（{}、この.formData、OBJ）;
}
はconsole.log（この.formData）;
// パリティルールオブジェクトを生成
するために、I = 0 LET（LEN =この .arrList.length; iがLEN <; iは++ ）{
VARの ARRSの= [];
もし（この .arrList [I] == 1 .required ）{
VAR OBJS = {
：必要真、
メッセージ：この .arrList [I] .nameの+ '不能为空' 、
トリガー： 'ぼかし'
}。
もし（この .arrList [I] .nameの== '選択' ）{
OBJS = {
必要：真、
メッセージ：この .arrList [I] .nameの+ '空でない' 、
トリガー： '変更'
}
arrs.push（OBJS）;
} そう IF（この .arrList [I] .nameの== 'メールに' ）{
ARRS。プッシュ（OBJS）;
OBJS = {バリ：のcheckEmail、トリガー'ブラー'}; // のカスタム検証ルール
arrs.push（OBJS）;
} そう IF（この .arrList [I] .nameの== '電話' ）{
arrs.push（OBJS）。
OBJS = {バリ：checkPhone、トリガー'ブラー'}; // のカスタム検証ルール
arrs.push（OBJS）;
} そう IF（この .arrList [I] .nameの== 'のTextArea' ）{
arrs.push （OBJS）;
OBJS = {分：5、最大:. 8、メッセージ： '文字5-8の長さ'、トリガー： 'ぼかし'}; // 長さ検証
arrs.push（OBJS）;
} 他{
ARRS。プッシュ（OBJS）;
}
}
これは [.rules この .arrList [I] .nameの] =のARRSと、
}
にconsole.log（これは.rules）
}、
搭載（）{
}、
メソッド：{
// 提交事件
submitForm（formNameフォーム）{
この。$、参考文献[フォーム名] .validate（（有効）=> {
場合（有効）{
警告（ '提出！' ）;
} 他{
はconsole.log（ 'エラーが提出!!' ）;
を返す 偽;
}
}）;
}、
// 重置事件
resetForm（formNameフォーム）{
この。$、参考文献[フォーム名] .resetFields（）;
}
// 値変更イベントの各形式
VALCHANGE（ヴァル）{
にconsole.log（ヴァル）
はconsole.log（この.formData）
}
}
}
</ SCRIPT>