ดังที่แสดงในรูปด้านบนเราจำเป็นต้องใช้ฟังก์ชั่นการตรวจสอบต่อไปนี้:
การควบคุมเป็นสิ่งจำเป็นในการควบคุม
ทั้งหมดจำเป็นต้องควบคุมความยาวสูงสุด
ครั้งแรกที่หน้าเปิดอยู่การควบคุมไม่สามารถแสดงเป็นสถานะข้อผิดพลาดได้
หลังจากล้างเนื้อหาอินพุตแล้วการควบคุมอินพุตที่ต้องการจะต้องแสดงเป็นสถานะข้อผิดพลาด
ปุ่มเผยแพร่สามารถใช้ได้หลังจากอินพุตทั้งหมดใช้ได้
ด้วย AngularJS เราสามารถใช้ข้อกำหนดเหล่านี้ได้อย่างง่ายดายจำเป็นต้องใช้รหัส JS 1 บรรทัดเท่านั้น สไตล์ UI ใช้ bootstrap ที่นี่ เริ่มต้นด้วยรหัสตัวอย่าง:
html
<! doctype html> <html lang = "zh-cn" ng-app = "ftitapp"> <head> <meta charset = "utf-8"/> <title> ตัวอย่าง </title> <link href = "/content/bootstrap.css src = "/scripts/angular.js"> </script> </head> <body> <div> <!-พื้นที่เนื้อหาหลัก-> <div> <div> <!-ติดต่อเราพื้นที่ฟอร์ม-> <form action = "/coment/create" method = "post" role = "name =" createContActForm ng-class = "{'ประสบความสำเร็จ':! createContactForm.username. $ pristine && createContactform.username. $ ถูกต้อง, 'Have-error':! createContactForm.username. ng-model = "ชื่อผู้ใช้" name = "username" autofocus = "" ต้องการ ng-maxLength = 30> <div ng-show = "! createContactForm.username. $ pristine && createContactForm.username. $ valid" createContactForm.username. $ ไม่ถูกต้อง "> <span> </span> </div> <!-ที่อยู่อีเมล USERMAIL-> <div ng-class =" {'Have-success':! createContactForm.usermail. $ pristine && createContactForm.Usermail. createContactForm.usermail. $ ไม่ถูกต้อง} "> <label for =" usermail "> ที่อยู่อีเมล*</label> <อินพุต type =" อีเมล "ng-model =" usermail "name =" usermail "จำเป็นต้องใช้ ng-maxlength = 30> <div ng-show ="! </div> <div ng-show = "! createContactform.usermail. $ pristine && createContactform.usermail. $ ไม่ถูกต้อง"> <span> </pan> </div> </div> <! 'Has-error':! createContactForm.subject. $ pristine && createContactForm.subject. $ ไม่ถูกต้อง} "> <label for =" subject "> หัวเรื่อง*</label> <อินพุต type =" text "ng-model =" subject " createContactForm.subject. $ verid "> <span> </span> </div> <div ng-show ="! createContactform.subject. $ pristine && createContactForm.subject. $ invalid "> <span> ! createContactForm.content. $ pristine && createContactForm.content. $ ถูกต้อง 'Have-error':! createContactForm.content. $ pristine && createContactForm.content. $ invalid} "> <label for =" เนื้อหา "> เนื้อหา* ng-maxLength = 1000> </textarea> <div ng-show = "! createContactForm.content. $ pristine && createContactForm.content. $ ถูกต้อง"> <span> </span> </div> <div ng-show = "! </div> <!-ปุ่มส่ง-> <div> <div ng-show = "createContactForm. $ ถูกต้อง"> <อินพุต type = "image" src = "/content/images/comment_publish_button.png" onsubmit = "ส่ง ();" value = "เผยแพร่" ng-disabled = '! createContactform. $ ust uid'/> </div> <div ng-show = "! createContactform. $ ถูกต้อง"> <img src = "/content/images/invalid_publish_button.png"/> </div> src = "/scripts/ftit/contactCreateController.js"> </script> </body> </html>รหัส JS (เป็นเพียงบรรทัดเดียวเท่านั้น)
ContractCreateController.js
var ftitappmodule = angular.module ('ftitapp', []);ไม่เป็นไร ประเด็นสำคัญสองสามข้อที่จะอธิบาย:
NG-Class: แท็กนี้ใช้เพื่อควบคุมค่าของคลาส ตัวอย่างเช่น ng-class = "{'ประสบความสำเร็จ':! createContactForm.content. $ pristine} หมายความว่าถ้าค่าของ! createContactForm.content. $ pristine เป็นจริงค่าของชั้นเรียนคือการประสบความสำเร็จ
NG-Show: ควบคุมว่าการควบคุมจะปรากฏขึ้นหรือไม่
createContactForm. $ ถูกต้อง: หลังจากผ่านการตรวจสอบทั้งหมดค่าจะเป็นจริงมิฉะนั้นมันเป็นเท็จ
createContactForm.content. $ ถูกต้อง: ระบุว่าการควบคุมเนื้อหาผ่านการตรวจสอบผ่านจริงหรือไม่มิฉะนั้นจะเป็นเท็จ
createContactForm.content. $ pristine: ระบุว่าไม่เคยป้อนการควบคุมเนื้อหาหรือไม่ มันไม่เคยถูกป้อนเป็นความจริงมิฉะนั้นมันเป็นเท็จ
สำหรับปัญหาทางเทคนิคโดยละเอียดเพิ่มเติมโปรดตรวจสอบเอกสารทางเทคนิค AngularJS