Whentakinginputfromourusers,it'simportanttoshowvisualfeedbackontheirinput.
Inthecontextofhumanrelationships, formvalidationisjustasmuchaboutgivingfeedbackaswellasgettingthe"right"input.
当从用户那里得到输入的时候，给用户一个视觉上的反馈很重要。表单验证的目的是为了给予反馈，同样也是为了得到正确的输入。
Notonlydoesitprovidepositivefeedbackforouruser,itwillalsosemi-protectourwebappfrombadorinvalidinput.
Wecanonlyprotectourbackendasmuchasispossiblewithourwebfrontend.
它不仅为我们的用户提供了积极的反馈，也为错误或非法的输入给我们的应用提供了一些保护。我们只能尽可能的在前端添加措施来保护后端。
Outofthebox,AngularJSsupportformvalidationwithamixoftheHTML5formvalidationinputs
aswellaswithitsownvalidationdirectives.
创造性地，在表单校验上，AngularJS既支持HTML5地混合表单校验，当然还有自带的用来校验的directives.
TherearemanyformvalidationdirectivesavailableinAngularJS.
We'lltalkaboutafewofthecorevalidations, thenwe'llgetintohowtobuildyourownvalidations.
AngularJS中有许多用来校验的directives。我们将讨论几个核心校验,然后讲讲如何建一个检验。
AngularJSmakesitprettyeasyforustohandleclient-sideformvalidationswithoutaddingalotofextraeffort.
Althoughwecan'tdependonclient-sidevalidationstokeepourwebapplicationsecure,
theydoprovideinstantfeedbackofthestateoftheform.
AngularJS使你不用做很多额外得工作，就能够不费吹灰之力地处理客户端的表单验证。尽管们不能依赖客户端的验证来保持应用的安全性，但它们可以给你即时的表单状态的反馈。
Touseformvalidations,
wefirstmustensurethattheformhasanameassociatedwithit,
likeintheaboveexample.
为了使用表单验证，我们首先要保证表单要有一个名字，就像上面的例子。
Allinputfieldscanvalidateagainstsomebasicvalidations,
likeminimumlength,maximumlength,etc.
TheseareavailableonthenewHTML5attributesofaform.
所有的输入框可以做一些基本验证，如最小长度，最大长度等。这些都是新HTML5中表单的属性。
Itisusuallyagreatideatousethenovalidateflagontheformelement,
asitpreventsthebrowserfromnativelyvalidatingtheform.
通常来说，给表单加上novalidate属性是个好注意。这样做可以阻止表单自身的验证动作。
Let'slookatallthevalidationoptionswehavethatwecanplaceonaninputfield:
让我们来看看可以放到input上的验证项：
Required
Tovalidatethataforminputhasbeenfilledout,
wesimplyaddtheHTML5tag,required,totheinputfield:
MinimumLength
Tovalidatethataforminputinputisatleastacertain{number}ofcharaters,
weaddtheAngularJSdirectiveng-minlength="{number}"totheinputfield:
MaximumLength
Tovalidatethataforminputisequaltoorlessthananumberofcharacters,
wecanaddtheAngularJSdirectiveng-maxlength="{number}":
MatchesaPattern
Toensurethataninputmatchesaregex,wecanuseng-pattern="/PATTERN/";
Tovalidateanemailaddressinaninputfield,wesimplysettheinputtypetoemail,likeso:
URL
TovalidatethataninputrepresentsaURL,settheinputtypetourl:
CustomValidations
AngularJSmakesitveryeasytoaddourownvalidations,aswell,byusingdirectives.
Forinstance,let'ssaythatwewanttovalidatethatourusernameisavailableinthedatabase.
Todoso,we'llimplementadirectivethatfiresanAjaxrequestwhenevertheformchanges.
同样地，AngularJS很容易建立我们自己的directives。
举个例子，比方说我们想要验证用户名是否可用。为了达到目的，我们执行一个directive来触发一个ajax请求当表单发生改变时。
ControlVariablesinForms
AngularJSmakespropertiesavailableonthecontaining$scopeobjectavailabletousasaresultof
settingaforminsideoftheDOM.
Thesepropertiesenableustoreacttotheforminrealtime(justlikeeverythingelseinAngularJS).
Thepropertiesthatareavailabletousare:
(Notethatthesepropertiesaremadeavailabeltousintheformat:)
UnmodifiedForm
Thispropertyisabooleanthattellsuswhethertheuserhasmodifiedtheform.
Itistrueiftheuserhasn'ttouchedtheform,andfalseiftheyhave:
ModifiedForm
Thispropertyisabooleanthattellsusifandonlyiftheuserhasactuallymodifiedtheform.
Itissetregardlessofvalidationsontheform:
VaildForm
Thispropertyisabooleanthattellsuswhetherornottheformisvalid.
Iftheformiscurrentlyvalid,thenthefollowingwillbetrue:
InvalidForm
Thepropertyisabooleanthattellsuswhetherornottheformisinvalid.
Iftheformiscurrentlyinvalid,thenthefollowingwillbetrue:
ThelasttwopropertiesareparticularlyusefulforshowingorhidingDOMelements.
Theyarealsoveryusefulwhensettingaclassonaparticularform.
Errors
ThispropertyisanotherusefulonethatAngularJSmakesavailabletous:the$errorobject.
Thisobjectcontainsallofthevalidationsonapaticularformandarecordofwhethertheyarevalidorinvalid.
Togetaccesstothisproperty,usethefollowingsyntax:
Ifavalidationfails,thenthispropertywillbetrue;ifitisfalse,thenthevaluehaspassedtheinputfield.
ALittleStyleNeverHurts
WhenAngularJSishandlingaform,
itaddsspecificclassestotheformbaseduponthecurrentstateoftheform(i.e.ifit'scurrentlyvalid,unchanged,etc).
Theseclassesarenamedsimilarlytothepropertiesthatwecancheck,aswell.
Theseclassesare:
Theycorrespondtotheircounterpartontheparticularinputfield.
Whenafieldisinvalid,the.ng-invalidclasswillbeappliedtothefield.ThisparticularsitesetstheCSSclassas:
未完待续
