angularjs中的表单验证
Posted 陆漫漫
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angularjs中的表单验证相关的知识,希望对你有一定的参考价值。
angular对html原生的form做了封装,增加了很多验证功能
1.代码结构
<form name="signup_form" novalidate ng-submit="signupForm()"> <div> <label>用户名</label> <input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=3 ng-maxlength=20 required /> <div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$invalid"> <small ng-show="signup_form.name.$error.required">姓名必填</small> <small ng-show="signup_form.name.$error.minlength">姓名最少三个字符</small> <small ng-show="signup_form.name.$error.maxlength">姓名最多20个字符</small> </div> </div> <div> <label>密码</label> <input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=3 ng-maxlength=20 required /> <div class="error" ng-show="signup_form.name.$dirty && signup_form.name.$invalid"> <small ng-show="signup_form.name.$error.required">密码必填</small> <small ng-show="signup_form.name.$error.minlength">密码最少三个字符</small> <small ng-show="signup_form.name.$error.maxlength">密码最多20个字符</small> </div> </div> <button type="submit" ng-disabled="signup_form.$invalid" class="button radius">提交</button> </form>
2.如果要使用angular的表单验证,首先要确保表单必须要有一个name的属性所有的输入字段都可以进行基本验证,比如最大,最小长度等。这些功能都由H5的表单属性提供,如果想要屏蔽浏览器对于表单默认的验证行为,可以在表单上添加novaildate的标记。
3.h5的验证
必填项:验证表单输入是否已经添加 之前在dom元素上加上required标记即可
<input type="text" required/>
最大/小长度:验证表单输入的文本是否小/大于某个最小值,可以在输入的字段上使用指令
ng-maxlength="{number}"
/ng-minlength="{number}"
<input type="text" ng-minlength="5" ng-maxlength="15"
/>
电子邮件:验证输入的文本是否是电子邮箱可以使用 type=email来实现
<input type="email" name="email" ng-model="user.email" />
是否数字:验证输入的文本是否是为数字可以使用 type=number来实现
<input type="number" name="age" ng-model="user.age" />
URL:验证输入的文本是否是为url可以使用 type=url来实现
<input type="url" name="homepage" ng-model="user.homepage" />
4.angular内置的验证指令
匹配模式:使用ng-pattern="/PATTERN/"来确保输入能匹配指定的正则表达式
<input type="text" ng-pattern="[a-zA-Z]"/>
5.表单的属性
表单的属性可以在所在作用域的$scope对象中访问到,而我们又可以访问$scope对象因为javascript可以间接地访问dom中的表单属性借助这些属性,我们可以对表单做出实时的响应(双向绑定)这些属性
1:未修改的表单 这是一个布尔类型的属性,用来判断用户是否修改了表单,如果未修改,值为true否则为false formName.inputfieldName.$pristine 2:修改过的表单 只要用户修改过表单无论输入是否验证通过都返回true formName.inputfieldName.$dirty 3:合法的表单 这个布尔属性用来判断表单的内容是否不合法,如果当前的表单内容是合法的。该属性就返回为true formName.inputfieldName.$valid 4:不合法的表单 这个布尔属性用来判断表单的内容是否不合法,如果当前的表单内容是不合法的,该属性就返回为true formName.inputfieldName.$invalid 5:错误 这是angular提交的另一个非常有用的属性:$error对象,她包含当前表单所有的验证内容。以及它们是否合法的信息,可以这样来访问formName.inputfieldName.$error,如果验证失败这个属性值为true,如果值为false说明通过了验证。
以上是关于angularjs中的表单验证的主要内容,如果未能解决你的问题,请参考以下文章