借助AngularJS,我们不需要花太多分外的精神就可以轻松完成客户端表单考证功用。虽然 Web运用平安不能完整依靠客户端考证,但客户端考证可以供应表单状况的及时反应。
要运用表单考证,首先要确保表单有一个name属性。
一切输入字段都可以举行基础的考证,比方最大、最小长度等。这些功用是由新的HTML5 表单属性供应的。
假如想要屏障浏览器对表单的默许考证行动,可以在表单元素上增加novalidate标记。
下面看一下可以在input元素上运用的一切考证选项。
必填项
考证某个表单输入是不是已填写,只需在输入字段元素上增加HTML5标记required即可:<input type="text" required />
最小长度
考证表单输入的文本长度是不是大于某个最小值,在输入字段上运用AngularJS指令ng-minleng= “{number}”:<input type="text" ng-minlength="5" />
最大长度
考证表单输入的文本长度是不是小于或即是某个最大值,在输入字段上运用AngularJS指令 ng-maxlength=”{number}”:<input type="text" ng-maxlength="20" />
形式婚配
运用ng-pattern=”/PATTERN/”来确保输入可以婚配指定的正则表达式:<input type="text" ng-pattern="[a-zA-Z]" />
电子邮件
考证输入内容是不是是电子邮件,只需像下面如许将input的范例设置为email即可:<input type="email" name="email" ng-model="user.email" />
数字
考证输入内容是不是是数字,将input的范例设置为number:<input type="number" name="age" ng-model="user.age" />
URL
考证输入内容是不是是URL,将input的范例设置为 url:<input type="url" name="homepage" ng-model="user.facebook_url" />
在表单中控制变量
表单的属性可以在其所属的$scope对象中接见到,而我们又可以接见$scope对象,因而 JavaScript可以间接地接见DOM中的表单属性。借助这些属性,我们可以对表单做出及时(和 AngularJS中其他东西一样)相应。这些属性包含下面这些。未修改的表单 formName.inputFieldName.$pristine 这是一个布尔属性,用来推断用户是不是修改了表单。假如未修改,值为true,假如修悛改值为false; 修悛改的表单 formName.inputFieldName.$dirty 只需用户修悛改表单,不管输入是不是经由过程考证,该值都返回true: 正当的表单 formName.inputFieldName.$valid 这个布尔型的属性用来推断表单的内容是不是正当。假如当前表单内容是正当的,下面属性的 值就是true: 不正当的表单 formName.inputFieldName.$invalid 这个布尔属性用来推断表单的内容是不是不正当。假如当前表单内容是不正当的,下面属性的 值为true: 毛病 formName.inputfieldName.$error 假如考证失利,这个属性的值为true;假如值为false,申明输入字段的值经由过程了考证。
下面连系详细的例子,来运用上面的属性
<form novalidate="novalidate" name="myForm">
<div>
<label>用 户 名:</label>
<input type="text"
name="user"
placeholder="请输入你的用户名"
ng-model="user"
ng-maxlength="10"
ng-minlength="5"
required
></br>
</div>
<div class="check">
<p class="error" ng-if="myForm.user.$error.required && myForm.user.$touched">用户名不能为空</p>
<p class="error" ng-if="myForm.user.$error.maxlength || myForm.user.$error.minlength">
用户名长度应该在5-10位之间
</p>
</div>
<div>
<label>密 码:</label>
<input type="password"
name="paw"
placeholder="******"
ng-model="paw"
ng-minlength="6"
ng-maxlength="10"
required
></br>
</div>
<div class="check">
<p class="error" ng-if="myForm.paw.$error.required && myForm.paw.$touched">
暗码不能为空
</p>
<p class="error" ng-if="myForm.paw.$error.maxlength || myForm.paw.$error.minlength">
暗码长度应该在6-10位之间
</p>
</div>
<div>
<label>反复暗码:</label>
<input type="text"
name="repaw"
placeholder="******"
ng-model="repaw"
></br>
</div>
<div class="check">
<p class="error" ng-if="repaw!=paw && myForm.paw.$touched">
两次暗码输入不一致
</p>
</div>
<div>
<label>邮 箱:</label>
<input type="mail"
name="mail"
placeholder=""
ng-model="mail"
ng-pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"
></br>
</div>
<div class="check">
<p class="error" ng-if=" myForm.phone.$error.pattern && myForm.phone.$touched">
邮箱花样毛病
</p>
</div>
<div>
<label>手机号码:</label>
<input type="text"
name="phone"
placeholder="请输入手机号码"
ng-model="phone"
ng-pattern="/^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/"
></br>
</div>
<div class="check">
<p class="error" ng-if=" myForm.phone.$error.pattern && myForm.phone.$touched">
手机号码花样毛病
</p>
</div>
<input type="submit"
name="sub"
value="提交"
ng-submit="submit"
>
</form>